[CSS] 속성 다루기
![[CSS] 속성 다루기](/assets/img/web/css/logo.png){kind=logo}
CSS의 속성을 살펴봅시다.
- 1. line-height
- 2. position: static
- 3. position: relative
- 4. position: absolute
- 5. position: fixed
- 6. z-index
- 7. display: flex
- 8. flex-direction
- 9. flex-wrap
- 10. justify-content
- 11. align-items
- 12. align-content
CSS에서 자주 사용하거나 유용하다고 생각하는 속성들을 정리해봅시다.
1. line-height
line-height는 텍스트 한 줄의 높이를 설정할 때 사용하는 속성입니다.
위 그림과 같이 line-height를 div박스의 height와 동일하게 설정한 결과 텍스트가 div의 가운데에 위치하게 되었습니다.
line-height의 값을 조절해 텍스트 뿐만 아닌 박스와 같은 요소들도 세로 가운데 정렬할 때 사용할 수 있습니다.
2. position: static
position이란 요소의 위치를 지정할 때 사용하는 속성입니다.
위치를 지정하는 방식으로 static, relative, absolute, fixed가 존재합니다.
static은 position 속성을 지정하지 않을 때 기본적으로 적용되는 속성입니다. 평소에 위치 요소를 지정하지 않을 때 기본적으로 적용되던 속성입니다.
위 그림과 같이 item1은 position 속성을 지정하지 않았습니다. 따라서 기존의 위치에 배치된 모습입니다.
3. position: relative
relative는 상대 위치 지정 방식으로 요소를 자신을 기준으로 위치시킵니다.
item2는 position의 값으로 relative를 받은 뒤 top 30px, left 50px을 부여받았습니다. 기존에 item2가 기존의 위치에서 왼쪽에서 50px, 위쪽에서 30px 떨어진 곳에 배치된 것을 확인할 수 있습니다.
4. position: absolute
absolute는 절대 위치 지정 방식으로 요소를 부모 요소 기준으로 위치시킵니다.
item3은 position의 값으로 absolute를 받은 뒤 bottom 100px, right 30px을 부여받았습니다. 부모 div 요소에서 오른쪽에서 50px, 아래쪽에서 100px 떨어진 곳에 배치된 것을 확인할 수 있습니다.
absolute 값을 부여받은 요소는 block 속성으로 변경됩니다.
5. position: fixed
fixed는 고정 위치 지정 방식으로 요소를 뷰포트 기준으로 위치시킵니다.
item4는 position의 값으로 fixed를 받은 뒤 right 100px, top 100px을 부여받았습니다. 뷰포트를 기준으로 오른쪽에서 100px, 위쪽에서 100px 떨어진 곳에 배치된 것을 확인할 수 있으며 스크롤을 내려 뷰포트를 이동하더라도 item4의 경우는 움직이지 않고 뷰포트 내에서 계속 보이게 됩니다.
fixed 값을 부여받은 요소는 block 속성으로 변경됩니다.
6. z-index
z-index란 요소들이 동일한 위치에 여러개 존재할 경우 어떤 요소를 맨 위로 보이게 하는가를 정하는 속성입니다.
z-index를 지정하지 않을 경우 나중에 등장한 요소가 자연스럽게 맨 위로 보이게 되지만 위 그림과 같이 z-index를 지정한 경우 처음 등장한 요소가 맨 위로 보이는 것을 확인할 수 있습니다.
z-index의 경우 큰 값을 가진 요소가 맨 위로 보이게 됩니다.
7. display: flex
html에서 별도의 설정 없이 블록 요소들을 작성할 경우 수직으로 쌓이는 것을 확인해왔습니다.
요소들을 수직으로 쌓는 것이 아닌 수평으로 쌓고 싶을 경우 display 속성을 flex로 하여 수평으로 쌓을 수 있습니다.
위 그림을 살펴보면 div들이 담겨진 부모 div의 속성을 flex로 지정하였고 div들이 수직으로 쌓이는 것이 아닌 수평으로 쌓이는 것을 확인할 수 있습니다.
8. flex-direction
flex-direction이란 요소들이 쌓이는 기준점과 방향을 변경할 때 사용하는 속성입니다.
flex-direction은 기본 값으로 row를 가지며 row-reverse, column, column-reverse 값 등을 가질 수 있습니다.
각각 값들의 결과는 위의 그림과 같습니다.
9. flex-wrap
flex-wrap이란 요소들의 줄 바꿈 여부를 결정할 때 사용하는 속성입니다.
사용하지 않을 경우 요소들의 줄이 바뀌지 않지만 flex-wrap 속성의 값을 wrap으로 지정할 경우 컨테이너의 길이를 넘어갈 경우 개행됩니다.
위 그림의 경우 flex-wrap 속성을 사용하지 않았을 땐 한 줄에 8개의 div가 길이가 바뀐 채로 들어가는 모습이지만 flex-wrap 속성의 값을 wrap으로 지정한 경우 5개의 div 후 개행된 것을 확인할 수 있습니다.
10. justify-content
justify-content란 요소들을 주 축의 기준으로 정렬할 때 사용하는 속성입니다.
가로를 기준으로 정렬할 때 사용하며 값으로 center, space-evenly, space-between을 가집니다.
각각의 속성의 결과는 위의 그림과 같습니다.
11. align-items
align-items란 요소들을 교차 축의 기준으로 정렬할 때 사용하는 속성입니다.
세로를 기준으로 정렬할 때 사용하며 요소들이 개행되어 여러 줄을 가질 경우 각 줄에 맞게 정렬합니다. 값으로 flex-start, flex-end, center 등을 가집니다.
위 그림을 살펴보면 개행된 두 줄의 div들이 컨테이너의 절반만큼 공간을 차지하고 각 공간에 맞게 상단 정렬, 하단 정렬, 중앙 정렬이 된 것을 확인할 수 있습니다.
12. align-content
align-content란 요소들을 교차 축의 여러 줄 기준으로 정렬할 때 사용하는 속성입니다.
align-items를 사용할 땐 각 줄이 차지하는 공간을 기준으로 세로 정렬하였지만 align-content를 사용할 경우 전체 컨테이너 기준으로 각 줄을 정렬하는 것을 확인할 수 있습니다.
