Front-end66 HTML <input> type 속성 ◾ text : 일반 텍스트를 입력받을 수 있습니다. ◾ password : 패스워드를 입력받을 수 있도록, 입력값이 화면에 보여지지 않도록 합니다. ◾ submit : 태그 내에 입력된 데이터를 서버로 전달해 줍니다. ◾ button : 버튼을 생성해 줍니다. ◾ checkbox : 체크박스 형태의 입력을 받을 수 있습니다. ◾ radio : 라디오 버튼 형태의 입력을 받을 수 있습니다. ◾ reset : 태그 안의 사용자 입력을 초기화 합니다. 2021. 8. 10. CSS font-size 속성 ◾ medium : 웹브라우저에서 정한 기본 글자크기입니다. ◾ xx-small, x-small, small, large, x-large, xx-large : medium에 대한 상대적인 크기입니다. ◾ smaller, larger : 부모 요소의 글자 크기에 대한 상대적인 글자 크기입니다. ◾ length : px, %, em, rem 등으로 크기를 정합니다. ◾ initial : 기본값으로 설정합니다. ◾ inherit : 부모 요소의 속성값을 상속받습니다. 2021. 8. 9. CSS flex-box 의 부모 속성 align-items 📌 Flex-Box : Flex Container 나는 부모 속성 🏁 align-items: stretch / flex-start / flex-end / center / baseline ❗ item들이 한 줄일 경우 ! align-items 속성을 사용한다. 왜냐 ?? flex-wrap을 통해 2줄 이상일 경우에는 align-content속성이 우선시된다. --> align-items를 사용하려면 align-content속성을 기본값(stretch)로 설정하거나 아예 사용하지 않아야한다. --> 그래서, justify-content와 align-items의 조합을 많이 사용하는 게 아닌가 싶다 --> justify-content로 flex-line 정리하고, align-items로 item들 라인 정리하.. 2021. 8. 8. CSS flex-box 의 부모 속성 justify-content & align-content 📌 Flex-Box? 말 그대로 어어엄청 힙한 아이 부모요소에 꼭 flex-box를 넣어줘야 자식요소들이 flex속성을 활용할 수 있다 helloflex abc helloflex 📌 Flex-Box : Flex Container 나는 부모 속성 🏁 display: flex .container { display: flex; } item들이 가진 내용물의 width만큼 너비를 차지한 채, inline요소들처럼 다닥다닥붙는다. 여기서 container에 height을 설정해주면 item들도 부모 높이 따라서 좌라락 예쁘게 놓여진다. 🏁 display: inline-flex .container { display: inline-flex; } flex가 div처럼 화면 한 줄을 잡고 촤라락이라면 inline-fle.. 2021. 8. 7. CSS padding /* 네 면 모두 적용 */ padding: 1em; /* 상하 | 좌우 */ padding: 5% 10%; /* 상 | 좌우 | 하 */ padding: 1em 2em 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 -> 시계 방향 */ padding: 5px 1em 0 2em; /* 전역 값 */ padding: inherit; padding: initial; padding: unset; 2021. 7. 28. CSS box-sizing: content-box와 border-box의 차이 📌 CSS 기본 박스 모델 Content-box 크기에만 width와 height가 적용된다. (Padding X, Border X, Margin X) 따라서 원하는 크기의 박스를 그리려면, Padding 값이나 Border 값을 고려해야한다. ^아오 귀찮아^ 🏁 그래서 등장한 box-sizing! 솔직히 우리, Parent container안에 있는 Child container들 ... Parent가 정한 영역에서 빠져나오지 않았으면 하는 것들이 대부분이잖아 ... ◾ box-sizing: content-box CSS 기본 박스 모델을 따른다 ! 에라 모르겠고 ! 난 그냥 Content에만 width, height 줄거야 ! Padding, Border 나몰라라~ 100px width를 설정하게 되면 .. 2021. 7. 27. 자바스크립트 문자열 String 📌 String 생성자 함수 const strObj = new String(); console.log(strObj); // String{length: 0, [[PrimitiveValue]]: ""} // [[PrimitiveValue]]는 [[StringData]] 내부 슬롯이다 ❗ String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면, [ [ StringData ] ] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. String 래퍼 객체 === 유사 배열 객체 const strObj = new String('Lee'); console.log(strObj); // String{0:"L", 1:"e", 2:"e", length: 3, [[PrimitiveVal.. 2021. 7. 24. 자바스크립트 제어문 Control flow statement Achivement Goals 🏁 조건문 ✅ truthy와 falsy 가 조건문에서 작동하는 방식을 이해할 수 있다. ✅ 비교연산자를 통한 엄격한 비교(=== , !==)에 대해 이해할 수 있다. ✅ if 와 else if , else를 이해하고 무리없이 활용할 수 있다. ✅ 논리연산자를 (&&, ||, ! ...)을 통해 복잡한 조건을 간결하게 작성할 수 있다. 🏁 반복문 ✅ 반복문을 활용하여 단순한 기능을 반복하여 수행할 수 있다. ✅ for문과 문자열, 숫자를 이용해 반복적으로 코드를 실행시킬 수 있다. ✅ 기본적인 for문 (for (let i = 0; i < 5; i++))을 응용하여 다양한 for문을 만들 수 있다. ✅ for와 while의 차이에 대해서 설명할 수 있다. ✅ 반복문에 조건문을.. 2021. 7. 23. 자바스크립트 함수 Function Achievement Goals ✅ 함수가 "작은 기능의 단위"라는 것을 이해할 수 있다. ✅ 함수 선언을 위해 필요한 keyword, name, parameter, body에 대해 이해할 수 있다. ✅ 함수 선언과 호출의 기초적인 작동 원리를 이해할 수 있다. ✅ 함수가 선언되어 함수 표현식이 변수에 담기는 과정을 설명할 수 있다. ✅ 함수의 결과값이 변수에 할당되어 담기는 과정을 설명할 수 있다. ✅ 함수의 호출과 리턴에 대해서 이해하고, 실제 코드로 작성하여 활용할 수 있다. ✅ 함수 그 자체(func)와, 함수의 호출(func())를 구분하여 사용할 수 있다. ✅ 매개변수(parameter)와 전달인자(argument)를 구분하여 사용할 수 있다. ✅ 같은 기능을 하는 함수를 선언식, 표현식, 화.. 2021. 7. 22. 이전 1 ··· 4 5 6 7 8 다음
