display 속성
박스의 유형을 지정하여 다른 박스들과 어떤 방식으로 배치할지 레이아웃 설정
주의) CSS 속성으로 시각적인 부분이 바뀔 뿐, 태그 자체의 요소가 블록 레벨로 바뀐 것은 아님
block : 요소 전후에 줄 바꿈을 생성
inline : 요소 전후에 줄 바꿈을 생성하지 않는 인라인 요소 상자를 생성.
inline-block : inline 줄 바꿈 없이 한 줄에 놓이지만, block 처럼 box-model의 width, height, margin, padding 값을 모두 설정 가능
flex : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 단방향으로 설정
grid : 내부 자식 요소들의 위치를 부모 컨테이너 요소 안에서 x, y축 모두 이용해 설정
none : 접근성 트리에서 요소가 제거. 해당 요소 및 하위 요소가 사라지고 스크린리더에도 읽히지 않음.
ex) display: block; display: inline; display: inline-block;
단위
절대 길이 단위 : px (cm, mm, in, pc, pt ...)
상대 길이 단위 : %, vw, vh (vmin, vmax, em, rem ...)
px
pixel (picture + element)
절대 길이 단위
디바이스 화면에서 이미지를 표현하는 가장 작은 단위
고정된 값이라 직관적으로 쉽게 사용
%
부모 요소를 기준으로 하는 백분율 단위
em
부모 요소로부터 상속받은 요소의 글자 크기를 기준으로하는 배수 단위
ex) 부모요소가 10px라면 2em = 20px
rem
root em
최상의 요소 (<html>) 의 글자 크기를 기준으로 하는 배수 단위
<html>의 기본 폰트 사이즈는 16px
vw, vh
뷰포트(화면) 넓이(w), 높이(h)를 기준으로 하는 백분율 단위
1vw = 화면넓이의 1%
'HTML&CSS > CSS' 카테고리의 다른 글
| CSS(7) form 관련 가상 선택자 (0) | 2023.08.20 |
|---|---|
| CSS(6) Box Model (0) | 2023.08.20 |
| CSS(4) 선택자 우선순위 (0) | 2023.08.19 |
| CSS(3) 선택자 (0) | 2023.08.19 |
| CSS(2) 상속 (0) | 2023.08.19 |