[html, css] 선택자, 박스 모델

선택자

구조적 가상 클래스 선택자

 

 

UI 요소 상태 가상 클래스 선택자

 

 

 

 

조합 선택자

css에서 선택자는 아래(후손)와 오른쪽(이후 형제)만 선택할 수 있다.

위(조상)나 왼쪽(이전 형제)로 가지 못함

 

 

 

 

 

박스 모델

박스 속성

content: 실제 내용

padding: 컨텐츠와 테두리 사이의 여백

border: 테두리 두께

― ― ― ― ― ― ― ―↑자기 영역

margin: 테두리 밖의 여백

 

margin값 적용 위치 순서: 시계방향(↑→↓←)

 

 

 

border-style

 

border-radius

테두리 모서리 둥글게 설정

적용 순서: (시계방향)왼쪽 위 - 오른쪽 위 - 오른쪽 아래 - 왼쪽 아래

 

 

 

 

 

 

레이아웃 속성★

position

position: static;

(디폴트)웹 문서의 흐름에 따라 배치

position: relative;

①원래 위치에서 상대적으로 움직임. 이동시 top, left 사용

②absolute의 기준이 되는 경우 top, left 없음

position: absolute;

부모 relative를 기준으로 top, right, bottom, left의 속성을 이용하여 배치

position: fixed;

창 스크롤을 움직여도 사라지지 않고 위치 고정