Category: Web Design

HTML 레이아웃 요소 구성하기
Heading은 문서에서 새로운 섹션(new section)이나 하위 섹션(sub-section)의 시작을 정의 할 때 완벽하게 효율적인 접근이지만, 더 명확하고 정확한 의미 구조(semantic structure)를 확립하기 위해 잘못 사용될 수 있는 여지가 있습니다.

div 엘리먼트는 주로 CSS를 걸 수 있는 스캐폴딩(scaffolding)으로 사용되는 섹션을 포함하는 데 사용할 수 있지만 큰 의미는 없습니다. 단면 처리(sectioning)에는 기사(articles), 머리글(headers), 바닥 글(footers) 및 내비게이션(navigation)과 같이 페이지의 특정 부분을 정의하는 데 사용할 수 있는 몇 개의 태그가 포함됩니다.

Articles과 Sections

article 요소는 독립형 콘텐츠 섹션을 마크업하는 데 사용할 수 있습니다. 예를 들어 블로그 게시물을 기사로 생각하거나 많은 기사가 담긴 전통적인 신문 페이지를 복제하는 경우 여러 번 생각하면 이 작업은 한 번만 사용할 수 있습니다.

섹션 요소는 보다 일반적인 섹션을 나타내며 예를 들어 기사를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.
```
<article>
    <section id="intro">
        <p>[An introduction]</p>
    </section>
    <section id="main_content">
        <p>[Content]</p>
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>
```
div가 이러한 분리를 만드는 데 사용될 수 있지만 ( 또는 스타일링을 위해 이러한 구분이 필요하지 않은 경우에도 ) 훨씬 풍부하고 의미 있는 문서를 제공합니다.

Caution: HTML5 사양은 각 섹션의 시작 부분에 h1 요소를 사용할 수 있음을 제안합니다. 이 요소는 해당 섹션 앞의 모든 항목의 하위 제목이 됩니다. ( 위의 예에서 h1이 오프닝 article 태그 바로 다음에 오는 경우 html은 오프닝 섹션 태그 바로 다음에 해당 초기 h1의 하위 제목이됩니다.)
그러나 이 나사는 이전 버전과의 호환성을 보장하지 않으며 이를 이해하지 못하는 사용자 에이전트 (스크린 리더 포함)는 제대로 구조화된 제목 수준을 적용하지 않습니다. 섹션을 사용하지 않았다면 사용할 표제 수준을 고수하는 것이 좋습니다. (예 : 섹션 1과 관계없이 h2 등). 이것은 무엇인가를 망가뜨리거나 의미 나 의미를 손상시키지 않습니다.

Headers와 Footers

머리글(Headers)과 바닥 글(Footers)은 보다 전문화되고 자체 설명이 가능한 섹션을 제공합니다.
```
<body>
    <article>
        <header>
            <h1>Alternatively…</h1>
            <p>[An introduction]</p>
        </header>
        <section id="main_content">
            <p>[Content]</p>
        </section>
        <footer>
            <p>[End notes]</p>
        </footer>
    </article>
    <footer>
        <p>[Copyright bumf]</p>
    </footer>
</body>
```
바닥 글(Footers)은 포함되어있는 섹션의 꼬리말입니다. 위의 예에서 첫 번째 바닥 글은 집필의 바닥 글이고 두 번째 바닥 글은 페이지의 바닥 글입니다.

Asides

Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.
```
<section id="main_content">
    <h1>Tixall</h1>
    <p>[All about Tixall]</p>
    <aside>
        <h2>Tixall Obelisk</h2>
        <p>[A short note about Tixall Obelisk]</p>
    </aside>
    <p>[Maybe a bit more about Tixall]</p>
</section>
```
Aside는 콘텐츠를 둘러싼 콘텐츠와 관련된 콘텐츠를 나타내는 데 사용할 수 있습니다.
Article에서 관련 정보의 인용 내용 또는 미리보기를 생각해보십시오.

우리가 이 구조에 집중하는 동안,
figures를 포함 시키려면, 그 일을하기위한 두 개의 태그가있을 수 있습니다.
```
<figure>
    <img src="pictures.jpg">
    <figcaption>My Birthday Party</figcaption>
</figure>
```
img 요소는 alt 속성이 필요 없다는 것을 명심하십시오. figcaption (맞춤법이 필요한 경우 “figure caption”)이 해당 작업을 수행하면됩니다.

Navigation

마지막으로 내비게이션 링크 그룹을 마크업하는 데 사용되는 nav가 있습니다.
```
<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>
```
Note: 이는 또한 페이지 내 내비게이션 (<a href=”#overthere”> … 등)에도 사용될 수 있지만 모든 그룹 링크에 필요하지는 않으며 주요 그룹으로 설계되었습니다. 예를 들어, 저작권(copyright), 저자(author) 및 연락처 링크(contact link)는 바닥 글 요소(footer element)에 단독으로 배치할 수 있습니다.

Caution: 이러한 새로운 HTML 5 요소의 스타일을 지정하려면 (예 : <div id = “content”> … 등을 사용하는 것보다 훨씬 낫습니다) 이전 버전의 브라우저, 특히 Internet Explorer에서 문제가 발생할 것입니다 버전 8 이하는 이러한 태그를 이해하지 못합니다. 그러나 HTML5 Shiv가 문제를 해결할 수 있습니다. head 부분에 삽입 된 작은 Javascript로, 브라우저를 새로운 HTML 5 태그를 사용할 수 있도록 CSS의 다양한 속성까지 스타일을 지정할 수 있습니다.

DEMO →
2017년 03월 27일

HTML 레이아웃 구성 태그

HTML Tag : article

독립적인 HTML 문서의 독립 섹션. 예를 들어 블로그 게시물을 기사로 생각하면 이 요소를 한 번만 사용할 수 있습니다. 많은 기사가 포함된 전통적인 신문 페이지를 복제한다고 생각하면 여러 번 사용할 수 있습니다.

<h1>The Daily News</h1>

<article>
    <h2>Man Eats House</h2>
    <!-- article content -->
</article>

<article>
    <h2>Martian Mice Invade Ecuador</h2>
    <!-- article content -->
</article>

<h1>The Daily News</h1>

<article>
    <h2>Man Eats House</h2>
    <!-- article content -->
</article>

<article>
    <h2>Martian Mice Invade Ecuador</h2>
    <!-- article content -->
</article>

HTML Tag : section

HTML 문서의 일반적인 섹션을 예를 들어, 기사(articles)를 분할하거나 챕터(chapters)를 나타내는 데 사용할 수 있습니다.

<article>
    <section id="intro">
        <!-- An introduction -->
    </section>
    <section id="main_content">
        <!-- Main content -->
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>

<article>
    <section id="intro">
        <!-- An introduction -->
    </section>
    <section id="main_content">
        <!-- Main content -->
    </section>
    <section id="related">
        <ul>
            <li><a href="that.html">That related article</a></li>
            <li><a href="this.html">This related article</a></li>
        </ul>
    </section>
</article>

Note: 전역 속성(Global Attributes)

HTML Tag : header

소개 콘텐츠 또는 내비게이션 기능이 포함 된 페이지 또는 섹션의 머리글(headers)입니다.

<body>
    <header>
        <!-- A header for the page. -->
    </header>

    <section>
        <header>
            <!-- A header for the section. -->
        </header>
    </section>
</body>

<body>
    <header>
        <!-- A header for the page. -->
    </header>

    <section>
        <header>
            <!-- A header for the section. -->
        </header>
    </section>
</body>

HTML Tag : footer

페이지 또는 섹션의 바닥 글(footers). 여기에는 포스트 스크립트, 부록 또는 관련 페이지에 대한 링크와 같은 내용이 포함될 수 있습니다.

<body>
    <section>
        <!-- stuff -->
        <footer>
            <!-- A footer for the section. -->
        </footer>
    </section>

    <footer>
        <!-- A footer for the page. -->
    </footer>
</body>

<body>
    <section>
        <!-- stuff -->
        <footer>
            <!-- A footer for the section. -->
        </footer>
    </section>

    <footer>
        <!-- A footer for the page. -->
    </footer>
</body>

HTML Tag : aside

콘텐츠를 둘러싼 콘텐츠와 관련이 있지만, 콘텐츠와 별개입니다. 기사(articles)에서 관련 정보의 인용 글 또는 미리보기는 aside 태그로 마크업 할 수 있는 콘텐츠의 예입니다.

<section id="main_content">
    <h1>Tixall</h1>
    <!-- All about Tixall -->
    <aside>
        <h2>Tixall Obelisk</h2>
        <!-- A short note about Tixall Obelisk -->
    </aside>
    <!-- A bit more about Tixall -->
</section>

<section id="main_content">
    <h1>Tixall</h1>
    <!-- All about Tixall -->
    <aside>
        <h2>Tixall Obelisk</h2>
        <!-- A short note about Tixall Obelisk -->
    </aside>
    <!-- A bit more about Tixall -->
</section>

HTML Tag : nav

내비게이션 영역 – 다른 페이지 또는 페이지의 섹션에 대한 주요 연결 그룹입니다.

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>

<nav id="main_nav">
    <ul>
        <li><a href="/tutorials/">Tutorials</a></li>
        <li><a href="/techniques/">Techniques</a></li>
        <li><a href="/examples/">Examples</a></li>
        <li><a href="/references/">References</a></li>
    </ul>
</nav>

HTML Tag : figure

그림(Figure). 일반적으로 페이지의 주 콘텐츠에서 참조되는 자체 포함 된 설명 콘텐츠. 관련 사진이나 차트를 원하는 곳에 사용됩니다.

<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

<figure>
    <img src="obelisk.jpg">
    <figcaption>Tixall Obelisk</figcaption>
</figure>

2017년 03월 27일

HTML 레이아웃 표현 방법 III

페이지 레이아웃 1 : 2 columns – 1 단계 : 네비게이션 열의 위치 지정.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page layout 1</title>
    <style>
        body {
            font: 80% arial, helvetica, sans-serif;
            margin: 0;
        }
        
        #navigation {
            position: absolute;
            left: 0;
            width: 15em;
        }

        #content {
            color: #ccc;
        }
        
        
    </style>
</head>
<body>

    <div id="navigation">
        <ul>
            <li><a href="">Biology</a></li>
            <li><a href="">Evolution</a></li>
            <li><a href="">Natural Selection</a></li>
            <li><a href="">Genetics</a></li>
        </ul>
        <ul>
            <li><a href="">Erasmus Darwin</a></li>
            <li><a href="">Lamarck</a></li>
            <li><a href="">Charles Darwin</a></li>
            <li><a href="">Wallace</a></li>
            <li><a href="">Dawkins</a></li>
        </ul>
    </div>

    <div id="content">
        <h2>On the Origin of The Origin</h2>
        <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
        <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
        <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>

        <h2>The Origin</h2>
        <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
        <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
        <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
        <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>

        <h2>After The Origin</h2>
        <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
    </div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page layout 1</title>
    <style>
        body {
            font: 80% arial, helvetica, sans-serif;
            margin: 0;
        }
        
        #navigation {
            position: absolute;
            left: 0;
            width: 15em;
        }

        #content {
            color: #ccc;
        }
        
        
    </style>
</head>
<body>

    <div id="navigation">
        <ul>
            <li><a href="">Biology</a></li>
            <li><a href="">Evolution</a></li>
            <li><a href="">Natural Selection</a></li>
            <li><a href="">Genetics</a></li>
        </ul>
        <ul>
            <li><a href="">Erasmus Darwin</a></li>
            <li><a href="">Lamarck</a></li>
            <li><a href="">Charles Darwin</a></li>
            <li><a href="">Wallace</a></li>
            <li><a href="">Dawkins</a></li>
        </ul>
    </div>

    <div id="content">
        <h2>On the Origin of The Origin</h2>
        <p>Darwin's father was dead set on his son becoming a cleric but even though the young rapscallion began to study theology he found worms much more interesting.</p>
        <p>When a lonely man with a moustache asked Darwin to ride with him on his boat named after a dog, Darwin agreed and set off around the world fiddling with wildlife.</p>
        <p>Some say it was a load of birds from a bunch of islands hundreds of miles off the Ecuadorean coast that inspired his now widely accepted explanation of the mechanism of evolution. "Why does that bird on that island have a beak like that while that finch on that island has a beak like that? AHA! I've got it! Natural Selection!" he thought. It wasn't actually quite like that, but, y'know, it's a fine, popular romantic myth.</p>

        <h2>The Origin</h2>
        <p>Upon return from his jaunt, Charles chronicled his escapades (as <em>The Voyage of the Beagle</em>) and got a bit carried away with barnacles, although his theory of evolution was always ticking away in the back of his mind.</p>
        <p>Some 20 or so year after he returned to England, a Welsh naturalist by the name of Wallace popped up with a similar idea to Darwin's grand theory. Darwin got a move on.</p>
        <p>In 1858 a paper jointly attributed to Darwin and Wallace was presented to the Linnean Society of London that sent rumbles across the establishment and really ticked off a fair few people. The next year saw the publication of Darwin's 500-page "abstract" - <em>On The Origin of Species by Means of Natural Selection or the Preservation of Favoured Races In The Struggle For Life</em> (or <abbr>OTOOSBMONSOTPOFRITSFL</abbr> for short).</p>
        <p>Darwin, already a prominent arc in scientific circles, was propelled into megastardom.</p>

        <h2>After The Origin</h2>
        <p>Chuck D revised The Origin five times, toning down each one a bit more than the one before it, partly to appease his religious wife. Who also happened to be his cousin. But some years later he'd had enough of trying to disguise the logical conclusion that humans are descended from the same common ancestor as all other animals and his third classic, <em>The Descent of Man</em>, was published and <em>really</em> pissed off the religious establishment.</p>
    </div>

</body>
</html>

Category: Web Design

Articles과 Sections

Headers와 Footers

Asides

Navigation

HTML Tag : article

HTML Tag : section

HTML Tag : header

HTML Tag : footer

HTML Tag : aside

HTML Tag : nav

HTML Tag : figure

페이지 레이아웃 1 : 2 columns – 1 단계 : 네비게이션 열의 위치 지정.

페이지 레이아웃 2 : 2 columns – 2 단계 : 여백을 사용하여 네비게이션 열 아래에서 콘텐츠를 밀어냅니다.

페이지 레이아웃 3 : 테두리를 사용하여 열의 배경을 제공합니다.

페이지 레이아웃 4 : 3 columns

페이지 레이아웃 5 : 헤더(Header) 추가

페이지 레이아웃 6 : Footer은(는) 절대 위치(absolute)의 열(columns)과 항상 작동하지 않습니다.

페이지 레이아웃 7 : 플로팅 된 열(columns)을 사용하여 Footer 추가

찰스 다윈 (Charles Darwin) : 이전 예제의 기본 원리를 스타일 업 한 버전입니다.

2D Transforms : 변형 속성을 사용하여 상자의 크기, 모양 및 위치 조작

Transform origin : 변환이 측정되는 지점을 변경합니다.

위치 지정(Positioning) : 정적(static) : 정상적인 흐름을 따르기~

위치 지정(Positioning) : 상대적(relative) : 상자의 초기 위치에서 오프셋(Offsetting)

위치 지정(Positioning) : 절대(absolute) 1 : 상자의 컨테이너를 기준으로 배치

위치 지정(Positioning) : 절대(absolute) 2 : 배치 된 상자 내부

위치 지정(Positioning) : 고정(fixed) : 뷰포트를 기준으로 함

z- index : 배치 된 상자에 쌓입니다. (Stacking)

플로팅(Floating) 1 : 간단한 플로트(float) 박스

플로팅(Floating) 2 : 두 개의 플로팅 박스

플로팅(Floating) 3 : 떠 다니는 상자 지우기(Clear)

너비(Widths) 및 높이(Heights) : width, height, max-width, min-height 등.

테두리(Borders) : Thick, thin, this color, that color, solid, dotted, dashed…

둥근 모서리(Rounded corners) : border-radius 속성 사용.

박스 그림자(Box shadows) : pop 추가.

여백 축소(Margin collapsing) : 수직 여백이 서로 병합 또는 “collapse”되는 방식.

윤곽선(Outlines) : 테두리의 “경계선”

오버플로(Overflows) : 상자 안에 들어 가지 않는 콘텐츠 부분을 관리

블록(Block) 및 인라인(Inline) 1 : display 속성을 사용하여 상자의 비헤이비어(behavior) 변경.

블록(Block) 및 인라인(Inline) 2 : 블록 및 인라인 상자 간의 차이가 더 큽니다.

블록(Block) 및 인라인(Inline) 3 : display: inline-block 적용

텍스트 상자(Text boxes) : 텍스트 및 암호 유형 input 요소.

확인란(Checkboxes) 및 라디오 버튼(Radio buttons) : input 요소 유형이 많습니다.

파일 입력(File input) : 업로드 용.

텍스트 영역(Text areas) : textarea 요소입니다.

선택 상자(Select boxes) : select 및 option 요소의 기본 사용.

선택 상자 옵션 그룹 : optgroup 요소 사용.

다중 선택 선택 상자 : multiple 속성 사용.

기본 테이블(Basic table) : table, tr 및 td 요소

머리글 셀(Header cells) : th 요소.

셀 병합(Merging cells) 1 : rowspan 속성.

셀 병합(Merging cells) 2 : colspan 속성.

테두리 축소(Border collapsing) 1 : 표 셀 테두리 축소.

테두리 축소(Border collapsing) 2 : 표 셀 테두리 및 표 테두리 축소.

열 그룹(Column groups) : col 및 colgroup 요소

빈 셀(Empty cells) : 빈 셀(empty-cells) 속성을 사용하여 빈 셀을 표시하는 방법을 지정합니다.

자동 테이블 레이아웃(Automatic table layout) : 테이블이 사용하는 기본 레이아웃 알고리즘.

고정 테이블 레이아웃(Fixed table layout) : table-layout 속성을 사용하여 설정합니다.

기본 목록 : ul, ol 및 li 요소 만들기.

중첩 목록 : 내부 목록을 나열하기.

설명 목록 : dl, dt 및 dd

목록 표시자 : 목록 스타일 유형을 사용하여 글 머리 기호 및 번호 매기기 변경.

목록 항목 표시자에 이미지 : list-style-image 사용.

내부 및 외부 목록 표시자 : list-style-position 사용.

드롭 다운 1(Dropdown menu) : 드롭 다운 메뉴의 기본 사항.

드롭 다운 2(Dropdown menu) : 간단한 멀티 레벨 드롭 다운 메뉴.

드롭 다운 3(Dropdown menu) : 보다 세부적인 디자인의 멀티 레벨 드롭 다운.

인라인 탭(Inline tabs) : 디스플레이 속성을 사용하는 기본 탭 탐색.

플로팅 탭(Floated tabs) : float 속성을 사용하는 기본 탭.

탭(tab style) 더보기 : 탭을 탭처럼 만들기.

더 많은 탭 : 대체 탭(Alternative tab) 스타일.

Skinny tabs : 간단한 밑줄 사용.

Fancy tabs : CSS로 만들기

Show / hide navigation(JavaScript) : JavaScript를 사용하여 표시를 전환합니다.

Show / hide navigation (target) : 가상 클래스( :target )를 사용하여 상태를 토글합니다.

Underlines : text-decoration, border-bottom 및 background-image를 사용하여 밑줄을 긋는 방법 (일반적인 링크).

Anchors(앵커) 및 Targets(타겟) : 페이지의 일부에 링크하고 : target 의사 클래스(pseudo class)를 사용하여 스타일을 지정합니다.( pseudo classes : 의사클래스 또는 가짜 클래스 )

Rollover 1 : 마우스를 사용하여 커서를 움직일 때 변경되는 그래픽 링크 : 호버

Rollover 2 : : active 의사 클래스(pseudo class)를 사용하여 대화 형 효과를 추가합니다.

Rollover 3 : Fading in 및 Fading out