CSS란 — 선택자와 기본 문법
HTML만으로 만든 페이지는 흰 배경에 검은 글씨가 전부다. 구조는 있지만 디자인이 없다. CSS가 없던 시절 웹이 딱 그랬다. CSS는 그 페이지에 색, 크기, 간격, 배치를 입히는 언어다.
CSS란
CSS(Cascading Style Sheets)는 HTML 요소가 화면에 어떻게 보일지를 정의하는 스타일 언어다. HTML이 "무엇을"이라면 CSS는 "어떻게 보이게 할지"를 담당한다.
CSS 작성 방법
외부 스타일시트 (권장)
별도의 .css 파일을 만들고 HTML에서 불러온다.
<!-- HTML의 head 안에 -->
<link rel="stylesheet" href="style.css">/* style.css */
h1 {
color: blue;
font-size: 32px;
}내부 스타일
HTML 파일 내 <style> 태그 안에 작성한다.
<head>
<style>
h1 { color: blue; }
</style>
</head>인라인 스타일
태그에 직접 style 속성으로 작성한다. 특정 요소에만 일시적으로 적용할 때 쓰지만, 유지보수가 어려워 자주 쓰지 않는 게 좋다.
<h1 style="color: blue; font-size: 32px;">제목</h1>CSS 기본 문법
선택자 {
속성: 값;
속성: 값;
}p {
color: #333333;
font-size: 16px;
line-height: 1.6;
}- 선택자(Selector) — 스타일을 적용할 HTML 요소를 지정
- 속성(Property) — 어떤 스타일을 바꿀지
- 값(Value) — 속성에 설정할 내용
- 각 선언은 세미콜론(
;)으로 끝냄
선택자 종류
태그 선택자
/* 모든 p 태그에 적용 */
p {
color: gray;
}클래스 선택자
.클래스명 형식으로 쓴다. 여러 요소에 같은 클래스를 붙여 공통 스타일을 줄 수 있다.
<p class="highlight">강조된 문단</p>
<span class="highlight">강조된 텍스트</span>.highlight {
background-color: yellow;
font-weight: bold;
}ID 선택자
#아이디명 형식이다. 한 페이지에 하나의 요소에만 써야 한다.
<h1 id="main-title">메인 제목</h1>#main-title {
font-size: 40px;
color: navy;
}전체 선택자
/* 모든 요소에 적용 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}그룹 선택자
여러 선택자를 쉼표로 묶어 같은 스타일을 한 번에 적용한다.
h1, h2, h3 {
font-family: sans-serif;
color: #222;
}자손 선택자
공백으로 구분한다. 특정 요소 안에 있는 요소를 선택한다.
/* nav 안에 있는 모든 a 태그 */
nav a {
text-decoration: none;
color: white;
}
우선순위 (Specificity)
같은 요소에 여러 스타일이 겹치면 우선순위가 높은 것이 적용된다.
!important > 인라인 스타일 > ID 선택자 > 클래스 선택자 > 태그 선택자p { color: black; } /* 우선순위 낮음 */
.text { color: blue; } /* 중간 */
#intro { color: red; } /* 높음 */!important는 모든 우선순위를 무시하지만, 남발하면 스타일이 뒤엉켜 유지보수가 어려워진다. 꼭 필요한 경우에만 쓰는 것이 좋다.
CSS는 선택자로 대상을 고르고, 속성과 값으로 스타일을 지정한다. 이 구조를 이해하면 어떤 CSS 코드를 봐도 "누구에게, 어떤 스타일을 적용하는가"를 읽어낼 수 있다.
<- 개발 공부하는 나