📚 자주 쓰는 CSS 속성 정리
CSS를 사용하다보면 자주 쓰는 CSS 속성들이 생긴다. 이런 경우 매번 구글링을 통해 해결하기 보다는 내가 사용법을 어느정도 숙지하고 있을 때, 훨씬 더 빠르고 간편하게 문제를 해결 가능하다. 추가로, 타인의 코드를 관찰할 때도 도움이 된다.
이번 글을 통해 자주 쓰는 CSS 속성을 정리하고, 이에 대해 숙지해보자.
자주 쓰는 CSS 속성
📌 배경(Background)
1. 배경 이미지 설정 (background-image) - 배경 이미지 넣기
background-image: url(...) 문법을 사용해 배경 이미지를 적용한다.
다양한 이미지를 배경으로 설정할 수 있으며, 이미지들은 순서대로 겹쳐진다
background-image: url('flowers.png'); /* 단일 이미지 설정 */
background-image:
url('a.png'), /* 제일 위에 보이는 이미지 */
url('b.png'), /* 그 아래에 위치 */
url('c.png'); /* 맨 밑에 위치 */
2. 배경의 위치 설정 (background-position) - 배경 위치 조정
background-position: 배경 이미지의 위치를 조절한다.
기본값은 left top이며, 다양한 위치 값을 설정할 수 있다.
background-position: top; /* 위 */
background-position: right; /* 오른쪽 */
background-position: bottom; /* 아래 */
background-position: left; /* 왼쪽 */
background-position: left top; /* 왼쪽 위 (기본값) */
background-position: center; /* 가운데 정렬 */
3. 배경 반복 설정 (background-repeat)- 배경 반복 여부
background-repeat: 배경 이미지의 반복 여부를 설정한다.
기본값은 repeat이며, no-repeat을 사용해 반복하지 않도록 설정할 수 있다.
background-repeat: repeat; /* 반복하기 (기본값) */
background-repeat: no-repeat; /* 반복 안 함 */4. 배경의 크기 조절 (background-size)- 배경 크기 설정
background-size: 배경 이미지의 크기를 직접 지정하거나, cover와 contain을 사용해 조절할 수 있다.
background-size: cover; /* 비율 유지하며 꽉 차게 */
background-size: contain; /* 비율 유지하며 최대한 크게 */
background-size: 40px 30px; /* 가로 40px, 세로 30px */
📌 그라디언트 설정 (linear-gradient())
그라디언트 효과
linear-gradient(): 시작 색상에서 종료 색상으로의 부드러운 전환 효과를 생성한다. 각도를 설정하여 방향을 조절할 수 있다.
background-image: linear-gradient(#000000, #ffffff); /* 기본 180도 그라디언트 */
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)); /* 45도 각도 그라디언트 */
📌 그림자 효과 (box-shadow)
박스 그림자
box-shadow: 요소에 그림자 효과를 추가한다. 가로 위치, 세로 위치, 흐린 정도, 퍼지는 정도, 색상을 순서대로 설정한다.
box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6); /* 그림자 설정 예시 */
📌 불투명도 조절 (opacity)
요소의 불투명도
opacity: 요소의 불투명도를 설정한다. 0(완전 투명)부터 1(완전 불투명) 사이의 값을 사용한다.
opacity: 0; /* 완전 투명 */
opacity: 0.6; /* 부분 투명 */
opacity: 1; /* 완전 불투명 */
📌 테두리 설정 (border)
1. 테두리 속성 (border)
border: 요소의 테두리를 설정한다. 이 속성을 통해 테두리의 굵기, 스타일, 색상을 지정할 수 있다.
border: 1px solid black; /* 굵기 1px, 실선, 검은색 테두리 */
border: 2px dashed red; /* 굵기 2px, 파선, 빨간색 테두리 */
border: 3px dotted blue; /* 굵기 3px, 점선, 파란색 테두리 */
2. 모서리 둥글게 만들기 (border-radius)
border-radius: 요소의 모서리를 둥글게 만든다. 모서리의 둥근 정도를 픽셀(px)이나 백분율(%)로 지정할 수 있다.
단위가 '%'로 설정되는 경우에는 모서리와 만나는 가로, 세로 변의 길이의 비율로 처리한다.
border-radius: 10px; /* 모든 모서리를 10px만큼 둥글게 */
border-radius: 50%; /* 원형 모양으로 만들기 */
📌 박스 사이즈 설정 (box-sizing)
1. 기본 박스 모델: content-box
기본적으로 요소에 지정된 width와 height는 콘텐트 영역만을 가리킨다. padding과 border는 이 크기에 추가된다.
아래 예제에서 #box 요소의 실제 너비는 100px (콘텐트) + 30px (패딩 왼쪽) + 30px (패딩 오른쪽) = 160px이 된다.
#box {
margin: 20px;
padding: 30px;
width: 100px;
}
2. box-sizing: border-box
box-sizing 속성의 border-box 값을 사용하면 요소의 padding과 border까지 포함하여 width와 height가 계산된다. 이를 통해 테두리까지 모두 합친 영역의 크기를 지정 가능하다.
아래 예제를 통해 살펴보면, box-sizing: border-box;를 적용하여 #box 요소의 전체 너비는 100px으로 고정되며, padding과 border는 이 너비 내에서 공간을 차지하게 된다.
#box {
margin: 20px;
padding: 30px;
width: 100px; /* 테두리와 패딩을 포함한 전체 크기가 100px */
box-sizing: border-box;
}
cf> box-sizing: border-box 전역 설정
box-sizing: border-box; 를 쓰는 것이 너무 편하다보니, 요즘은 일반적으로 모든 요소에다가 이걸 추가하는 추세이다.
따라서, 전역 선택자를 통해 모든 요소에 box-sizing을 적용하여 일관된 박스 모델을 유지하는 습관을 들이자.
* {
box-sizing: border-box;
}📌 Overflow 처리 (overflow)
CSS에서 overflow 속성은 요소 내부의 콘텐츠가 해당 요소의 크기를 넘어갈 때 어떻게 처리할지 결정한다. 이를 통해 콘텐츠가 넘쳐 흐를 때의 동작을 제어하여, 콘텐츠의 표시 방식을 조정할 수 있다.
1. 넘치는 콘텐츠 숨기기 (overflow: hidden)
overflow: hidden; 속성은 넘치는 콘텐츠를 숨긴다. 이를 통해 콘텐츠가 요소의 경계를 넘어서는 것을 방지할 수 있다.
overflow: hidden;2. 넘치면 스크롤 생성 (overflow: auto)
overflow: auto; 속성은 콘텐츠가 넘치면 스크롤바를 생성한다. 이를 통해 콘텐츠가 요소 크기 내에 맞지 않을 때 사용자가 스크롤을 통해 전체 콘텐츠를 볼 수 있게 한다.
overflow: auto; /* (넘치는 방향으로) 가로 or 세로 or 가로+세로 스크롤바 생성 */
overflow-x: auto; /*가로 스크롤바 생성 */
overflow-y: auto; /*세로 스크롤바 생성 */
3. 항상 스크롤 표시 (overflow: scroll)
overflow: scroll; 속성은 요소에 항상 스크롤바를 표시한다. 이 옵션은 콘텐츠의 크기에 관계없이 항상 스크롤바가 보이도록 한다.
overflow: scroll;
Outro
자주 사용되는 CSS 속성, 숙지가 필요한 CSS 속성에 대해서는 앞으로 본 게시글에 하나씩 추가하며 학습해 나가고자 한다.
