CSS 기본 속성 용어 정리편

HTML 태그를 통해 웹페이지의 ‘뼈대’를 만들었다면, 이번에는 그 위를 꾸며주는 ‘옷’, 즉 CSS(Cascading Style Sheets)를 다룹니다. CSS는 글자 크기, 색상, 여백, 정렬, 배경 등 시각적인 요소를 조절하는 언어입니다.

 

🔹 텍스트 관련 속성
color : 글자 색상을 지정합니다.
예시 → color: #333; (짙은 회색)
→ HEX 코드, RGB, 색상명(red, blue 등) 모두 사용 가능.

font-size : 글자 크기를 지정합니다.
예시 → font-size: 16px;

font-weight : 글자의 굵기를 지정합니다.
예시 → font-weight: bold; (굵게), font-weight: 400; (보통)

font-family : 글꼴을 지정합니다.
예시 → font-family: 'Noto Sans', sans-serif;

font-style : 글자의 스타일(기울임 등)을 지정합니다.
예시 → font-style: italic;

text-align : 문단 정렬 방식을 지정합니다.
예시 → text-align: center; (가운데 정렬)
옵션: left / right / center / justify(양쪽 정렬)

text-decoration : 밑줄, 취소선 등을 설정합니다.
예시 → text-decoration: underline; (밑줄)

line-height : 줄 간격을 조절합니다.
예시 → line-height: 1.6; 또는 line-height: 24px;

 

---

 

🔹 여백 관련 속성
margin : 요소의 바깥 여백을 설정합니다.
예시 → margin: 20px;
상·우·하·좌 순서로 지정 가능 → margin: 10px 20px 30px 40px;

padding : 요소의 안쪽 여백(내용과 테두리 사이 간격)을 설정합니다.
예시 → padding: 10px;

border : 테두리를 설정합니다.
예시 → border: 1px solid #000;
(두께, 스타일, 색상 순서)

border-radius : 모서리를 둥글게 만듭니다.
예시 → border-radius: 10px;

 

---

 

🔹 크기 및 배치 관련 속성
width : 요소의 가로 너비
예시 → width: 200px; 또는 width: 50%;

height : 요소의 세로 높이
예시 → height: 150px;

display : 요소의 표시 방식(레이아웃)을 결정합니다.
예시 →
display: block; → 한 줄 전체 차지
display: inline; → 줄 안에 배치
display: flex; → 유연한 레이아웃 배치

position : 요소의 위치 지정 방식
예시 →
position: static; (기본값)
position: relative; (상대 위치)
position: absolute; (부모 기준 고정)
position: fixed; (화면 고정)

top, left, right, bottom :
position 속성과 함께 사용하여 위치를 조정합니다.
예시 → position: absolute; top: 10px; left: 20px;

 

---

 

🔹 배경 관련 속성
background-color : 배경색 지정
예시 → background-color: #f5f5f5;

background-image : 배경 이미지 삽입
예시 → background-image: url('bg.jpg');

background-size : 배경 이미지 크기 조절
예시 → background-size: cover; (화면에 꽉 차게)

background-repeat : 이미지 반복 여부 설정
예시 → background-repeat: no-repeat;

 

---

 

🔹 정렬 및 배치 보조 속성
float : 요소를 왼쪽이나 오른쪽으로 띄웁니다.
예시 → float: left;

clear : float 해제 시 사용합니다.
예시 → clear: both;

text-indent : 문단 첫 줄 들여쓰기
예시 → text-indent: 2em;

vertical-align : 세로 정렬 지정
예시 → vertical-align: middle;

 

---

 

🔹 박스 그림자 / 투명도
box-shadow : 요소에 그림자를 추가합니다.
예시 → box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

opacity : 투명도 설정
예시 → opacity: 0.8; (1은 불투명, 0은 완전 투명)

 

---

💬 정리하며
HTML이 구조(Structure)를 담당한다면, CSS는 디자인(Style)을 담당합니다. 이번 편을 통해 자주 쓰이는 속성의 기본 원리를 익혀두면 전자책 스타일 수정이나 웹디자인 작업이 훨씬 쉬워집니다.