HTML
- 웹 개발 구조, 문서의 틀을 만드는 언어
- 태그 내부에 내용이 없다면 닫는 태크 없을 수 있음
- checkbox -> 여러 개 선택 가능/radio -> 둘중 하나, 셋 중 하나 선택
- HTML 속성은 attribute name 과 attribute value 로 구성
- header,main,nav,aside,footer 태그는 div 태그와 똑같이 작용함. 시맨틱 태그라고 하며 콘텐츠 영역을 논리적으로 구분하기 위한 용도
CSS
-
프로토타입(prototype) -> 기술 구현의 타당성과 UI/UX 와 고객 경험적인 측면도 미리 검증하기 위해 어느정도 작동이 되게 만든 소프트웨어
-
block,inline,inline-block
- block -> 줄 바꿈 가능, 100% 기본 너비, width height 사용 가능
- inline-block -> 줄 바꿈 되지 않음, 글자가 차지하는만큼 너비, width
height 사용 가능 - inline -> 줄 바꿈됨, 글자가 차지하는만큼 너비, width height 사용 불가
-
box-sizing
- box-sizing : content-box -> default 값으로 width 설정 시 오롯이 컨텐츠 사이즈를 말함.
- box-sizing : border-box -> width:100px 으로 설정 시 컨텐츠 너비와 여백,테두리 사이즈를 포함하여 100px을 말함.
selector
-
*selector: HTML의 모든 태그, 모든 영역에 적용하겠다는 의미
-
querySelector()
-
textContent
-
a,b selector: a 와 b 갖고 있는 엘리먼트 선택,다중 선택 -
a b selector(후손 셀렉터) : 자식,자손,후손 element 다 선택 -
a > b selector(자식 셀렉터): 직계 자식 엘리먼트를 선택함. 한 단계 아래 있는 엘리먼트만 선택
-
a ~ b selector(형제 셀렉터) : a 요소의 형제 selector 모두 선택
-
a + b selector(인접 형제 셀렉터) : a 요소의 형제 요소 중 첫 번째 b 요소를 선택 -
.class:hover: 마우스 커서 올릴 떄 -
input:focus: input 창 선택할 때 -
input:required: input 창이 필수 입력 요소일 때 -
input:checked: checkbox가 선택되면 -
input:disabled: input창이 disabled일 때 -
.class:first-child: 형제 중에 첫번째 -
.class:last-child: 형제 중에 마지막 -
.class:nth-child(2n-1): 형제 중 홀수번째 -
.class:nth-last-child(n): 형제 중 뒤에서 n번째 -
.class:only-child: 외동만 해당 -
.class:first-of-type: 같은 타입, 같은 항렬 중 첫번째 -
.class:last-of-type: 같은 타입, 같은 항렬 중 마지막 -
.class:not(): ()만 빼고 -
[id='id`]: id='id'인 속성 -
[class='class']: class가 center인 속성 -
flexbox
-
와이어 프레임 -> 단순 도형을 이용하여 제품의 인터페이스를 시각적으로 묘사
