CSS 규칙과 스타일-내용 분리

HTML 태그 안에 style="color: red;"처럼 직접 스타일을 박아 넣을 수도 있지만, 이렇게 하면 태그마다 스타일이 흩어져서 나중에 색 하나 바꾸려 해도 페이지 전체를 뒤져야 합니다. 그래서 CSS는 내용(HTML)과 스타일(CSS)을 분리하는 걸 기본 원칙으로 삼습니다. 코드가 나뉘어 있으면 고치기도 편하고, 따로 저장하고 공유하기도 좋습니다.

CSS 규칙 = 선택자 + 선언

h3 {
  color: #ffffff;
}

• h3 : 선택자(selector) - "어떤 요소에 적용할지"
• color: #ffffff; : 선언(declaration) - "어떤 스타일을 적용할지"

선언은 항상 속성: 값; 형태로, 콜론과 세미콜론이 짝을 이룹니다.

스타일을 어디에 둘까

처음엔 HTML 문서 안에 <style> 태그를 두고 그 안에 CSS를 쓰는 게 편합니다. 하지만 코드가 많아지면 별도의 파일(예: style.css)로 분리하는 게 일반적입니다. 파일 이름이 꼭 style.css일 필요는 없습니다.

<link rel="stylesheet" href="style.css" />

<style> 태그 안에 있던 내용을 이 파일로 옮기고, HTML에서는 <link> 태그로 불러오기만 하면 됩니다. 저장하고 새로고침하면 스타일이 그대로 적용됩니다.

TIP: 개발자 도구로 확인하기

크롬 개발자 도구에서 요소를 선택하면 Styles 탭에 그 요소에 적용된 모든 CSS 규칙이 나옵니다. 선택자 위에 마우스를 올리면 화면에서 어떤 요소가 선택되는지도 바로 확인할 수 있습니다. CSS를 공부할 때 감으로만 짐작하지 말고, 항상 개발자 도구로 실제 적용 상태를 확인하는 습관을 들이면 좋습니다.

참고: 개인 Notion 학습 노트