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은 웹페이지의 골격으로 생각하면 됩니다. 자바스크립트는 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 - 다른 요소에 포함된 INSIDE 요소입니다.
- 상위 요소 - 다른 요소를 포함하고 있는 요소입니다.
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 파일은 다양한 함수로 구성된 자바스크립트 스크립팅을 사용하여 작성된 CSS 스타일 및 동작으로 보강됩니다. HTML 파일은 Google App Engine에서 사용하는 템플릿이며 데이터베이스에서 채워집니다.
HTML 작업
HTML 시작하기
HTML은 .html 확장자를 사용하여 파일 내에 작성됩니다.
페이지 확인하기
Mac에서 HTML 파일 미리보기: 명령줄에서 HTML 페이지가 있는 폴더로 이동하여 열려 있는 파일 이름을 입력하고 "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">앵커 (얼마나 많은 사용자가 'links"'라고 부름)
하이퍼링크의 경우 <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/Tag/, 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>로 이동합니다. <p>,<h1>-<h6>,<div>,<li>,<img>,<a>,<hr>,<br>,<!-- -->등 개발자가 HTML 문서의 콘텐츠를 빌드하는 데 사용할 수 있는 다양한 요소가 있습니다.- 일부 요소에는 여는 태그와 닫는 태그
<p></p>가 필요합니다. - 다른 요소는 자체적으로 닫혀 있으므로 시작 태그
<img>만 필요합니다. - 태그에는 속성이 작동하는 방식에 대한 추가 정보를 제공하는 속성 (
src,alt,id등)이 포함될 수 있습니다.<img src="filename.png" alt="description"> - 주석(
<!-- -->)은 웹페이지의 기능을 파악하는 데 유용한 메모를 개발자에게 제공합니다. - 브라우저에서 기본 제공되는 개발자 도구를 사용하여 웹페이지의 HTML 코드를 검사하고 페이지가 어떻게 만들어졌는지 검사합니다.
질문 1
다음 중 하위 요소는 무엇인가요? (이 연습의 목적상 본문/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- 사이드바
- 사이드바를 입력하세요.
Question 5
다음 HTML 요소에는 몇 개의 속성이 있나요?
<input type="text" placeholder="username" name="username" />- 0
- 1
- 2번
- 3
Question 6
관계를 보여주는 다음 HTML 스니펫에서 상위 요소는 무엇인가요?
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p><b><i>
Question 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
Question 8
일부 브라우저에서는 이러한 HTML 스니펫을 올바르게 렌더링하지만 어떤 문제가 있나요?
<img src=puppies.png width=400 />- 닫는 태그가 없음
- 속성 값을 따옴표로 묶어야 합니다.
width속성을 제공하려면height속성도 필요합니다.- 필수 속성이 누락되었습니다.
질문 1
다음 중 하위 요소는 무엇인가요? (이 연습의 목적상 본문/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 코드가 한 줄에 모두 있어도 HTML 코드를 읽을 수 있습니다.
질문 4
다음 중 HTML 요소의 속성은 무엇인가요?
<div class="sidebar">Sidebar goes here!</div>class는 속성입니다. 속성은 HTML 요소 내에 있으며 일반적으로 값이 있습니다 (있을 필요는 없음).
Question 5
다음 HTML 요소에는 몇 개의 속성이 있나요?
<input type="text" placeholder="username" name="username" />위의 input 요소에는 type, placeholder, name의 3가지 속성이 있습니다.
Question 6
관계를 보여주는 다음 HTML 스니펫에서 상위 요소는 무엇인가요?
<p>
<b>Pomp</b> and <i>Circumstance</i>
</p><p>은 다른 요소가 포함되어 있으므로 상위 요소입니다.
Question 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>)입니다.
Question 8
일부 브라우저에서는 이러한 HTML 스니펫을 올바르게 렌더링하지만 어떤 문제가 있나요?
<img src=puppies.png width=400 />속성 값을 따옴표로 묶어야 합니다. <img />는 자체 닫기 태그이며 필수 속성이 없습니다. height 없이 width을 입력해도 괜찮고 반대의 경우도 마찬가지입니다.