프론트 작업을 하다 보니 중앙 정렬하는 기능을 자주 사용하게 됐다. 가운데에 요소들을 배치하는 것이 깔끔하고 안정적인 느낌을 주었다. 중앙 정렬 기능들을 정리해보자.
Flexbox로 중앙 정렬
세로/가로 모두 중앙 정렬
.container {
display: flex;
justify-content: center; /* 가로 중앙 정렬 */
align-items: center; /* 세로 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 */
}- justify-content: center;는 가로 방향으로 중앙 정렬
- align-items: center;는 세로 방향으로 중앙 정렬
단일 축에서만 중앙 정렬
- 가로 중앙 정렬 : justify-content: center;
- 세로 중앙 정렬 : align-items: center;
Grid로 중앙 정렬
가로/세로 모두 중앙 정렬
.container {
display: grid;
place-items: center; /* 가로, 세로 중앙 정렬 */
height: 100vh; /* 화면 전체 높이 */
}- place-items: center;는 justify-items: center;와 align-items: center;의 결합으로, 가로와 세로 모두 중앙 정렬
position: absolute와 transform을 이용한 중앙 정렬
가로/세로 모두 중앙 정렬
.container {
position: relative;
height: 100vh;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* 자기 크기 기준으로 중앙 정렬 */
}- position: absolute로 부모에 대해 절대 위치를 설정하고, top: 50%와 left: 50%로 부모 요소의 중앙으로 위치시킨다. 이후 transform: translate(-50%, -50%)을 사용하여 요소가 정확히 중앙에 배치되도록 한다.
text-align: center를 이용한 가로 중앙 정렬
가로 중앙 정렬 (텍스트나 인라인 요소에 사용)
.container {
text-align: center; /* 가로 중앙 정렬 */
}- text-align: center;는 가로 방향으로 텍스트나 인라인 요소들을 중앙에 배치한다.
margin: auto를 이용한 중앙 정렬
가로/세로 중앙 정렬 (특정 크기 요소에 사용)
.container {
display: block;
height: 100vh;
}
.element {
width: 200px;
height: 200px;
margin: auto; /* 상하좌우 중앙 정렬 */
}- margin: auto;는 block 요소에 적용되어, 가로/세로 모두 중앙으로 정렬된다. (단, 부모 컨테이너에 충분한 크기가 필요함)
line-height를 이용한 텍스트 세로 중앙 정렬
세로 텍스트 중앙 정렬 (단일 행 텍스트)
.container {
height: 100vh;
line-height: 100vh; /* 세로 중앙 정렬 */
text-align: center; /* 가로 중앙 정렬 */
}- line-height를 부모 컨테이너의 높이와 같게 설정하여 텍스트를 세로로 중앙 정렬할 수 있다.
vertical-align을 이용한 중앙 정렬
세로 중앙 정렬 (인라인/인라인-블록 요소)
.container {
height: 100vh;
display: flex;
align-items: center;
}
.element {
display: inline-block;
vertical-align: middle; /* 세로 중앙 정렬 */
}- vertical-align: middle;는 인라인 또는 인라인-블록 요소들을 세로로 중앙 정렬할 때 사용된다.
flexbox를 활용한 요소에 대한 중앙 정렬
특정 자식 요소만 세로/가로로 중앙 정렬
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.element {
margin-top: auto;
margin-bottom: auto; /* 요소만 세로로 중앙 정렬 */
}- margin-top: auto;와 margin-bottom: auto;는 자식 요소가 세로로 중앙 정렬되도록 만듭니다. 이 방법은 flexbox의 성질을 활용한 방식이다.
이번에는 선에 관한 것들을 알아보자. 선을 그어야 하는 경우도 종종 있었는데, 다양한 종류의 선을 활용했다.
border
목적 : 요소의 경계를 설정한다.
구성 : border : [두께] [선 종류] [색상]
예시
.box {
border: 2px solid black; /* 2px 두께의 검정색 실선 */
}- border-width: 선의 두께 설정
- border-style: 선의 종류 설정 (실선, 점선, 대시선 등)
- border-color: 선의 색상 설정
.box {
border-width: 5px;
border-style: dashed;
border-color: blue;
}- border-top, border-right, border-bottom, border-left: 각 방향별로 경계선 설정
- 예시
.box {
border-top: 3px solid red;
border-bottom: 3px dotted blue;
}border-radius
목적 : 요소의 경계선 모서리를 둥글게 만드는 속성이다.
예시
.box {
border: 2px solid black;
border-radius: 10px; /* 10px 반지름의 둥근 모서리 */
}- border-radius는 4개의 값을 가질 수 있으며, 각각 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리의 둥근 정도를 설정할 수 있다.
.box {
border-radius: 10px 20px 30px 40px;
}outline
목적 : 요소의 외부에 테두리처럼 보이는 선을 추가합니다. border와 비슷하지만, outline은 요소의 크기를 변경하지 않는다.
구성 : outline: [두께] [선 종류] [색상]
예시
.box {
outline: 3px solid red; /* 3px 두께의 빨간 외곽선 */
}- outline-offset: 외곽선의 위치를 조정할 수 있습니다. 기본값은 0px다.
- 예시
.box {
outline: 3px dashed green;
outline-offset: 10px;
}box-shadow
목적 : 요소에 그림자 효과를 추가하는 속성입니다. 선처럼 보일 수 있지만 사실 그림자다.
구성 : box-shadow : [가로거리] [세로거리] [블러거리] [확산거리] [색상]
예시
.box {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5); /* 5px 가로, 5px 세로, 10px 블러, 반투명 검정 그림자 */
}- inset: 그림자를 안쪽으로 표시
.box {
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}text-decoration
목적 : 텍스트에 선을 추가하는 속성입니다. 주로 밑줄, 취소선 등을 만드는데 사용된다.
구성 : text-decoration: [선 종류]
예시
.text {
text-decoration: underline; /* 텍스트에 밑줄 */
}- underline : 밑줄
- line-through : 취소선
- overline : 위쪽 선
- none : 선을 제거
.text {
text-decoration: line-through; /* 텍스트에 취소선 */
}- text-decoration-color: 선의 색상을 지정
.text {
text-decoration: underline;
text-decoration-color: red; /* 빨간색 밑줄 */
}border-image
목적 : 이미지를 경계선으로 사용하는 속성이다.
구성 : border-image : [이미지 경로] [너비] [슬라이싱] [평균]
예시
.box {
border: 10px solid transparent;
border-image: url('border-image.png') 30 stretch;
}- border-image-source: 이미지를 설정
- border-image-slice: 이미지를 잘라내는 부분을 설정
- border-image-repeat: 이미지를 반복할지 설정
- border-image-width: 이미지를 적용할 경계선의 두께
hr (수평선)
목적 : 페이지에서 구분선을 만드는 태그로, hr 요소를 사용하여 수평선을 추가할 수 있다.
예시
hr {
border: none;
border-top: 2px solid #ccc; /* 2px 두께의 회색 수평선 */
}- border-top: 수평선의 두께와 색상 설정
clip-path
목적: 요소의 경계를 잘라내거나 모양을 만들 때 사용됩니다. 선처럼 보이는 모양을 만들 수 있다.
예시
.box {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 삼각형 모양의 클리핑 */
}background-image
목적 : 배경에 이미지를 추가하는 속성입니다. linear-gradient, radial-gradient 등을 이용해 선 모양을 만들 수 있다.
예시
.box {
background-image: linear-gradient(to right, red, yellow); /* 빨강에서 노랑으로 가는 그라디언트 선 */
}
CSS에 대해 자세히 배울 시간이 그동안 없었는데, 이번에 프론트 작업을 하면서 CSS에 대해 많이 알게 되었다. 오늘 블로그에 정리한 기능들을 모두 사용하거나 외우지는 못하겠지만, 다양한 CSS 기능들이 있고, 원하는 스타일이 있을 때 찾아보면서 적용할 수 있다는 것을 배웠다.