들어가며
HTML이 웹의 뼈대라면, **CSS(Cascading Style Sheets)**는 그 뼈대에 색을 입히고 형태를 잡아주는 기술입니다.
CSS를 이용하면 텍스트의 색상, 위치, 레이아웃, 애니메이션 등 시각적인 요소를 자유롭게 조정할 수 있습니다.
이 글에서는 📂 language / css 카테고리의 시작점으로서, CSS의 역할과 기본 문법, 적용 방식, 실무에서 주의할 점들을 소개합니다.
CSS란?
CSS는 웹 문서의 스타일을 정의하는 스타일시트 언어입니다.
HTML 요소의 표시 방법(색상, 크기, 간격 등)을 지정하여 웹페이지의 시각적 표현을 담당합니다.
- 구조(HTML)와 스타일(CSS)을 분리해 유지보수성과 재사용성을 높임
- 웹 접근성과 반응형 디자인 구현에 핵심 역할
CSS의 적용 방식
CSS는 크게 세 가지 방식으로 HTML에 적용할 수 있습니다:
방식설명예시
| 인라인 스타일 | HTML 태그에 직접 스타일 속성 부여 | <p style="color: red;">문장</p> |
| 내부 스타일시트 | <style> 태그 안에 정의 | <style>p { color: blue; }</style> |
| 외부 스타일시트 | .css 파일로 분리 후 링크 | <link rel="stylesheet" href="style.css"> |
실무에서는 외부 스타일시트를 사용하는 방식이 가장 일반적입니다.
CSS 기본 문법
선택자 {
속성: 값;
속성: 값;
}예시:
h1 {
color: navy;
font-size: 24px;
margin-bottom: 16px;
}| 용어 | 설명 |
| 선택자 | 어떤 요소에 스타일을 적용할지 지정 (h1, .class, #id) |
| 속성 | 변경하고자 하는 스타일 속성 (color, margin, font-size) |
| 값 | 속성에 부여할 스타일 값 (red, 16px, center) |
CSS에서 자주 사용하는 스타일 속성
| 속성 | 설명 |
| color, background-color | 텍스트 및 배경 색상 지정 |
| margin, padding | 요소의 외부/내부 여백 조절 |
| font-size, font-family | 글꼴 크기와 종류 지정 |
| display, position | 레이아웃 구성 방식 제어 |
| border, box-shadow | 테두리와 그림자 효과 |
| flex, grid | 레이아웃을 정렬하고 배치하는 최신 기법 |
CSS는 단독으로는 사용되지 않습니다
CSS는 HTML 구조 위에 스타일을 입히고,
JavaScript와 결합되어 동적인 웹 UI를 완성합니다.
| 기술 | 역할 |
| HTML | 구조 (Structure) |
| CSS | 스타일 (Style) |
| JavaScript | 동작/로직 (Behavior) |
HTML과 CSS는 마치 뼈대와 피부처럼, 항상 함께 사용됩니다.
앞으로 다룰 CSS 시리즈
📂 language / css 카테고리에서는 다음과 같은 내용을 다룰 예정입니다:
- 선택자와 상속, 우선순위(CSS Specificity)
- 박스 모델(Box Model) 완전 정복
- Flexbox와 Grid 레이아웃 마스터하기
- 반응형 디자인과 미디어쿼리
- SCSS/SASS 등 CSS 전처리기 소개
- CSS 모듈화 및 BEM 네이밍 규칙
CSS는 단순히 꾸미기 기술이 아니라, 웹을 사용자 친화적으로 표현하는 핵심 언어입니다.
지금부터 시각적 표현의 기초를 함께 다져나가 봅시다!
📌 다음 글 미리보기
👉 선택자와 상속, 우선순위(CSS Specificity)
📚 CSS 시리즈 전체 보기
👉 https://jobreview.tistory.com/category/language/css
댓글