HTML 문서 스타일 가이드 - 웹 디자인 초보자를 위한 CSS 튜토리얼

소개

HTML <style> 태그는 웹 페이지에 스타일을 추가하는 데 사용됩니다. 이러한 스타일은 웹사이트의 모양과 느낌을 다양한 방식으로 변경할 수 있습니다. 이 랩에서는 <style> 태그를 사용하여 웹 페이지 전체에서 사용할 수 있는 사용자 정의 스타일 시트를 만드는 방법을 배우게 됩니다.

참고: index.html에서 코딩을 연습하고 Visual Studio Code 에서 HTML 작성 방법을 배울 수 있습니다. 웹 서비스를 포트 8080 에서 실행하려면 오른쪽 하단의 'Go Live'를 클릭하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

HTML 구조 설정

먼저, 기본적인 HTML 구조를 설정해 보겠습니다. index.html 파일에서 다음 HTML 코드를 생성합니다.

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>

  <body>
    <h1>Welcome to my Webpage</h1>
    <p>This is my first paragraph.</p>
  </body>
</html>

이 코드는 제목과 단락이 있는 기본적인 웹 페이지 구조를 설정합니다.

인라인 스타일 추가

웹 페이지에 스타일을 추가하는 첫 번째 방법은 HTML 요소의 style 속성에 직접 추가하는 것입니다. 이 단계에서는 h1 헤더에 인라인 스타일을 추가합니다. h1 요소에 다음 속성을 추가합니다.

<h1 style="color: blue; font-size: 36px;">Welcome to my Webpage</h1>

이 스타일은 글꼴 크기를 늘리고 헤더 색상을 파란색으로 변경합니다.

임베디드 스타일 추가

<style> 태그는 웹 페이지에 임베디드 스타일을 추가하는 데 사용됩니다. 이 태그 내에 여러 스타일을 추가할 수 있습니다. 이 단계에서는 임베디드 스타일을 사용하여 p 요소에 스타일을 추가합니다. <head> 태그 내에 다음 코드를 추가합니다.

<style>
  p {
    color: green;
    font-size: 18px;
  }
</style>

이 스타일은 단락에 녹색 색상을 추가하고 글꼴 크기를 18px 로 줄입니다.

CSS 클래스 사용

CSS 클래스는 여러 요소에 동시에 스타일을 적용하는 데 사용됩니다. 이 단계에서는 웹 페이지 전체에서 재사용할 수 있는 일반적인 경고 메시지에 대한 클래스를 생성합니다. <style> 태그에 이 코드를 추가합니다.

<style>
  .warning {
    color: red;
    background-color: yellow;
    border: 1px solid black;
    padding: 10px;
  }
</style>

이 코드는 노란색 배경색, 검은색 테두리 및 빨간색 텍스트 색상을 포함하는 경고 메시지에 대한 스타일을 생성합니다.

다음으로, 이 클래스를 h1 헤더에 적용합니다. h1 요소를 수정하여 클래스를 포함합니다.

<h1 class="warning">Welcome to my Webpage</h1>

이 단계는 헤더에 경고 스타일을 추가합니다.

외부 스타일 시트 추가

외부 스타일 시트는 스타일 시트를 HTML 콘텐츠와 분리하는 데 사용됩니다. 이 단계에서는 여러 웹 페이지에서 재사용할 수 있는 외부 스타일 시트를 생성합니다.

style.css라는 새 파일을 생성합니다. style.css에 다음 코드를 추가합니다.

h1 {
  font-size: 48px;
}

p {
  font-size: 24px;
}

.warning {
  background-color: green;
}

이 코드는 h1 및 p 요소에 대한 스타일을 설정하고 warning 클래스가 녹색 배경색을 갖도록 변경합니다.

이 외부 스타일 시트를 index.html 페이지에 연결하려면 <head> 태그에 다음 코드를 추가합니다.

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

이 줄은 style.css 파일을 index.html 페이지에 연결합니다.

미디어 쿼리 추가

미디어 쿼리는 서로 다른 장치 크기에 서로 다른 스타일을 적용하는 데 사용됩니다. 이 단계에서는 미디어 쿼리를 사용하여 요소의 글꼴 크기를 조정합니다. style.css 파일에 이 코드를 추가합니다.

@media (max-width: 600px) {
  h1 {
    font-size: 36px;
  }

  p {
    font-size: 18px;
  }
}

이 코드는 너비가 600px 이하인 화면 크기에 대해 h1 글꼴 크기를 36px 로, p 글꼴 크기를 18px 로 조정합니다.

선택자와 중첩 추가

이 단계에서는 두 가지 고급 CSS 개념인 선택자 (selector) 와 중첩 (nesting) 을 소개합니다.

advanced.css라는 새 파일을 생성합니다. advanced.css에 다음 코드를 추가합니다.

header h1 {
  color: blue;
  font-style: italic;
}

main p {
  color: red;
}

이 코드는 header 요소 내의 h1 요소를 선택하고 파란색과 이탤릭체 글꼴 스타일을 적용합니다. 또한 main 요소 내의 p 요소를 선택하고 빨간색을 적용합니다.

이 외부 스타일 시트를 index.html 페이지에 연결하려면 <head> 태그에 다음 코드를 추가합니다.

<link rel="stylesheet" type="text/css" href="advanced.css" />

이 줄은 advanced.css 파일을 index.html 페이지에 연결합니다.

요약

이 랩에서는 웹 페이지에 스타일을 추가하는 다양한 방법을 배웠습니다. 인라인 스타일과 임베디드 스타일을 사용하여 시작한 다음, CSS 클래스와 외부 스타일 시트로 이동했습니다. 또한 미디어 쿼리, 선택자 (selector), 중첩 (nesting) 에 대해서도 배웠습니다. 이러한 방법을 사용하여 웹 페이지 전체에서 사용할 수 있는 사용자 정의 스타일 시트를 만들고, 현대적이고 반응형 웹사이트를 만들 수 있습니다.