HTML은 웹페이지의 기본입니다. 이 단원에서는 웹페이지의 견고하고 의미 있는 구조를 만드는 방법을 알아봅니다.
핵심 요점
- 학생이 HTML 파일 구조를 이해합니다.
- 학생이 일반적인 태그를 사용하여 웹페이지를 빌드하는 방법을 알고 있습니다.
HTML이란 무엇인가요?
HTML은 HyperText Markup Language의 약자입니다. 이 코드는 다음 작업을 수행하는 데 사용됩니다.
- 월드와이드웹에 저장되고 브라우저에 표시되는 문서를 만듭니다.
- 웹페이지의 기본 구조를 제공합니다.
- 브라우저에 표시할 텍스트와 이미지가 제대로 로드되도록 합니다.
HTML은 언제 사용하나요?
월드 와이드 웹에서 볼 수 있는 모든 웹페이지는 HTML 코드를 사용하여 작성됩니다. 버튼, 이미지, 양식, 텍스트 섹션은 모두 HTML로 생성된 요소입니다.
웹페이지를 인체로 생각한다면 HTML은 뼈대입니다. CSS를 사용하여 신체에 피부와 옷을 추가할 수 있지만, 골격 구조가 있어야 합니다.
HTML 활용 사례
HTML의 핵심은 요소입니다. 요소는 태그를 사용하여 생성됩니다.
대부분의 요소에는 여는 태그와 닫는 태그가 있습니다.
<!-- opening tag -->
<p>
<!-- closing tag -->
</p>웹페이지에 표시할 콘텐츠 (텍스트 또는 기타 HTML 요소)는 이러한 태그 사이에 배치할 수 있습니다. 마치 샌드위치의 레이어를 중첩하는 것과 같습니다.
<p>The content that you write here will be seen on the web page</p>
<section>
<p>This text is inside a paragraph within a section.</p>
</section>일부 HTML 콘텐츠는 추가 종료 태그가 필요하지 않은 자체 종료 태그로 생성됩니다.
<img />
<link />이 요소의 역할은 문서에서 자리를 차지하는 것이므로 이 태그 하나만으로 충분합니다. 대부분의 다른 HTML 요소와 달리 이러한 자체 닫힘 요소 내에 다른 요소나 정보를 중첩할 수는 없습니다.
HTML 요소의 부분
HTML 예
이 코드는 브라우저에 표시되며 아래 이미지와 같이 표시됩니다.
이 코드는...
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>HTML Example</title>
</head>
<body>
<h1>My Day In The Garden</h1>
<section>
<h2>Flora</h2>
<p>I spent the morning drawing some of the daffodils that
are inbloom.</p>
<p>I picked a few tulips to put in a vase in the dining
room.</p>
</section>
<section>
<h2>Fauna</h2>
<p>Today I spotted that hummingbird again, buzzing around
the newly blooming tree.</p>
<img
src="https://media.gettyimages.com/photos/magentathroated-woodstar-feeding-from-flowers-picture-id853369596"
alt="hummingbird"/>
</section>
</body>... 이 웹페이지를 만듭니다.
HTML 참조
프레이밍
맥락 및 목적
HTML은 Hyper Text Markup Language의 약자입니다. 텍스트에 구조적 의미를 부여하는 방법입니다. 이를 통해 컴퓨터와 프로그래머는 텍스트 청크의 목적을 쉽게 파악할 수 있습니다.
HTML은 웹페이지의 뼈대라고 생각하면 됩니다. 구조와 콘텐츠를 제공하고 JavaScript와 CSS는 상호작용과 스타일을 제공합니다.
학습 목표
학생은 다음 작업을 할 수 있습니다.
- HTML 파일을 만들어 편집기와 브라우저에서 엽니다.
- 올바른 구조로 HTML 파일 설정
- 일반적인 태그를 나열하고 사용하여 웹사이트에 구조와 콘텐츠를 추가합니다.
시작하기
섹션 프레이밍 및 목적
- HTML은
.html확장자가 있는 파일 내에 작성됩니다. - html 파일에는 원하는 이름을 지정할 수 있지만 개발자가 서버를 다르게 구성해야 하는 이유가 없는 한
index.html이 방문 페이지에 가장 일반적으로 사용되는 이름입니다.
# creating an html file on the command line
touch index.html# opening your html file in your browser
open index.html미니 챌린지
- 원하는 이름으로 HTML 파일을 3개 더 만듭니다.
- 텍스트 편집기와 브라우저에서 파일 중 하나를 엽니다.
HTML 페이지의 구조
섹션 프레이밍 및 목적
HTML 문서는 항상 동일한 구조로 시작해야 합니다.
DOCTYPE태그는 특별하며 닫히지 않습니다. 또한 영숫자가 아닌 값 (문자/숫자)을 포함할 수 있는 유일한 태그입니다.<head>에는 웹사이트에 관한 정보가 포함되지만 페이지에 표시되는 실제 콘텐츠는 포함되지 않습니다.<body>에는 화면에 실제로 표시될 페이지의 모든 콘텐츠가 포함됩니다.- 페이지의 구조를 만드는 데 사용할 태그는
<body>태그 사이에 배치해야 합니다. - 여는 태그와 닫는 태그 사이에 요소의 텍스트 또는 '콘텐츠'를 삽입합니다. 최종 결과는 다음과 같습니다.
<example-tag>Content Goes in here</example-tag>태그는 다른 태그 내에 배치할 수도 있습니다. - 태그를 다른 태그 내부에 배치할 때는 새 태그가 상위 태그의 하위 태그임을 나타내기 위해 들여쓰기해야 합니다.
어휘
- 요소 - HTML 코드로 생성된 항목 (예: 이미지, 단락, 제목)
- 태그 - 특정 요소가 시작되고 종료되는 위치를 나타내는 코드 조각입니다.
- child - 다른 요소 내부에 포함된 요소입니다.
- parent - 다른 요소를 포함하는 요소입니다.
HTML 예
참고: 다음은 참고용 예시일 뿐입니다. 지금 당장 모두 이해할 필요는 없지만 형식이 잘 지정된 HTML이 어떤 모습인지 확인하는 것이 좋습니다.
<!-- Standard tag setup of an HTML document -->
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Practice Website</title>
</head>
<body>
<h1>My first website</h1>
<section>
<h2>Information about me</h2>
<p>I am coding out my first website. This is a paragraph
that I would write with information about my
interests.</p>
</section>
<section>
<h2>Things that I've learned in class</h2>
<ul>
<li>Command Line</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
</body><!-- Nested elements -->
<section>
<p>I am the text that will show up on your website.</p>
</section>
<!-- The <section> is the parent element -->
<!-- The <p> is the child element -->미니 챌린지
- 만든 파일 중 하나를 열고 기본 HTML 태그 구조를 추가합니다.
- 가족 트리 (또는 다른 사람의 가족 트리)를 표시하도록 HTML 본문을 설정합니다.
section태그를 사용하여 가족 그룹을 보유합니다.p태그를 사용하여 가족 구성원을 보유합니다. 가족은 복잡하지만 예를 들면 다음과 같습니다.
<section>Jetson Family
<div>George and Jane
<p>Judy</p>
<p>Elroy</p>
</div>
<p>Rosie the robot</p>
<p>Astro the dog</p>
</section>
<!-- In this example, Judy and Elroy are the children of Jane and George. -->공통 태그
섹션 프레이밍 및 목적
일반적으로 자체 요소 유형을 만들지는 않습니다. 대신 기능이 이미 연결된 사전 정의된 요소 집합이 있습니다.
코드 블록 예시의 분석은 HTML 참조를 참고하세요
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Practice Website</title>
</head>
<body>
<h1>My first website</h1>
<br>
<img
src="https://media.gettyimages.com/photos/portrait-of-kitten-against-colored-background-picture-id903869076"
alt="kitten with blue background">
<hr>
<section>
<h2>Information about me</h2>
<p>I am coding out my first website. This is a paragraph
that I would write with information about my interests.</p>
<h3>My favorite websites</h3>
<ul>
<li><a href="www.google.com">Google</a></li>
</ul>
<h3>My favorite books</h3>
<section>
<h4>Non-Fiction</h4>
<ol>
<li>Eloquent Javascript</li>
</ol>
</section>
<section>
<h4>Fiction</h4>
<ol>
<li>Hitchhiker's Guide to the Galaxy</li>
</ol>
</section>
</section>
<hr>
<section>
<h2>Things that I've learned in class</h2>
<ul>
<li>Command Line</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</section>
</body>미니 챌린지
- 위의 모든 콘텐츠를 내 관심분야에 맞게 수정해 줘.
- 수업 시작 시 만든 다른 빈 HTML 파일 중 하나에서 제목, 헤드라인, 하위 헤드라인이 있는 뉴스 기사를 준비하는 것처럼 합니다. 여행 중 하루에 대해 써 줘. 간단한 여행, 방문한 장소, 먹은 음식 등을 생각해 보세요.
- 관련 태그를 사용하고 콘텐츠를 추가하여 뉴스 기사를 웹사이트에 표시합니다.
- 콘텐츠가 브라우저에 표시되는지 확인합니다.
- STRETCH: 다른 사용자가 작성하여 내 게시물에 대한 의견을 보낼 수 있는 양식을 만드세요. 아직 작동하지는 않지만 (자바스크립트에 연결되어 있지 않음) HTML로 이 양식을 만들면 작동하는 양식을 만드는 첫 번째 단계를 확인할 수 있습니다.
컨텍스트
HTML은 월드 와이드 웹의 콘텐츠 언어입니다.
명령줄을 사용하여 HTML 파일로 이동하고 파일을 엽니다. HTML 파일은 다양한 함수로 구성된 JavaScript 스크립팅을 사용하여 작성된 CSS 스타일과 동작으로 보강됩니다. HTML 파일은 Google App Engine에서 사용되는 템플릿이기도 하며 데이터베이스에서 채워집니다.
HTML 활용 사례
HTML 시작하기
HTML은 .html 확장자가 있는 파일 내에 작성됩니다.
페이지 보기
Mac에서 HTML 파일을 미리 보려면 명령줄에서 HTML 페이지가 있는 폴더로 이동하여 open filename을 입력합니다. 이때 'filename'을 HTML 파일 이름으로 바꿉니다.
일반 구문
<tag>
Content
</tag>요소가 중첩됨
HTML 요소는 다른 요소 내에 배치할 수 있습니다.
<parent>
<child>
This content is inside of the child tag, which is inside of
the parent tag. Keep an eye on indentation to see which is
the parent and which is the child!
</child>
</parent>HTML 페이지의 구조
모든 웹페이지의 기본 구조는 동일합니다. 상태 메시지가 표시됩니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html><head>에는 웹사이트에 관한 정보가 포함되지만 페이지에 표시되는 실제 콘텐츠는 포함되지 않습니다 (웹페이지의 '두뇌'라고 생각하면 됨).<body>에는 화면에 실제로 표시될 페이지의 모든 콘텐츠가 포함됩니다.
일반 요소
<body> 및 </body> 태그 내에서 이러한 공통 요소를 사용하여 페이지에 콘텐츠를 추가합니다.
단락
단락을 만들려면 p 여는 태그와 닫는 태그를 사용합니다.
<p>
This is a paragraph about how great polar bears are. Aren't they just the best?
</p>댓글
최종 렌더링된 HTML에 영향을 주지 않으면서 코드를 더 쉽게 읽을 수 있도록 주석을 사용하세요.
<!-- This is a comment. It lives in the code as a note to yourself or
to other developers, but is hidden when the HTML is rendered in the
browser. -->제목
<!-- Different levels of headings. Use these for structuring
your page. <h1> is most important heading while <h6> is the
least important heading. -->
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>일반 <div>
<div> The DIV tag exists to make "dividers" to keep your page
organized. Group other similar or related elements inside these.</div>목록
목록 항목 목록인 <li>은 정렬되지 않은 목록 태그인 <ul> 또는 정렬된 목록 태그인 <ol>로 래핑됩니다.
<!-- An unordered list - this will default to a bulleted list. -->
<ul>
<li>first list item</li>
<li>second list item</li>
</ul><!-- An ordered list - this will default to a numbered list. -->
<ol>
<li>first list item</li>
<li>second list item</li>
</ol>이미지
<img> 태그는 src 속성을 사용하여 이미지의 주소를 지정해야 하며, 선택사항인 alt 속성은 스크린 리더를 비롯한 접근성에 사용됩니다.
<!-- Image hosted elsewhere on the web -->
<img
src="https://some.hostingsite.com/portrait-of-kitten-in-blue"
alt="kitten with blue background">
<!-- Image hosted on your own site -->
<img src="img/kitten-blue-background.jpg" alt="Kitten in a donut">앵커 (많은 사용자가 '링크'라고 부름)
하이퍼링크의 경우 <a> 태그를 사용하려면 href 속성을 사용하여 하이퍼링크 대상의 주소를 지정해야 합니다.
<!-- External link -->
<a href="https://www.google.com"></a>
<!-- Local link -->
<a href="footer.html"></a>가로줄
<!-- This self-closing tag creates a line across your web page. -->
<hr>휴식 시간
<!-- This self-closing tag creates a line break between elements. -->
<br>양식
<form>는 사용자로부터 정보를 수집하는 데 사용됩니다. <form>이 작동하려면 수집한 데이터를 처리하거나 처리할 수 있는 곳으로 전송해야 합니다. 따라서 <form>에는 추가 속성이 필요한 경우가 많습니다.
action- 양식이 제출될 때 양식 데이터의 대상method- 데이터를GET또는POST유형의 요청을 사용하여 처리해야 하는지 여부를 나타냅니다.
<!-- a form that will send data to process.php via POST request -->
<form action="/process.php" method="post">
</form>입력
<input>는 <form>가 정보를 수집하는 데 사용하는 요소입니다.
<input> 요소에는 데이터베이스에서 제출된 데이터가 속한 필드를 식별하는 데 사용되는 name 속성도 있습니다.
<form>
<!-- a text box with the helper text "Full Name" -->
<input type="text" name="fullName" placeholder="Full Name">
</form><input> 요소는 매우 다재다능합니다. type 속성을 지정하면 텍스트 필드, 캘린더 스타일 날짜 선택기, 라디오 버튼, 드롭다운 등으로 렌더링할 수 있습니다. 외부 문서를 참고하여 더 완전한 목록을 확인할 수 있습니다.
도움말 및 유용한 정보
- 웹페이지의 코드를 검사하여 다른 개발자가 웹페이지에 항목을 추가하는 데 사용한 태그를 확인하여 사용 가능한 HTML 태그를 알아봅니다.
- 추가하려는 항목을 찾을 수 없는 경우 개발자 문서를 확인하세요. 가능한 모든 HTML 요소의 목록은 https://www.w3schools.com/Tags/, https://developer.mozilla.org/en-US/docs/Web/HTML/Element, http://html-css-js.com/html/tags/에서 확인할 수 있습니다.
- HTML을 작성할 때 여는 태그와 닫는 태그가 필요한 요소의 경우 태그 사이에 콘텐츠를 추가하기 전에 먼저 태그를 열고 닫는 것이 좋습니다. 이렇게 하면 태그가 누락되지 않습니다.
- 코드에서 HTML 요소의 중첩된 특성을 가장 잘 보려면 다른 요소 내에 있는 요소를 들여쓰기하세요. 이렇게 하면 HTML 콘텐츠의 구조를 빠르게 인식할 수 있습니다.
- 댓글을 많이 사용하세요. 이렇게 하면 자신의 코드를 문제 해결하는 데 도움이 되며 다른 사용자에게 검토를 요청할 때도 도움이 됩니다.
- html5boilerplate.com과 같은 웹 리소스를 사용하면 HTML 작성을 빠르게 시작할 수 있습니다.
권장사항 요약
- 웹페이지에 관한 정보는 HTML 문서의
<head>에 들어갑니다(제목, 메타데이터, 스타일 링크 등). - 웹페이지의 정보는 HTML 문서의
<body>에 들어갑니다. - 개발자가 HTML 문서의 콘텐츠를 빌드하는 데 사용할 수 있는 요소는
<p>,<h1>~<h6>,<div>,<li>,<img>,<a>,<hr>,<br>,<!-- -->등 다양합니다. - 일부 요소에는 여는 태그와 닫는 태그(
<p></p>)가 필요합니다. - 다른 요소는 자동으로 닫히므로 시작 태그(
<img>)만 필요합니다. - 태그에는 요소의 동작 방식에 관한 추가 정보를 제공하는 속성 (
src,alt,id등)이 포함될 수 있습니다.<img src="filename.png" alt="description"> <!-- -->인 주석은 웹페이지의 섹션이 하는 일을 이해하는 데 유용한 메모를 개발자에게 제공합니다.- 브라우저의 내장 개발자 도구를 사용하여 웹페이지의 HTML 코드를 검사하여 페이지가 어떻게 빌드되었는지 확인합니다.
질문 1
다음 중 하위 요소는 무엇인가요? (이 연습에서는 body/html 요소를 무시하세요.)
<h1>
Welcome to the site!
</h1>
<p>
Go to <a href="https://www.google.com">Google!</a>
</p>- h1
- p
- a
- h1 및 p
질문 2
HTML 문서에서 __는 <head> 요소에 들어가고 __는 <body> 요소에 들어갑니다.
- 구조, 메타데이터
- 메타데이터, 구조
- 제목, 작은 콘텐츠
- 사이트의 헤더, 사이트의 기본 콘텐츠
질문 3
다음 중 중첩된 요소를 들여쓰기하는 것이 좋지 않은 이유는 무엇인가요?
- 들여쓰기를 사용하면 다른 요소에 포함된 요소를 더 쉽게 확인할 수 있습니다.
- 들여쓰기를 사용하면 사람이 웹페이지의 구조를 더 쉽게 읽을 수 있습니다.
- 들여쓰기를 사용하면 봇/검색엔진이 웹페이지의 구조를 더 쉽게 읽을 수 있습니다.
- 들여쓰기를 사용하면 형제 요소를 더 쉽게 식별할 수 있습니다.
질문 4
다음 중 HTML 요소의 속성은 무엇인가요?
<div class="sidebar">Sidebar goes here!</div>divclass- 사이드바
- 사이드바가 여기에 표시됩니다.
질문 5
다음 HTML 요소에는 속성이 몇 개 있나요?
<input type="text" placeholder="username" name="username" />- 0
- 1
- 2
- 3
질문 6
관계가 표시된 다음 HTML 스니펫에서 상위 요소는 어느 요소인가요?
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p><b><i>
질문 7
다음 HTML 스니펫에서 상위 요소의 하위 요소인 요소는 몇 개일까요?
(래핑 <body> 또는 <html> 요소는 계산하지 않음)
<div>
<h1>Buster's site</h1>
<p>Buster is my dog. He is a <i>very good dog</i>. He is a
Labrador retriever. Read more about it
<a href="https://dogtime.com/dog-breeds/labrador-retriever">
here</a>.
<p>
</div>- 1
- 2
- 3
- 4
질문 8
일부 브라우저에서는 다음 HTML 스니펫을 올바르게 렌더링하지만, 이 스니펫의 문제점은 무엇일까요?
<img src=puppies.png width=400 />- 닫는 태그가 없습니다.
- 속성 값은 따옴표로 묶어야 합니다.
width속성을 제공하려면height속성도 필요합니다.- 필수 속성이 누락됨
질문 1
다음 중 하위 요소는 무엇인가요? (이 연습에서는 body/html 요소를 무시하세요.)
<h1>
Welcome to the site!
</h1>
<p>
Go to <a href="https://www.google.com">Google!</a>
</p>a 요소는 다른 요소 내에 포함되어 있으므로 하위 요소입니다.
질문 2
HTML 문서에서 __는 <head> 요소에 들어가고 __는 <body> 요소에 들어갑니다.
메타데이터는 <head> 요소에, 구조는 <body> 요소에 들어갑니다. <head> 요소의 내용은 웹페이지에 표시되지 않습니다.
질문 3
다음 중 중첩된 요소를 들여쓰기하는 것이 좋지 않은 이유는 무엇인가요?
들여쓰기를 해도 봇/검색엔진이 웹페이지의 구조를 더 쉽게 읽을 수 있는 것은 아닙니다. 봇이 웹사이트를 읽을 때는 HTML 코드가 한 줄에 모두 있어도 읽을 수 있습니다.
질문 4
다음 중 HTML 요소의 속성은 무엇인가요?
<div class="sidebar">Sidebar goes here!</div>class는 속성입니다. 속성은 HTML 요소 내에 있으며 일반적으로 값을 갖습니다 (값을 갖지 않아도 됨).
질문 5
다음 HTML 요소에는 속성이 몇 개 있나요?
<input type="text" placeholder="username" name="username" />위의 input 요소에는 type, placeholder, name의 3가지 속성이 있습니다.
질문 6
관계가 표시된 다음 HTML 스니펫에서 상위 요소는 어느 요소인가요?
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p>은 다른 요소를 포함하므로 상위 요소입니다.
질문 7
다음 HTML 스니펫에서 상위 요소의 하위 요소인 요소는 몇 개일까요?
(래핑 <body> 또는 <html> 요소는 계산하지 않음)
<div>
<h1>Buster's site</h1>
<p>Buster is my dog. He is a <i>very good dog</i>. He is a
Labrador retriever. Read more about it
<a href="https://dogtime.com/dog-breeds/labrador-retriever">
here</a>.
<p>
</div>스니펫에는 4개의 하위 요소가 있습니다. 기본적으로 상위 요소가 있는 요소(<div> 요소를 제외한 모든 요소)인 <h1>, <p>, <i>, <a>이 있습니다.
질문 8
일부 브라우저에서는 다음 HTML 스니펫을 올바르게 렌더링하지만, 이 스니펫의 문제점은 무엇일까요?
<img src=puppies.png width=400 />속성 값은 따옴표로 묶어야 합니다. <img />는 자체 닫힘 태그이며 필수 속성이 없습니다. height 없이 width를 사용해도 되고 그 반대도 마찬가지입니다.