연습 - 웹앱에 기본 HTML 추가 - Training

10분

현재 웹 사이트에는 빈 HTML 파일이 있습니다. 일부 코드를 추가해 보겠습니다! 목표는 HTML(Hypertext Markup Language)을 사용하여 고객의 브라우저가 표시해야 하는 웹 페이지를 설명하는 것입니다. 시작 템플릿이 있으면 좋지 않을까요? 편집기에서는 일반적인 상용구 또는 HTML 구조의 일부를 편리하게 작성할 수 있습니다.

이 단원에서는 기본 HTML 콘텐츠를 추가하고 브라우저에서 HTML 페이지를 연 다음, 개발자 도구를 살펴보겠습니다.

HTML 코드 추가

Visual Studio Code는 즉시 작동하는 HTML 프로그래밍을 기본적으로 지원합니다. 여기에는 구문 강조 표시, IntelliSense를 통한 스마트 완성 및 사용자 지정 가능한 서식 지정이 있습니다.

Visual Studio Code에서 웹 사이트를 연 다음, 탐색기에서 index.html 파일을 선택하여 index.html 파일을 엽니다.
index.html 페이지에서 html:5를 입력한 다음, Enter 키를 선택합니다. HTML5 템플릿 코드가 파일에 추가됩니다.

참고

HTML5 템플릿 코드가 index.html 파일에 추가되지 않은 경우 파일을 닫았다가 다시 열어 보세요.

다음과 비슷하도록 템플릿 코드를 편집합니다. 그런 다음, Ctrl+S(Windows) 또는 Command+S(macOS)를 선택하여 파일을 저장합니다.

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>

</body>
</html>

HTML에는 다양한 버전이 있습니다. doctype<!DOCTYPE html>은 이 HTML 문서에 HTML5 코드가 포함되어 있음을 나타냅니다.

모든 HTML 요소의 의미를 깊이 파고들지 않고, 몇 가지 중요한 항목을 중점적으로 다룹니다. meta 태그는 브라우저에서 소스 코드를 보지 않는 한 일반적으로 뷰어에 표시되지 않는 메타데이터 정보를 나타냅니다. 메타 요소 또는 태그는 웹 페이지에 대한 설명 정보를 제공합니다. 예를 들어 검색 엔진이 웹 페이지에서 검색 결과에 반환할 정보를 처리하는 데 도움이 됩니다.

UTF-8 문자 집합(charset)은 무의미하게 보일 수 있지만 컴퓨터에서 문자를 해석하는 방법을 설정하는 데 매우 중요합니다. 문자 집합에 대한 메타데이터가 없는 경우 보안이 손상될 수 있습니다. 문자 집합 특성에는 꽤 많은 기록과 기술 정보가 있지만 이 연습에서의 핵심은 Visual Studio Code 상용구가 적절한 기본값을 제공한다는 점입니다.

헤드 편집

HTML 코드의 <head> 요소에는 브라우저 탭 내에 표시되지 않는 웹 사이트에 관한 정보가 포함됩니다.

‘메타데이터’는 문자 집합, 스크립트, 웹 페이지가 열리는 브라우저와 같은 HTML 문서에 대한 데이터를 정의합니다.

웹 페이지의 ‘제목’은 브라우저 창의 맨 위에 표시되며 여러 측면에서 특별한 의미가 있습니다. 예를 들어 제목은 검색 엔진에서 사용되고 표시됩니다. 제목을 추가해 보겠습니다.

중요

이 시점부터 줄임표(...)는 이전에 선언된 코드가 앞 또는 뒤에 있음을 나타냅니다. 필요한 변경을 하거나 작업을 업데이트하려면 컨텍스트로 제공되는 충분한 코드가 있어야 하지만, 줄임표를 복사하여 코드에 붙여넣지 않아야 합니다.

편집기에서 다음 예제와 같이 <title> 요소를 수정합니다.

...
<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>Simple website</title>
...

웹 페이지의 HTML 요소에 스타일을 적용하려면 CSS 코드를 웹 페이지의 헤드에 직접 작성할 수 있습니다. HTML 페이지에서 CSS를 작성하는 것을 내부 CSS라고 합니다. 그러나 HTML 구조와 CSS 스타일 지정을 구분하는 것이 좋습니다. 별도의 CSS 페이지를 외부 CSS라고 합니다. 코드는 간결하고 구분되었을 때 더 쉽게 읽을 수 있습니다. 하나 이상의 외부 스타일시트를 사용하여 여러 웹 페이지를 서비스할 수 있습니다. 복제된 CSS 코드를 사용하여 각 HTML 페이지를 업데이트하는 대신, 단일 CSS 파일을 변경하여 모든 종속 웹 페이지에 업데이트가 적용되도록 할 수 있습니다. 외부 CSS 파일에 연결해 보겠습니다.

Visual Studio Code 편집기에서 <title> 요소 뒤에 빈 줄을 추가하고 link을(를) 입력한 다음, Enter 키를 선택합니다. Visual Studio Code가 index.html 파일에 다음 줄을 추가합니다.
```
<link rel="stylesheet" href="">
```

href=를 href="main.css"로 업데이트하고, Ctrl+S(Windows) 또는 Command+S(macOS)를 선택하여 파일을 저장합니다.

...
<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 List</title>
  <link rel="stylesheet" href="main.css">
</head>
...

본문 편집

이제 <body>(본문) 요소 입력을 시작해 보겠습니다.

<body> 요소에는 브라우저에서 고객에게 표시되는 웹 사이트의 콘텐츠가 포함됩니다.

<body> 요소 내에 heading<h1> 요소와 paragraph<p> 요소를 차례로 추가한 다음 여러 목록 항목<li> 요소가 포함된 정렬되지 않은 목록<ul>을 만듭니다.

다음 예제와 같은 모습이 되도록 코드를 편집하거나 복사하여 붙여넣습니다.

<!DOCTYPE html>
<html lang="en">
  <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>Simple website</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>Task List</h1>
    <p id="msg">Current tasks:</p>
    <ul>
      <li class="list">Add visual styles</li>
      <li class="list">Add light and dark themes</li>
      <li>Enable switching the theme</li>
    </ul>
  </body>
</html>

<p> 요소에 사용되는 ID 특성은 한 요소의 스타일을 지정하는 데 사용할 수 있지만, <li> 요소에 사용되는 클래스 특성은 같은 클래스의 모든 요소에 스타일을 지정하는 데 사용됩니다.

다음 단계를 수행하기 전에 Ctrl+S 또는 Command+S를 선택하여 파일을 저장해야 합니다.

브라우저에서 열기

브라우저에서 HTML 파일을 열어 웹 페이지를 로컬로 미리 볼 수 있습니다. https://로 시작하는 웹 사이트 주소 대신 브라우저에서 C:/dev/simple-website/index.html과 같이 표시되는 로컬 파일 경로를 가리킵니다.

Visual Studio Code를 사용하여 미리 보려면 index.html을 마우스 오른쪽 단추로 클릭하고 기본 브라우저에서 열기를 선택하거나 index.html 파일을 선택하고 Alt+B 바로 가기 키를 사용합니다.

Important

문제가 있는 경우 파일 이름 아이콘 또는 텍스트를 직접 마우스 오른쪽 단추로 클릭해야 합니다. Visual Studio Code 대화 상자가 나타나면 Yes, I trust the authors(예, 작성자를 신뢰합니다.)를 선택합니다. 이 기능은 프로젝트 폴더에서 자동 코드 실행을 허용할지 제한할지 결정할 수 있는 작업 영역 신뢰 기능입니다. 파일을 방금 만들었으므로 안전합니다.

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

개발자 도구를 사용하여 페이지 보기

브라우저에서 개발자 도구를 사용하여 웹 페이지를 검사할 수 있습니다. 사용해 보겠습니다.

웹 페이지를 마우스 오른쪽 단추로 클릭하고 검사를 선택하여 개발자 도구를 열거나 다음 바로 가기를 시도합니다.
- 개발자 도구 바로 가기 키인 F12 키를 누릅니다.
- Windows 및 Linux에서 Ctrl+Shift+I를 누르거나 Mac에서 Option+Command+I를 누릅니다.
이 바로 가기 키는 Microsoft Edge, Chrome, Firefox 등에서 작동합니다. Safari를 사용하는 경우 웹 개발 도구를 참조하세요. 설치되면 Safari > 기본 설정을 선택한 후 고급을 선택합니다. 창의 아래쪽에서 메뉴 모음에 개발 메뉴 표시 확인란을 선택합니다. 개발 > 웹 검사기 표시를 선택합니다. 자세한 내용은 Safari 웹 검사자 설명서를 참조하세요.

개발자 도구와 주요 사용 가능한 기능을 여는 방법에 관한 자세한 내용은 DevTools 개요 문서를 확인하세요.
Elements 탭을 선택합니다.
요소 탭에 표시되는 HTML 요소 위로 마우스를 이동하고 다양한 요소의 콘텐츠를 확장합니다.

개발자 도구의 요소 탭에는 브라우저에서 렌더링된 DOM(문서 개체 모델)이 표시됩니다. 디버그할 때 브라우저에서 원본 코드를 해석하는 방법을 확인하는 것이 중요한 경우가 종종 있습니다.

브라우저에서 페이지를 검사하면 모든 종류의 유용한 정보를 제공하며 문제를 해결하는 데 도움이 될 수 있습니다. 다음 섹션에서 살펴보겠지만 검사기를 사용하여 CSS 세부 정보를 볼 수도 있습니다.

계속

연습 - 웹앱에 기본 HTML 추가

HTML 코드 추가

헤드 편집

본문 편집

브라우저에서 열기

개발자 도구를 사용하여 페이지 보기

피드백