Document and website structure

MDN/HTML

Document and website structure

dokite 2022. 9. 4. 23:55

문서와 웹사이트 구조

In addition to defining individual parts of your page (such as "a paragraph" or "an image"), HTML also boasts a number of block level elements used to define areas of your website (such as "the header", "the navigation menu", "the main content column"). This article looks into how to plan a basic website structure, and write the HTML to represent this structure.

페이지의 개별적인 부분 뿐만 아니라, (“단락” 또는 “이미지”같은), HTML은 또한 가지고 있는 다수의 블록 레벨 요소를 웹사이트 영역에 정의하는데 사용되는 걸 자랑하곤 했다 (“제목”, “네비게이션 메뉴”, “주된 주제 열” 같은) 이 기사는 기본적인 웹사이트 구조 계획과 이 구조를 표시하기 위해 HTML을 작성하는 방법를 볼 수 있다

Prerequisites:	Basic HTML familiarity, as covered in Getting started with HTML. HTML text formatting, as covered in HTML text fundamentals. How hyperlinks work, as covered in Creating hyperlinks.
Objective:	Learn how to structure your document using semantic tags, and how to work out the structure of a simple website

필요사항: HTML 시작하기에서 다룬 기본 HTML에 대한 친숙함과 HTML 텍스트 기본에서 다룬 텍스트 초기화, 하이퍼링크 만들기에서 다룬 어떻게 하이퍼링크가 작동하는지에 대한 지식

목적: 의미를 가진 태그를 사용해 문서를 구성하는 방법과 간단한 웹사이트 구조를 만드는 방법을 배우는 것

Basic sections of a document

문서의 기본 부분

Webpages can and will look pretty different from one another, but they all tend to share similar standard components, unless the page is displaying a fullscreen video or game, is part of some kind of art project, or is just badly structured:

웹페이지는 서로 꽤 다르게 보일 수 있고, 그렇게 보이겠지만 페이지가 전체화면 비디오 또는 게임을 진열하거나 어떤 종류의 예술 프로젝트의 일부이거나 잘못 구조화되지 않는 한 그들은 모두 비슷한 기준의 표준 구성 요소를 공유하는 경향이 있다

header:

Usually a big strip across the top with a big heading, logo, and perhaps a tagline. This usually stays the same from one webpage to another.

헤더:

일반적으로 큰 띠 전역에서 상단의 큰 제목, 로고, 그리고 아마도 태그라인이 있다 이것은 보통 한 웹페이지에서 다른 페이지로 동일하게 유지된다

navigation bar:

Links to the site's main sections; usually represented by menu buttons, links, or tabs. Like the header, this content usually remains consistent from one webpage to another — having inconsistent navigation on your website will just lead to confused, frustrated users. Many web designers consider the navigation bar to be part of the header rather than an individual component, but that's not a requirement; in fact, some also argue that having the two separate is better for accessibility, as screen readers can read the two features better if they are separate.

네비게이션 바:

사이트의 주요 부분에 대한 링크; 보통 메뉴 버튼, 링크 또는 탭이 표시되어 있다 헤더와 똑같이 일반적으로 이 콘텐츠는 한 페이지에서 다른 페이지로 일관되게 남아있다- 일관성 없는 네비게이션을 가질 때 웹사이트는 혼란과 절망으로 사용자를 인도할 것이다 많은 웹 디자이너들은 개별적인 구성 요소가 아닌 헤더의 부분으로 고려하지만 그것은 요구 사항이 아니다; 사실 일부는 스크린리더가 분리되어 있다면 두 기능들을 읽을 수 있기 때문에 두가지를 분리하는 것이 접근성에 더 좋다고 주장한다

main content:

A big area in the center that contains most of the unique content of a given webpage, for example, the video you want to watch, or the main story you're reading, or the map you want to view, or the news headlines, etc. This is the one part of the website that definitely will vary from page to page!

주요 콘텐츠:

주어진 웹페이지 대부분의 독특한 콘텐츠가 포함된 중앙의 큰 영역은 예를들어 비디오를 보기 원할 때, 읽고 있는 주요 기사나 지도 및 뉴스 헤드라인을 보고싶을 때 등으로 이것은 웹페이지의 한 부분으로 분명히 페이지마다 다른 페이지 일 것이다!

sidebar:

Some peripheral info, links, quotes, ads, etc. Usually, this is contextual to what is contained in the main content (for example on a news article page, the sidebar might contain the author's bio, or links to related articles) but there are also cases where you'll find some recurring elements like a secondary navigation system.

사이드바:

어떤 주변에 정보, 링크, 인용, 광고 등은 주요 콘텐츠 안에 들어있는 것이 문맥상으로 일반적이지만, (예를 들어 뉴스 기사 페이지안에 사이드바는 저자의 프로필, 또는 관련 기사 링크) 보조 네비게이션 시스템처럼 순환하는 요소를 찾는 경우도 있다

footer:

A strip across the bottom of the page that generally contains fine print, copyright notices, or contact info. It's a place to put common information (like the header) but usually, that information is not critical or secondary to the website itself. The footer is also sometimes used for SEO purposes, by providing links for quick access to popular content.

바닥글:

페이지의 아래 띠 전역에 일반적으로 작은 문자로 인쇄된, 저작권 공지, 또는 정보 연결이 들어가 있다 이 장소는 보통 정보(헤더처럼)가 들어가는 위치인데 일반적으로 그 정보는 중요하지 않거나, 웹사이트 자체에 부차적이지 않다

바닥글은 때때로 인기있는 콘텐츠에 빨리 접근하기 위해 링크를 제공함으로 SEO 목적으로 사용되곤 한다

A "typical website" could be structured something like this:

“일반적인 웹사이트”은 다음과 같이 구조화되어 있다:

HTML for structuring content

콘텐츠 구조를 위한 HTML

The simple example shown above isn't pretty, but it is perfectly fine for illustrating a typical website layout example. Some websites have more columns, some are a lot more complex, but you get the idea. With the right CSS, you could use pretty much any elements to wrap around the different sections and get it looking how you wanted, but as discussed before, we need to respect semantics and use the right element for the right job.

위에서 본 간단한 예시는 예쁘진 않지만 일반적인 웹사이트 레이아웃을 설명하기엔 매우 적합하다 어떤 웹사이트는 열을 많이 가지고 있고 일부는 많이 복잡하지만 그것들로 당신은 아이디어를 얻을 수 있다 올바른 CSS를 사용하면, 다른 부분의 주변을 감싸고 있는 요소들을 원하는 방식으로 볼 수 있지만, 이전에 논의한 것처럼, 의미를 존중하고 올바른 작업에 올바른 요소를 사용하여야 한다

This is because visuals don't tell the whole story. We use color and font size to draw sighted users' attention to the most useful parts of the content, like the navigation menu and related links, but what about visually impaired people for example, who might not find concepts like "pink" and "large font" very useful?

이것은 시각적으로 전체 이야기를 말할 수 없기 때문이다 네비게이션 메뉴 그리고 관련된 링크 같은 콘텐츠의 가장 유용한 부분에 시력이 있는 사용자의 관심을 끌기 때문에 색상과 글꼴 크기를 사용하지만, 예를 들면 “분홍” 그리고 “큰 글씨” 같은 개념을 찾지 못하는 시각 장애가 있는 분들에게는 어떤가?

Note: Roughly 8% of men and 0.5% of women are colorblind; or, to put it another way, approximately 1 in every 12 men and 1 in every 200 women. Blind and visually impaired people represent roughly 4-5% of the world population (in 2012 there were 285 million such people in the world, while the total population was around 7 billion).

참고: 대략 남자의 8%, 여자는 0.5%가 색맹이다; 또는 다른 말로 하자면 모든 12명 남자 중 1명, 200명 여자 중 1명이란 말이다 색맹 그리고 시각 장애가 있는 사람들은 대표적으로 대략 세계 인구 중에 4-5% 있다 (2012년엔 세계에서 285만 사람이 있었고, 전체 인구는 약 70억명이었다)

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content described above unambiguously, and assistive technologies like screenreaders can recognize those elements and help with tasks like "find the main navigation", or "find the main content." As we mentioned earlier in the course, there are a number of consequences of not using the right element structure and semantics for the right job.

당신의 HTML 코드 안에서, 그들의 기능성에 기반하여 콘텐츠 부분을 표시할 수 있다 - 위에서 설명한 콘텐츠의 부분을 명확하게 나타내는 요소를 사용할 수 있으며, 스크린 리더같이 보조 기술이 이러한 요소를 인식하고, “주요 콘텐츠 찾기” 또는 “주요 탐색 찾기” 와 같은 작업에 도움이 될 수 있다 이 코스에서 앞서 언급 했던 것으로, 올바른 작업을 위해 올바른 요소 구조와 의미를 사용하지 않으면 나타나는 많은 (좋지않은) 결과가 있다

To implement such semantic mark up, HTML provides dedicated tags that you can use to represent such sections, for example:

의미 표시하기를 구현하기 위해, HTML은 예시와 같이 이러한 부분을 대표하기 위해 사용하는 전용 태그를 제공한다:

header: <header>.

헤더: <header>

navigation bar: <nav>.

네비게이션 바: <nav>

main content: <main>, with various content subsections represented by <article>, <section>, and <div> elements.

주요 콘텐츠: <main>은 세부 다양한 콘텐츠인 <article>, <section> 그리고 <div> 요소를 대표한다

sidebar: <aside>; often placed inside <main>.

사이드바: <aside>; 종종 <main> 안에 들어있다

footer: <footer>.

바닥글: <footer>

Active learning: exploring the code for our example

예시를 위한 코드 탐색

Our example seen above is represented by the following code (you can also find the example in our GitHub repository). We'd like you to look at the example above, and then look over the listing below to see what parts make up what section of the visual.

위에서 본 예시(웹사이트)는 다음 코드로 볼 수 있다(또한 우리의 깃허브 저장소에서 예시를 찾을 수 있다) 위에 예시를 살펴본 다음, 아래 목록을 보고 어떤 부분이 시각적 개체의 부분을 표시하는지 확인하라

<!DOCTYPE html>

<head>

<title>My page title</title>

</head>

<body>

<h1>Header</h1>

</header>

<nav>

<ul>

<li><a href="#">Projects</a></li>

<li><a href="#">Contact</a></li>

</ul>

<form>

</form>

</nav>

<main>

<h2>Article heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

<h3>Subsection</h3>

<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

<h3>Another subsection</h3>

<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>

</article>

<aside>

<h2>Related</h2>

<ul>

<li><a href="#">Oh I do like to be beside the seaside</a></li>

<li><a href="#">Oh I do like to be beside the sea</a></li>

<li><a href="#">Although in the North of England</a></li>

<li><a href="#">It never stops raining</a></li>

</ul>

</aside>

</main>

</footer>

</body>

</html>

Take some time to look over the code and understand it — the comments inside the code should also help you to understand it. We aren't asking you to do much else in this article, because the key to understanding document layout is writing a sound HTML structure, and then laying it out with CSS. We'll wait for this until you start to study CSS layout as part of the CSS topic.

코드를 확인하고 이해하는 시간을 가져라-코드 안에 있는 주석은 이해하는데 도움이 될 것이다 우리는 이 기사에서 당신에게 무언갈 더 하라고 말하지 않는다 왜냐하면 문서 레이아웃을 이해하기 위한 열쇠는 HTML 구조를 작성한 다음 CSS로 배치하는 것이기 때문이다 CSS 주제의 일부로 CSS 레이아웃을 공부하기 시작할 때까지 기다릴 것이다

HTML layout elements in more detail

HTML 레이아웃 요소 상세

It's good to understand the overall meaning of all the HTML sectioning elements in detail — this is something you'll work on gradually as you start to get more experience with web development. You can find a lot of detail by reading our HTML element reference. For now, these are the main definitions that you should try to understand:

모든 HTML 섹션 요소의 전반적인 의미를 자세히 이해하는 것이 좋다-이것은 웹개발을 위해 더 많은 경험을 쌓기 시작하면서 점진적으로 작업할 것이다 우리의 HTML 요소 참고를 읽음으로 더 많은 상세를 찾을 수 있다 지금은, 이 주요 정의들을 이해해야 한다

<main> is for content unique to this page. Use <main> only once per page, and put it directly inside <body>. Ideally this shouldn't be nested within other elements.

<main>은 페이지의 독특한 콘텐츠를 위한 것이다 <main>은 <body>안에 직접적으로 넣고 한 페이지 당 오직 하나만 사용해라 이상적으로는 다른 요소 안에 중첩해서 사용하지 않아야 한다

<article> encloses a block of related content that makes sense on its own without the rest of the page (e.g., a single blog post).

<article>은 페이지의 나머지 부분이 없는 자체적으로 의미가 있는 관련된 콘텐츠의 블록을 감싼다(

예: 단일 블로그 게시물)

<section> is similar to <article>, but it is more for grouping together a single part of the page that constitutes one single piece of functionality (e.g., a mini map, or a set of article headlines and summaries), or a theme. It's considered best practice to begin each section with a heading; also note that you can break <article>s up into different <section>s, or <section>s up into different <article>s, depending on the context.

<section>은 <article>하고 비슷하지만 하나의 기능(예: 작은 지도, 기사의 헤드라인과 요약 세트)또는 테마를 구성하는 페이지의 단일 부분을 함께 집단화하는데 더 적합하다 각 부분을 제목으로 시작하는 것이 모범사례로 고려된다; 또한 맥락에 따라 <article>을 다른 <section>으로 나누거나<section>을 다른 <article>로 나눌 수 있다

<aside> contains content that is not directly related to the main content but can provide additional information indirectly related to it (glossary entries, author biography, related links, etc.).

<aside>는 메인 콘텐츠와 직접적으로 관현이 없고 우회적으로 연관된 정보를 추가로 제공하는 콘텐츠가 들어가 있다(용어 해설 전체, 저자 프로필, 관련 링크 등)

<header> represents a group of introductory content. If it is a child of <body> it defines the global header of a webpage, but if it's a child of an <article> or <section> it defines a specific header for that section (try not to confuse this with titles and headings).

<header>는 서문의 콘텐츠의 그룹을 대표한다 <body>의 자식인 경우 웹페이지의 전역 헤더를 정의하지만 <article>이나, <section>의 자식인 경우 해당 부분의 특정 헤더를 정의한다(titles and heading과 혼돈하지말라)

<nav> contains the main navigation functionality for the page. Secondary links, etc., would not go in the navigation.

<nav>는 페이지를 위한 주된 탐색 기능이 들어가 있다 보조 링크 등은 네비게이션에 들어가지 않을 것이다

<footer> represents a group of end content for a page.

<footer>는 페이지의 최종 콘텐츠 그룹을 대표한다

Each of the aforementioned elements can be clicked on to read the corresponding article in the "HTML element reference" section, providing more detail about each one.

앞서 언급한 각각의 요소들을 클릭하면 “HTML element reference” 부분에서 해당 기사를 읽을 수 있다 각각에 대한 자세한 내용을 제공한다

Non-semantic wrappers

비의미적인 포장지

Sometimes you'll come across a situation where you can't find an ideal semantic element to group some items together or wrap some content. Sometimes you might want to just group a set of elements together to affect them all as a single entity with some CSS or JavaScript. For cases like these, HTML provides the <div> and <span> elements. You should use these preferably with a suitable class attribute, to provide some kind of label for them so they can be easily targeted.

때때로 일부 항목과 함께 집단화하거나 콘텐츠를 포장할 이상적인 의미론적 요소를 찾을 수 없는 상황을 만날 것이다 가끔 일부 CSS 나 JavaScript 가 있는 단일 개체로서 그들 모두에게 영향을 주기 위해 일련의 요소를 함께 집단화하는 것을 원할 것이다 이와같은 경우, HTML은 <div> 그리고 <span> 요소를 제공한다 바람직하게는 적절한 class 속성과 함께 사용하여 그들이 쉽게 목표를 정할 수 있게 일종의 표시를 주어야 한다

<span> is an inline non-semantic element, which you should only use if you can't think of a better semantic text element to wrap your content, or don't want to add any specific meaning. For example:

<span>은 인라인 비의미적 요소로, 콘텐츠를 감싸기 위해 더 나은 의미가 있는 텍스트 요소가 생각나지 않을 때 또는 특별한 의미를 추가하고 싶지 않을 때만 사용해야 한다 예시:

<p>The King walked drunkenly back to his room at 01:00, the beer doing nothing to aid

him as he staggered through the door <span class="editor-note">[Editor's note: At this point in the

play, the lights should be down low]</span>.</p>

In this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. For sighted users, CSS would perhaps be used to distance the note slightly from the main text.

이 경우, 편집자의 노트는 감독의 진행을 위한 추가적인 방향을 제공해야 한다 이것은 추가적인 의미론적 의미를 가지면 안된다 시력이 있는 사용자의 경우, CSS는 아마도 본문과 약간 거리를 두는 데 사용될 것이다

<div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. For example, imagine a shopping cart widget that you could choose to pull up at any point during your time on an e-commerce site:

<div>은 블록 레벨의 비의미적 요소로, 특정한 어떤 의미를 추가하고 싶지 않을 때나 더 나은 의미론적 블록 요소를 사용할 생각이 나지 않는다면 사용해야 한다 예시로, 전자상거래 사이트에서 언제든지 가져올 수 있는 쇼핑 카트 부품을 그려보라

<h2>Shopping cart</h2>

<ul>

<li>

<p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>

</li>

<li>

…

</li>

</ul>

<p>Total cost: $237.89</p>

</div>

This isn't really an <aside>, as it doesn't necessarily relate to the main content of the page (you want it viewable from anywhere). It doesn't even particularly warrant using a <section>, as it isn't part of the main content of the page. So a <div> is fine in this case. We've included a heading as a signpost to aid screenreader users in finding it.

이것은 <aside>가 아니고, 페이지의 주요 콘텐츠와 관련되어 필요한 것도 아니다(어디서든 볼 수 있다) 페이지의 주요 콘텐츠의 일부가 아니기 때문에 <section>을 사용하는 것 조차 특별한 보증이 없다 그래서 이 경우 <div>가 맞다 스크린리더 사용자가 찾을 수 있도록 제목을 표지판으로 포함한다

Warning: Divs are so convenient to use that it's easy to use them too much. As they carry no semantic value, they just clutter your HTML code. Take care to use them only when there is no better semantic solution and try to reduce their usage to the minimum otherwise you'll have a hard time updating and maintaining your documents.

경고: Div는 편리하여 너무 쉽게 사용되곤 한다 의미가 없는 값을 가지고 있으므로, HTML 코드에 혼란을 줄 수 있다 더 나은 의미론적 해결이 없거나 최소한으로 사용하라 그렇지 않으면 갱신하고 문서를 유지하는데 어려운 시기를 보낼 것이다

Line breaks and horizontal rules

줄 바꿈과 수평 규칙

Two elements that you'll use occasionally and will want to know about are <br> and <hr>.

가끔 사용하고 알고 싶은 두 요소는 <br> 그리고 <hr>이다

<br>: the line break element

<br>: 줄 바꿈 요소

<br> creates a line break in a paragraph; it is the only way to force a rigid structure in a situation where you want a series of fixed short lines, such as in a postal address or a poem. For example:

<br>은 한 단락안에 줄 바꿈을 만든다; 시 또는 우편 주소같은 일련의 고정된 짧은 줄을 원하는 상황에서 단단한 구조를 강제하는 유일한 방법이다

<p>There once was a man named O'Dell<br>

Who loved to write HTML<br>

But his structure was bad, his semantics were sad<br>

and his markup didn't read very well.</p>

Without the <br> elements, the paragraph would just be rendered in one long line (as we said earlier in the course, HTML ignores most whitespace); with <br> elements in the code, the markup renders like this:

<br> 요소 없이는, 하나의 긴 줄 안에 표현됐을 것이다(이 코스에서 앞서 말한 대부분 공백을 무시하는 HTML); 코드 안에 <br> 요소를 사용하면 다음과 표시되어 보여질 것이다

<hr>: the thematic break element

<hr>: 주제별 브레이크 요소

<hr> elements create a horizontal rule in the document that denotes a thematic change in the text (such as a change in topic or scene). Visually it just looks like a horizontal line. As an example:

<hr> 요소는 문서 안에 텍스트의 주제별 변화를 표시하는 수평 규칙을 만든다(장면이나 주제 변화 같은) 시각적으로 단지 수평한 줄로 보인다 예시처럼:

<p>Ron was backed into a corner by the marauding

netherbeasts. Scared, but determined to protect his friends, he raised his

wand and prepared to do battle, hoping that his distress call had made it through.</p>

<hr>

<p>Meanwhile, Harry was sitting at home, staring at his royalty statement

and pondering when the next spin off series would come out, when an enchanted

distress letter flew through his window and landed in his lap. He read it

hazily and sighed; "better get back to work then", he mused.</p>

Would render like this:

이렇게 보여지게 된다:

Planning a simple website

간단한 웹사이트 계획세우기

Once you've planned out the structure of a simple webpage, the next logical step is to try to work out what content you want to put on a whole website, what pages you need, and how they should be arranged and link to one another for the best possible user experience. This is called Information architecture. In a large, complex website, a lot of planning can go into this process, but for a simple website of a few pages, this can be fairly simple, and fun!

언젠가 간단한 웹페이지의 구조를 계획하고, 다음 논리적인 단계는 전체 웹사이트 안에 원하는 콘텐츠를 넣어 작동시키는 것, 어떤 페이지가 필요한지, 가능한 최상의 사용자 경험을 위해 어떻게 배치하고 서로 연결할지 알아보아야 한다 이것은 정보 아키텍쳐라고 불린다 크고 복잡한 웹사이트는 많은 계획이 이 과정안에 들어갈 수 있지만, 몇 페이지의 간단한 웹사이트를 위해서는 이것은 상당히 간단하고 재미있다!

Bear in mind that you'll have a few elements common to most (if not all) pages — such as the navigation menu, and the footer content. If your site is for a business, for example, it's a good idea to have your contact information available in the footer on each page. Note down what you want to have common to every page.

대부분의 페이지(전체가 아니더라도)에 공통된 몇가지 요소들을 가져야 하는 걸 명심하라-네비게이션 매뉴와 바닥글 콘텐츠와 같은 사이트가 사업을 위한 것이라면 예시로, 각 페이지 바닥글에 연락처 정보를 넣는 것이 좋은 생각이다 모든 페이지에서 공통적으로 하고 싶은 걸 적어라

Next, draw a rough sketch of what you might want the structure of each page to look like (it might look like our simple website above). Note what each block is going to be.

다음으로, 당신이 원하는 페이지의 각 구조가 어떻게 보일지 대강으로 그려보라(위에 간단한 웹사이트 같이 보일 수 있다) 각 블록이 어떻게 될지 그려보라

Now, brainstorm all the other (not common to every page) content you want to have on your website — write a big list down.

이제, 웹사이트에 가지길 원하는 다른(모든 페이지에 공통되지 않은) 모든 콘텐츠를 브레인스토밍하라-큰 리스트를 적어보라

Next, try to sort all these content items into groups, to give you an idea of what parts might live together on different pages. This is very similar to a technique called Card sorting.

다음, 이러한 모든 콘텐츠 요소를 그룹으로 정렬하고, 어떤 부분이 다른 페이지에 함께 살 수 있는지에 대한 아이디어를 가지라 이것은 카드 정렬이라 불리는 기술과 매우 비슷하다

Now try to sketch a rough sitemap — have a bubble for each page on your site, and draw lines to show the typical workflow between pages. The homepage will probably be in the center, and link to most if not all of the others; most of the pages in a small site should be available from the main navigation, although there are exceptions. You might also want to include notes about how things might be presented.

이제 사이트맵을 대략적으로 스케치하라-사이트 안 각 페이지가 버블을 가질 수 있고 페이지 사이 일반적인 작업 흐름을 보여줄 수 있는 줄을 그려라

홈페이지는 아마도 중앙에 위치하고 다른 모든게 아니더라도 대부분과 연결될 것이다; 작은 사이트에 페이지의 대부분은 비록 예외가 있지만, 메인 탐색에서부터 사용가능해야 한다 어떻게 제시할지에 대한 메모를 포함할 것이다

Active learning: create your own sitemap

자신만의 사이트맵을 만들어라

Try carrying out the above exercise for a website of your own creation. What would you like to make a site about?

자신만의 창조물인 웹사이트를 위한 위에 연습을 해보라 무엇에 관련된 사이트를 만들고 싶은가?

Note: Save your work somewhere; you might need it later on.

참고: 어딘가에 본인의 작업을 저장하라; 나중에 필요할 수도 있다

Summary

요약

At this point, you should have a better idea about how to structure a web page/site. In the last article of this module, we'll learn how to debug HTML.

중점은, 웹페이지/사이트를 구성하는 방법을 잘 알고 있어야 한다 이 모듈의 마지막 기사에서는, HTML 디버깅 방법을 배울 것이다