핵심 요약
CSS를 왜 사용할까?
HTML(내용)과 CSS(디자인)를 분리해서 코드를 깔끔하게 관리하기 위해
PC, 태블릿, 스마트폰 등 다양한 기기 화면에 맞춰 탄력적으로 변하는 '반응형 웹'을 만들기 위해
스타일 적용 우선순위
요소에 직접 적는 방식이 가장 힘이 세다
(인라인 > 내부 스타일 > 외부 스타일)
실무 팁
우선순위가 높다고 인라인을 남발하면 나중에 수정하기 너무 힘들다
실무에서는 유지보수를 위해 코드를 완전히 분리하는 '외부 스타일 시트' 방식을 가장 많이 쓴다
상세 학습 내용
CSS(스타일)를 HTML 문서에 적용하는 방법은 크게 3가지가 있으며, 각각의 우선순위와 특징이 다르다
인라인 스타일 (Inline Style) - 우선순위 1위
HTML 태그 안에 style 속성을 사용해 직접 디자인을 입력하는 방식이다.
우선순위가 가장 높지만, 코드가 길어지고 유지보수가 힘들어 실무에서는 꼭 필요한 경우에만 제한적으로 쓴다.
<p style="color: blue;">껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
내부 스타일 시트 (Internal Style) - 우선순위 2위
HTML 문서의 <head> 태그 안에 <style> 태그를 열고 그 안에 CSS 코드를 작성하는 방식이다.
해당 HTML 문서 안에서만 스타일이 적용된다.
<style>
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
</style>
외부 스타일 시트 (External Style) - 우선순위 3위 (실무 원픽!)
CSS 코드를 아예 별도의 파일(.css)로 저장해 두고, HTML 문서에서 링크(<link>)로 불러와서 쓰는 방식이다.
웹 문서의 내용과 디자인을 완벽하게 분리할 수 있어서 관리가 매우 편하다. 실제 프로젝트에서 가장 많이 쓰이는 방식!
/* style.css 파일로 따로 저장 */
h1 {
padding: 10px;
background-color: #222;
color: #fff;
}
'코딩 > CSS' 카테고리의 다른 글
| [TIL] CSS: 패딩(Padding), 디스플레이(display), 플롯(float) 및 포지션 제어 (1) | 2026.03.19 |
|---|---|
| [TIL] CSS: 리스트, 테이블, 박스 모델과 마진/보더 정리 (2) | 2026.03.18 |
| [TIL] CSS : 아이콘 폰트와 텍스트 제어 및 컬러 속성 (2) | 2026.03.17 |
| [TIL] CSS: 실무에 쓰이는 웹 폰트 적용법과 트래픽 최적화 전략 (1) | 2026.03.16 |
| [TIL] CSS 기초 정리 : 선택자, 적용 방식, 그리고 우선순위 규칙 (1) | 2026.03.13 |