✨ CSS 속성 정리

이번 포스팅에서는 자주 사용되는 CSS 속성들을 정리해뒀습니다!

---

📋 CSS 텍스트 관련 속성

텍스트를 다루는 다양한 속성을 알아볼까요?

1. color: 텍스트의 색상을 지정합니다.
   • 예시: color: blue; (텍스트가 파란색으로 표시됩니다) 🔵
2. font-size: 텍스트의 크기를 지정합니다.
   • 예시: font-size: 16px; (텍스트 크기를 16픽셀로 설정) 📏
3. font-weight: 텍스트의 굵기를 지정합니다.
   • 예시: font-weight: bold; (굵은 텍스트로 표시) 🅱️
4. font-style: 텍스트의 스타일을 설정합니다. (기본, 이탤릭, 기울임꼴 등)
   • 예시: font-style: italic; (기울임꼴로 표시) 📐
5. text-align: 텍스트의 정렬을 설정합니다.
   • 예시: text-align: center; (텍스트를 중앙에 정렬) 🎯
6. text-decoration: 텍스트 장식을 설정합니다. (밑줄, 취소선 등)
   • 예시: text-decoration: underline; (밑줄을 추가) 📊
7. line-height: 텍스트 줄 간격을 설정합니다.
   • 예시: line-height: 1.5; (줄 간격을 1.5배로 설정) 📏
8. letter-spacing: 글자 간격을 지정합니다.
   • 예시: letter-spacing: 2px; (글자 사이의 간격을 2픽셀로 설정) ↔️

 

🎨 CSS 배경 관련 속성

웹 페이지의 배경을 다채롭게 꾸미는 속성들입니다!

1. background-color: 요소의 배경색을 설정합니다.
   • 예시: background-color: lightyellow; (연한 노란색 배경) 🟨
2. background-image: 요소에 배경 이미지를 추가합니다.
   • 예시: background-image: url('background.png'); (이미지 파일을 배경으로 사용) 🌄
3. background-repeat: 배경 이미지를 반복하는 방법을 지정합니다.
   • 예시: background-repeat: no-repeat; (이미지를 반복하지 않음) 🚫
4. background-size: 배경 이미지의 크기를 지정합니다.
   • 예시: background-size: cover; (배경 이미지가 요소를 완전히 덮도록 조정) 📐
5. background-position: 배경 이미지의 위치를 지정합니다.
   • 예시: background-position: center center; (배경 이미지를 중앙에 배치) 🎯

 

📦 CSS 박스 모델 관련 속성

모든 HTML 요소는 "박스"로 간주되며, 이 박스를 다루는 속성들이 있습니다.

1. width: 요소의 너비를 지정합니다.
   • 예시: width: 300px; (너비를 300픽셀로 설정) ↔️
2. height: 요소의 높이를 지정합니다.
   • 예시: height: 150px; (높이를 150픽셀로 설정) ↕️
3. margin: 요소의 외부 여백을 설정합니다.
   • 예시: margin: 20px; (모든 방향에 20픽셀 여백을 추가) 🧊
4. padding: 요소의 내부 여백을 설정합니다.
   • 예시: padding: 10px; (모든 방향에 10픽셀 패딩 추가) 🧩
5. border: 요소의 테두리를 설정합니다.
   • 예시: border: 2px solid black; (검은색의 2픽셀 실선 테두리) 🚧
6. box-shadow: 요소에 그림자를 추가합니다.
   • 예시: box-shadow: 2px 2px 5px gray; (회색 그림자를 추가) 🌫️

 

📍 CSS 레이아웃 관련 속성

웹 페이지의 레이아웃을 구성할 때 사용하는 속성들입니다.

1. display: 요소의 박스 타입을 설정합니다.
   • 예시: display: flex; (플렉스 컨테이너로 설정) 📦
2. position: 요소의 위치를 설정합니다.
   • 예시: position: absolute; (부모 요소를 기준으로 절대 위치) 📍
3. top, right, bottom, left: position 속성과 함께 요소의 위치를 조정합니다.
   • 예시: top: 50px; (위에서부터 50픽셀 떨어진 위치) 🕹️
4. float: 요소를 왼쪽 또는 오른쪽으로 떠 있게 합니다.
   • 예시: float: left; (요소를 왼쪽으로 배치) ⬅️
5. clear: float된 요소의 영향을 제거합니다.
   • 예시: clear: both; (왼쪽과 오른쪽 모두의 플로팅을 제거) 🚫

 

🔍 CSS 기타 유용한 속성들

다양한 스타일링을 돕는 추가적인 속성들입니다!

1. opacity: 요소의 투명도를 설정합니다.
   • 예시: opacity: 0.5; (50% 투명도) 🕶️
2. z-index: 요소의 쌓임 순서를 설정합니다.
   • 예시: z-index: 10; (다른 요소 위에 쌓임) 📑
3. overflow: 요소 내용이 넘칠 때 어떻게 처리할지 결정합니다.
   • 예시: overflow: hidden; (넘친 내용을 숨김) 🚧
4. cursor: 마우스 커서 모양을 변경합니다.
   • 예시: cursor: pointer; (커서를 클릭할 수 있는 손가락 모양으로 변경) 👆