연습 - CSS를 사용하여 HTML 스타일 지정 - Training

10분

CSS(Cascading Style Sheet)를 사용하여 페이지의 모양을 지정할 수 있습니다. 기본적인 개념은 HTML 페이지 내에서 사용하는 요소에 대한 스타일을 정의하는 것입니다. HTML 요소는 콘텐츠를 정의하지만 CSS 스타일은 이 콘텐츠의 모양을 정의합니다.

예를 들어, 둥근 모서리를 적용하거나 요소에 그라데이션 배경을 제공할 수 있습니다. 또는 CSS를 사용하여 하이퍼링크가 상호 작용할 때 어떻게 보이고 반응하는지 지정할 수 있습니다. 정교한 페이지 레이아웃과 애니메이션 효과를 수행할 수도 있습니다.

특정 요소, 특정 유형의 모든 요소에 스타일을 적용하거나 클래스를 사용하여 다양한 요소에 스타일을 지정할 수 있습니다.

이 연습에서는 HTML 페이지 요소에 CSS 스타일을 적용하고 일부 CSS 코드를 추가하여 밝은 테마와 어두운 테마를 정의합니다. 그런 다음, 브라우저의 개발자 도구에서 결과를 확인합니다.

외부 CSS

HTML에 대한 이전 단원에서는 HTML에서 외부 CSS 파일에 연결했습니다.

...
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Task Timeline</title>
  <link rel="stylesheet" href="main.css">
...

외부 CSS의 한 가지 이점은 여러 HTML 페이지가 동일한 CSS 파일에 연결될 수 있다는 것입니다. CSS를 변경하면 각 페이지에 대한 스타일 지정이 업데이트됩니다. 페이지 콘텐츠에 HTML 파일을 사용하고, 스타일 지정에 CSS 파일을 사용하고, 상호 작용에 JavaScript 파일을 사용하는 것을 관심사 분리라고 합니다.

앞서 설명한 것처럼 내부 CSS라고 하는 CSS를 HTML에서 직접 작성할 수도 있습니다. 기본 웹 사이트일지라도 HTML 페이지를 빠르게 어지럽힐 수 있는 CSS 규칙이 상당히 많이 있습니다. 하나 이상의 페이지에서 동일한 CSS가 자주 반복되어 관리하기가 어렵습니다.

CSS 규칙

CSS 규칙은 HTML 요소에 스타일을 적용하는 방법입니다. CSS 규칙에는 스타일이 적용되어야 하는 하나 이상의 요소를 표시하는 데 사용하는 선택기가 있습니다.

Visual Studio Code에서 main.css 파일을 열고 다음을 입력합니다.

body {
    font-family: monospace;
}

ul {
    font-family: helvetica;
}

이 코드 조각에는 두 가지 규칙이 포함됩니다. 각 규칙에는 다음이 포함됩니다.

선택기. body 및 ul은 두 규칙의 선택기이며 스타일이 적용되는 요소를 선택하는 데 사용됩니다.
여는 중괄호({).
선택한 요소의 모양을 결정하는 스타일 선언 목록.
닫는 중괄호(}).

예를 들어, ul 선택기는 페이지에서 <ul> HTML 요소를 선택하여 스타일을 적용합니다. ‘선언’은 font-family: helvetica이며 어떤 스타일이어야 하는지 결정합니다. 속성 이름은 font-family이고 값은 helvetica입니다.

다음에 살펴보겠지만 요소에 사용자 지정 이름을 정의할 수 있습니다.

선택기

ID 및 클래스 선택기를 사용하면 HTML의 사용자 지정 특성 이름에 스타일을 적용할 수 있습니다. ID는 한 요소의 스타일을 지정하는 데 사용되지만, 클래스는 여러 요소의 스타일을 지정하는 데 사용될 수 있습니다.

다음 코드를 복사하여 CSS 파일에 추가합니다. 이전에 추가한 ul 선택기에 대해 닫기 중괄호 뒤에 붙여넣습니다.
```
li {
  list-style: circle;
}

.list {
  list-style: square;
}

#msg {
  font-family: monospace;
}
```
앞의 코드에는 세 개의 CSS 규칙이 포함되며, 마지막 두 규칙은 사용자 지정 특성을 사용하여 .list 및 #msg 요소를 선택합니다.
- .list는 클래스 선택기입니다. list(으)로 설정된 class 특성이 포함된 각 HTML 요소는 이 선택기 내에 정의된 스타일을 가져옵니다.
- #msg는 ID 선택기입니다. msg(으)로 설정된 id 특성이 있는 HTML 요소는 이 선택기 내에 정의된 스타일을 가져옵니다.
선택기에 사용하는 이름은 HTML에서 정의한 이름과 일치하는 한 임의로 지정할 수 있습니다.
Ctrl+S(Windows) 또는 Command+S(macOS)를 선택하여 작업을 저장합니다.

브라우저에서 보기

Visual Studio Code를 사용하여 미리 보려면 파일 이름 index.html을(를) 마우스 오른쪽 단추로 클릭한 다음, 기본 브라우저에서 열기를 선택합니다.

Important

main.css 파일을 편집하고 있었더라도 변경 내용을 미리 보려면 index.html 파일을 선택해야 합니다.

웹 페이지가 기본 브라우저에서 열립니다.

글꼴 스타일이 예상한 스타일인가요? <body> 요소에 적용된 스타일이 <h1> 요소에 상속되는 방식은 흥미롭습니다. <h1>에 대해 아무것도 정의하지 않았지만 여전히 <body>에 정의된 글꼴을 가져왔습니다. 부모 요소에서 해당 하위 항목으로 상속 메커니즘은 CSS의 주요 측면 중 하나입니다. 하지만 <li> 요소의 글꼴은 다릅니다. <li> 요소의 스타일은 <body>에 대한 스타일 세트를 재정의하는데, 이는 <li> 요소가 스타일이 정의된 <ul> 요소의 하위 항목이기 때문입니다.

Visual Studio Code에서 기본 브라우저에서 열기를 사용하면 매번 브라우저에서 새 탭이 열립니다. 새 탭을 열지 않게 하려면 대신 웹 사이트가 이미 포함된 탭을 다시 로드하면 됩니다.

탭을 다시 로드하려면 새로 고침 바로 가기 키인 F5 키를 누르거나, Windows 또는 Linux에서 Ctrl+R을 누르고 Mac에서 Command+R을 누릅니다.

밝은 테마 추가

다음으로, 웹 사이트에 대한 색 테마 지원을 추가합니다. 먼저 16진수 색 코드를 사용하여 밝은 색 테마를 정의합니다.

CSS 파일(main.css)에서 다음 코드를 파일 끝에 추가합니다.
```
.light-theme {
  color: #000000;
  background: #00FF00;
}
```
이 예제에서 #000000은 글꼴 색에 검은색을 지정하고 #00FF00은 배경색에 녹색을 지정합니다.
HTML 파일(index.html)에서 <body> 요소를 클래스 이름 light-theme(으)로 업데이트합니다. 이제 밝은 테마의 클래스 선택기가 스타일을 올바르게 적용합니다.
```
<body class="light-theme">
```

브라우저에서 보기

Visual Studio Code를 사용하여 미리 보려면 index.html을 마우스 오른쪽 단추로 클릭한 다음, 기본 브라우저에서 열기를 선택하거나 F5 키를 눌러 이전 탭을 다시 로드합니다.

녹색 배경을 사용하는 밝은 테마가 표시됩니다.

적용된 CSS 보기

브라우저 보기에서 개발자 도구를 엽니다.

페이지에서 마우스 오른쪽 단추를 클릭하여 검사를 선택하거나, 바로 가기 F12 키 또는 Ctrl+Shift+I를 선택합니다.
요소 탭을 선택하고 요소 탭 내에서 스타일 탭을 선택합니다(기본적으로 이미 선택되어 있어야 함).
다양한 HTML 요소를 마우스로 가리키고, 몇 가지 요소를 선택하면 개발자 도구가 요소에 적용되는 스타일을 스타일 탭에 어떻게 표시하는지 알 수 있습니다.
<body> 요소를 선택합니다. light-theme가 적용된 것을 알 수 있습니다.
순서가 지정되지 않은 목록 <ul> 요소를 선택합니다. 사용자 지정 스타일 font-family: helvetica;가 <body> 요소의 스타일을 재정의한 것을 알 수 있습니다.

개발자 도구에서 CSS 스타일을 보는 방법에 대한 자세한 내용은 CSS 보기 및 변경 시작 문서를 확인하세요.

어두운 테마 추가

어두운 테마의 경우 다음 단원에 대한 준비로 인프라를 설정합니다. 다음 단원에서는 웹 페이지에서 테마 전환을 사용합니다.

어두운 테마에 대한 지원을 CSS에 추가하려면 다음 단계를 사용합니다.

CSS 파일(main.css)에서 파일 시작 부분의 페이지 루트에 몇 가지 상수를 추가합니다.
```
:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}
```
:root 선택기는 HTML 페이지의 <html> 요소를 나타냅니다. 이 종류의 작업에서는 :root 선택기를 사용하여 CSS 규칙에서 전역 CSS 변수 세트를 정의하는 것이 좋습니다. 이 예제에서는 세 가지 색 변수를 정의했습니다. 이제 다른 CSS 규칙에서도 이러한 변수를 사용할 수 있습니다.
CSS 파일의 끝에서 light-theme 규칙을 다음 코드로 바꿔서 업데이트하고 dark-theme 선택기를 추가합니다.
```
.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}
.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}
```
위의 코드에서는 배경 및 글꼴 색을 지정하는 새 변수 bg 및 fontColor를 정의했습니다. 이러한 변수는 var 키워드를 사용하여 해당 속성 값을 :root 선택기에서 이전에 지정한 변수로 설정합니다.
그런 다음, CSS 파일에서 현재 body 선택기를 다음 코드로 바꿉니다.
```
body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}
```
이 예제에서는 body 선택기를 사용하여 background 및 color 속성을 설정하며, 웹 페이지에 표시되는 요소들은 모두 <body> 요소 내에 있기 때문에 <body>에 설정된 색을 상속합니다.
CSS 파일에서 #msg 및 ul 선택기가 있는 규칙을 제거하면 해당 요소도 <body>에서 동일한 글꼴을 상속합니다.

Control+S 또는 Command+S를 선택하여 파일을 저장해야 합니다.

CSS 파일(main.css)은 다음 예제와 같이 보이게 됩니다.

:root {
  --green: #00FF00;
  --white: #FFFFFF;
  --black: #000000;
}

body {
  background: var(--bg);
  color: var(--fontColor);
  font-family: helvetica;
}

li {
  list-style: circle;
}

.list {
  list-style: square;
}

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
}

어두운 테마를 보려면 index.html 파일을 열고 <body> 클래스 특성의 기본 테마를 어두운 테마(dark-theme)로 편집합니다. 파일을 저장한 다음 브라우저에서 페이지를 다시 로드합니다.
<body> 클래스 특성을 편집하여 기본값을 밝은 테마로 다시 전환합니다.

다음 단원에서는 JavaScript를 사용하여 대화형 작업을 제공하고 테마 전환을 지원합니다.

계속

연습 - CSS를 사용하여 HTML 스타일 지정

외부 CSS

CSS 규칙

선택기

브라우저에서 보기

밝은 테마 추가

브라우저에서 보기

적용된 CSS 보기

어두운 테마 추가

피드백