CSS
CSS로 색과 글자 바꾸기
CSS는 선택한 HTML 요소에 스타일 규칙을 적용합니다.
이럴 때 필요해요
문서의 내용은 유지한 채 표현을 바꾸는 첫 규칙을 작성합니다.
어떻게 동작하나요?
HTML이 콘텐츠의 구조를 정한다면 CSS는 그 표현을 정합니다. h1을 선택해 색을 바꿔도 제목이라는 HTML의 역할은 유지됩니다.
CSS 규칙은 선택자와 선언으로 구성됩니다. h1 { color: navy; }에서 h1은 적용 대상이고 color는 속성, navy는 값입니다. 선언이 여러 개라면 세미콜론으로 구분합니다.
아래 규칙은 HTML의 style 요소 안에 넣어 사용할 수 있습니다. 별도 .css 파일로 작성한다면 HTML에서 link 요소로 연결해야 합니다. 먼저 한 속성만 바꿔 화면 차이를 확인하세요.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
h1 {
color: navy;
font-size: 32px;
}h1 제목의 글자색과 크기를 바꿉니다. HTML과 연결해야 효과가 있습니다.
자주 헷갈리는 포인트
- CSS만 작성하고 HTML에서 불러오지 않으면 적용되지 않습니다.
- 선언의 속성과 값 사이에는 콜론을 씁니다.
내 말로 설명해 보기
제목의 글자색만 바꾸려면 어떤 선언을 수정할까요?
생각할 단서 CSS 선언에서 속성과 값을 나누어 읽어 보세요.
예시 답변 확인
설명에 들어갈 핵심
- CSS는 선택한 HTML 요소에 스타일 규칙을 적용합니다.
- h1 제목의 글자색과 크기를 바꿉니다. HTML과 연결해야 효과가 있습니다.
예시 답변
color 선언을 수정합니다. 제목의 내용은 HTML에서, 표현은 CSS에서 바꿉니다.
문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.