첫 번째 CSS: 페이지에 색상이 지정돼.

CSS 언어를 만나보고 웹사이트가 1995년의 모습이 아닌 것을 지켜보세요.

보여줄게: CSS가 무엇인지

HTML은 페이지의 뼈대야. CSS는 색상, 글꼴, 크기, 간격 등의 옷야. 별도의 파일로 작성되었으며 다음과 같어.

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

다음과 같이 큰 소리로 읽어 보세요.h1제목을 진한 파란색으로 지정해. 모든p단락을 18픽셀로 하고 어두운 회색으로 만듭니다.”

모든 규칙은 세 부분으로 구성돼.

선택기(h1) – 규칙이 적용되는 대상,
속성(color) – 무엇을 바꾸려고 하는지,
값(darkblue) – 무엇으로 바꿀 것인가.

콜론은 속성과 값을 구분하며 모든 줄은 세미콜론으로 끝납니다. 세미콜론을 조심해. 잊혀진 세미콜론은 세계에서 가장 흔한 CSS 실수야.

연결하기: CSS에 대해 페이지에 알리기

네 내부`my-website`폴더에 **라는 새 파일을 만듭니다.`style.css`**.

이 줄을 안에 추가하해.``HTML 페이지의 **모든** 하나:

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

“이 페이지의 모양은 style.css 파일에서 찾을 수 있어.”

작동하는지 테스트해. 놓칠 수 없는 것을 넣으세요.`style.css`:

body {
  background-color: yellow;
}

저장하고 페이지를 새로 고치세요. 전부 노란색인가요? 작동 중이에요! (이제 노란색을 삭제해도 돼.)

## CSS의 색상

색상을 영어단어(red,darkblue,lightgray,tomato,gold…) 또는 보다 정확하게는 해시 기호로 시작하는 코드로 표시돼.#1d4ed8파란색이고,#16a34a녹색야. htmlcolorcodes.com에서 원하는 색상 코드를 조합해 보세요.

네 차례 💪

네 웹 사이트를 첫 번째 색상으로 꾸미해. ~ 안에style.css, 설정:

전체 페이지의 배경색(body),
제목 색상(h1, h2),
문단의 크기와 색상(p).

솔루션 - 물론 색상을 자유롭게 조정할 수 있어.

🏫 학교 웹사이트 – 솔루션

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

파란색은 학교 웹사이트에 잘 어울립니다. 신뢰도가 있다고 느껴집니다. (이것이 은행에서도 파란색을 사용하는 이유야!)

🙋 개인 웹사이트 – 솔루션

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

개인 웹사이트는 더 대담할 수 있어. 따뜻한 오렌지색은 “이 곳은 살아있어”라고 말해.

🌍 여행 일지 - 솔루션

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

숲이나 초원과 같은 녹색 – 여행 일지에 딱 맞어.

⚽ 클럽 웹사이트 – 솔루션

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

가장 좋은 선택은 클럽 색상야. 빨간색으로 플레이하시겠습니까? 그럼 빨간색이에요!

⚠️

**가독성 규칙:** 밝은 배경에 어두운 텍스트(또는 그 반대). 흰색 바탕에 연한 노란색은 읽을 수 없어. 확실하지 않을 때는 누군가에게 "이 글을 편안하게 읽을 수 있나요?"라고 물어보세요.

✅

**직접 확인해:** 네 웹사이트에는 고유한 색상이 있어. 그리고 CSS가 모든 페이지에 연결된 하나의 파일에 있기 때문에 모든 페이지에 한 번에 색상이 적용돼. 꽤 영리해요, 그렇죠?

이번 수업에서 배울 점

CSS = 모양. 로 쓰여 있어요style.css파일, 연결된<link>태그 인<head>.
규칙:selector { property: value; }– 세미콜론도 잊지 마세요.
하나의 CSS 파일로 전체 웹사이트를 한 번에 장식할 수 있어.