속성

1. 위치

• 상대위치

상위 요소의 레이아웃 방향에 따라 가로 또는 세로로 배치하고, 자기 자신을 기준으로 상단, 오른쪽, 하단, 왼쪽의 값에 따라 오프셋(상대 위치)을 적용합니다

• 절대위치

상위 요소를 기준으로 상단, 오른쪽, 하단, 왼쪽의 값에 따라 위치를 적용합니다

• 고정위치

뷰포트(화면 영역)를 기준으로 상단, 오른쪽, 하단, 왼쪽의 값에 따라 위치를 적용합니다

• 스티키

스크롤 되는 요소가 설정된 상단, 오른쪽, 하단, 왼쪽의 값에 도달할 때 고정된 위치가 적용됩니다.

2. 크기

• 너비

요소의 가로 크기

• 높이

요소의 세로 크기

• 최소 너비

요소의 최소 너비입니다. 너비가 최소 너비보다 작은 경우 최소 너비로 지정됩니다.

• 최소 높이

요소의 최소 높이입니다. 높이가 최소 높이보다 작은 경우 최소 높이로 지정됩니다.

• 최대 너비

요소의 최대 너비입니다. 너비가 최대 너비보다 큰 경우 최대 너비로 지정됩니다.

• 최대 높이

요소의 최대 높이입니다. 너비가 최대 높이보다 큰 경우 최대 높이로 지정됩니다.

단위)

PX: 픽셀 크기

%: 백분율

VW: 뷰포트(화면영역) 너비

VH: 뷰포트(화면영역) 높이

AUTO: 요소의 크기를 하위 요소들의 크기와 여백을 계산해 자동으로 지정합니다.

3. 레이아웃

• 방향

하위 요소의 가로 또는 세로로 배치할 방향입니다.

• 정렬

하위 요소의 가로 정렬 방식입니다.

• 세로 정렬

하위 요소의 세로 정렬 방식입니다.

• 간격

하위 요소들의 간격입니다.

• 자동 줄 바꿈

하위 요소들의 간격입니다.

• 여백

요소의 안쪽 여백 입니다.

• 외부 여백

요소의 외부 여백 입니다.

• 쌓임 순서

요소들의 쌓이는 순서 입니다.

4. 배경

• 배경 색상

요소의 배경 색상을 지정합니다.

• 배경 이미지

요소의 배경 이미지를 지정합니다.

• 그라데이션

요소의 그라데이션을 지정합니다.

5. 스타일

보이기, 불투명도, 둥근 모서리, 테두리 등 요소의 모양 및 형태와 관련된 속성들로 구성되어 있습니다.

• 보이기

요소의 가시성(보이기, 숨기기) 지정합니다.

• 불투명도

요소의 불투명도를 지정합니다.

• 둥근 모서리

요소의 둥근 모서리를 지정합니다.

• 테두리

요소의 테두리 색상, 두께, 스타일을 지정합니다.

• 그림자

요소의 그림자 효과를 지정합니다.

• 변형

요소의 회전, 스케일, 이동, 기울이기를 지정합니다.

• 오버플로우

요소의 콘텐츠가 너무 커서 공간이 모자라 넘치는 콘텐츠를 어떻게 보여줄지를 제어합니다.