[TIL] 240626

CSS 선택자 

 

전체 선택자 

- universal selector

- html을 포함한 HTML 문서 내의 모든 요소를 선택. * 를 사용

 

 

타입(유형) 선택자(태그 선택자, 요소 선택자)

- type selector

- 특정 태그를 선택 

 

 

아이디 선택자(#)

- id selector

- HTML 페이지 내에 id는 유일해야 한다

- HTML 안에서 한 번만 사용되기 때문에 재사용성은 떨어진다 

- 아이디 속성은 JavaScript 또는 해시 링크와 함께 사용되는 경우가 많다. 

 

 

클래스 선택자(.)

 

- class selector

- 아이디 선택자와 다르게 한 페이지에 여러 개가 존재할 수 있다. 

- 재사용성이 높다. 

 

특성 선택자([ ] )

 

- 주어진 특성을 가진 모든 요소를 선택

 

 

그룹 선택자(,)

 

 

복합 선택자 

 

자손(하위) 선택자 

 

 

가상 클래스 선택자 

 

:enabled, :disabled

- 활성화/비활성화 상태일 때

 

:read-only, :read-wirte

- 사용자가 편집할 수 있는/없는 상태일 때 

 

:checked

- input checkbox radio 유형일 때 선택된 상태를 나타낸다. 

 

:required

- 필수입력값일 경우 

 

::placeholder

- 입력에 대한 추가 정보가 있을 경우 

 

CSS Box Model

 

- HTML 요소를 감싸는 상자

- 요소, 패딩, 테두리, 마진으로 구성되어 있다.

요소	텍스트, 사진 등을 보여줄 대상
패딩	요소 주변 영역을 감쌈
테두리	요소와 패딩을 감싸는 테두리
마진	테두리 밖의 영역을 감쌈

 

 

 

- CSS box model은 블록박스에 적용된다. 인라인 박스는 박스 모델에 정의된 일부 동작만 사용한다. 

- inline 요소는 width, height, 상하 margin 값이 적용되지 않는다. 

 

width

- 요소의 너비를 설정

- 기본값은 콘텐츠 영역의 너비이지만 box-sizing 속성을 사용하여 테두리 영역의 너비를 설정

- auto : 기본값, 브라우저가 계산하여 지정(요소의 부모 크기 기준으로 가득 채우기) 

 

 

height 

- 요소의 높이를 설정

- auto : 기본값, 브라우저가 계산하여 지정(요소의 자식 기준으로 조절)

 

padding

- 단축 속성

- top - right - bottom - left 순으로 작성 

 

 

Display 속성 

 

- 박스의 유형을 결정

- 박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃을 설정

-