5일차: HTML 속성 및 스타일링

개발/HTML

5일차: HTML 속성 및 스타일링

꿈꾸는법사 2025. 1. 31. 08:36

이번 시간에는 HTML에서 사용하는 다양한 속성과 스타일링 방법에 대해 배워보겠습니다. HTML과 CSS의 관계를 이해하고, HTML 요소에 스타일을 적용하는 방법을 실습해 보겠습니다.

HTML 속성 이해

HTML에서 태그에 다양한 속성을 추가하여 더 많은 정보를 제공하고, 태그의 기능을 확장할 수 있습니다. 가장 기본적인 속성으로는 id, class, style이 있습니다.

id 속성
id 속성은 각 HTML 요소에 고유한 식별자를 부여할 때 사용됩니다. 하나의 페이지에서 id 값은 고유해야 하므로, 같은 id 값을 가진 요소는 두 개 이상 존재할 수 없습니다. id는 스타일링뿐만 아니라 자바스크립트에서 특정 요소를 선택하는 데도 유용합니다.
```
<h1 id="main-title">나의 첫 번째 웹 페이지</h1>
```
위의 예시에서 id="main-title"로 설정된 h1 태그는 고유한 식별자로 사용할 수 있습니다.
class 속성
class 속성은 여러 개의 HTML 요소에 같은 스타일을 적용할 때 사용됩니다. 하나의 class 값은 여러 태그에 재사용할 수 있어 효율적입니다.
```
<h1 class="title">제목 1</h1>
<p class="title">이것은 제목 스타일을 공유하는 문장입니다.</p>
```
이 예시에서는 class="title"을 사용하여 여러 태그에 같은 스타일을 적용할 수 있습니다.
style 속성
style 속성은 HTML 태그에 직접적으로 CSS 스타일을 적용할 때 사용됩니다. 태그에 바로 스타일을 적용하므로, 간단한 스타일을 추가할 때 유용합니다.
```
<h1 style="color: red; font-size: 24px;">빨간색 제목</h1>
```
위 코드에서는 style 속성을 사용해 제목의 색상과 폰트 크기를 직접 지정합니다. 하지만 스타일이 많아지면 외부 스타일 시트를 사용하는 것이 더 효율적입니다.

CSS 기본 개념 소개

HTML과 CSS (Cascading Style Sheets) 는 웹 페이지를 구성하는 두 가지 주요 기술입니다. HTML은 웹 페이지의 구조를 정의하고, CSS는 그 구조에 스타일을 입히는 역할을 합니다. CSS는 HTML 태그의 외관을 변경하는 데 사용되며, 주로 텍스트 색상, 배경색, 폰트 스타일, 레이아웃 등을 조정하는 데 활용됩니다.

HTML: 웹 페이지의 콘텐츠와 구조를 정의합니다. (예: 텍스트, 이미지, 링크 등)
CSS: HTML 요소의 스타일을 정의합니다. (예: 텍스트 색상, 폰트, 여백, 크기 등)

내부 스타일 적용

웹 페이지에서 CSS를 적용하는 방법에는 여러 가지가 있습니다. 그중 내부 스타일링은 HTML 문서 내에서 <style> 태그를 사용하여 CSS를 작성하는 방법입니다. 이 방법은 문서 내에서만 적용되며, 다른 페이지에서는 사용할 수 없습니다.

<style> 태그 사용법
<style> 태그는 HTML 문서의 <head> 태그 내에 위치하며, 내부에서 CSS 스타일을 정의할 수 있습니다.

<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>내부 스타일 예제</title>
    <style>
      h1 {
        color: blue;
        text-align: center;
      }
      p {
        font-size: 18px;
        color: green;
      }
    </style>
  </head>
  <body>
    <h1>내부 스타일 적용 예제</h1>
    <p>이 텍스트는 내부 스타일을 적용받았습니다.</p>
  </body>
</html>

위 예제에서는 <style> 태그 내에서 h1 태그와 p 태그의 스타일을 정의했습니다. h1 태그는 파란색으로, p 태그는 초록색으로 설정되었습니다.

스타일 속성 실습

이제 CSS 스타일 속성을 활용하여 텍스트 색상, 배경 색상, 폰트 크기를 변경하는 방법을 실습해보겠습니다.

텍스트 색상 변경
color 속성은 텍스트의 색상을 변경하는 데 사용됩니다.
```
<style>
  p {
    color: red; /* 텍스트 색상을 빨간색으로 설정 */
  }
</style>
```

배경 색상 변경
background-color 속성은 요소의 배경 색상을 변경합니다.

<style>
  body {
    background-color: lightblue; /* 페이지의 배경 색상을 연한 파란색으로 설정 */
  }
</style>

폰트 크기 변경
font-size 속성은 텍스트의 폰트 크기를 설정합니다.

<style>
  h1 {
    font-size: 36px; /* 폰트 크기를 36px로 설정 */
  }
</style>

스타일을 결합하여 적용
여러 스타일을 결합하여 한 요소에 다양한 스타일을 적용할 수 있습니다.
```
<style>
  p {
    color: white;
    background-color: black;
    font-size: 20px;
    padding: 10px;
  }
</style>
```
위의 코드에서는 <p> 태그의 텍스트 색상을 하얀색으로, 배경 색상을 검은색으로, 폰트 크기를 20px로, 여백을 10px로 설정한 예시입니다.

실습: 텍스트 색상, 배경 색상, 폰트 크기 변경

아래 코드를 사용하여 텍스트 색상, 배경 색상, 폰트 크기를 변경하는 실습을 해보세요.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스타일 적용 실습</title>
    <style>
      body {
        background-color: #f0f0f0; /* 배경 색상 설정 */
        font-family: Arial, sans-serif; /* 폰트 설정 */
      }
      h1 {
        color: #333; /* 텍스트 색상 */
        font-size: 36px; /* 폰트 크기 */
        text-align: center; /* 텍스트 가운데 정렬 */
      }
      p {
        color: #555; /* 텍스트 색상 */
        font-size: 18px; /* 폰트 크기 */
        background-color: #fff; /* 배경 색상 */
        padding: 10px; /* 여백 추가 */
        border-radius: 5px; /* 모서리 둥글게 만들기 */
      }
    </style>
  </head>
  <body>
    <h1>스타일 적용 실습</h1>
    <p>이 문장은 텍스트 색상, 배경 색상, 폰트 크기 등이 적용된 예시입니다.</p>
  </body>
</html>

위의 예시에서는 웹 페이지에 스타일을 적용하여 텍스트 색상, 배경 색상, 폰트 크기 등을 설정했습니다. body의 배경 색상, h1의 텍스트 색상과 크기, p의 스타일을 변경하여 전체적인 레이아웃을 꾸몄습니다.

결론

오늘은 HTML 속성과 CSS 스타일링에 대해 배웠습니다. 속성을 사용하여 HTML 요소를 구체적으로 정의하고, CSS를 사용해 웹 페이지의 스타일을 꾸미는 방법을 익혔습니다. id, class, style 속성을 사용하여 요소에 스타일을 적용하고, <style> 태그를 통해 내부 스타일링을 실습해 보았습니다. CSS를 활용하여 텍스트 색상, 배경 색상, 폰트 크기 등을 변경할 수 있음을 이해하고, 다양한 스타일 속성을 결합하여 웹 페이지를 꾸미는 방법을 배웠습니다.

저작자표시