06 문단과텍스트요소

01. html5 기본 구조

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>페이지타이틀</title>
8
</head>
9
<body>
10
  <h1>여기는 제목 입니다</h1>
11
  <p>여기는 문장입니다</p>
12
</body>
13
</html>

정보

👁️‍🗨️

<!DOCTYPE> : 현재 문서가 HTML 문서 타입을 명시한다. (HTML5 문서 타입은 <!DOCTYPE html> 이다.) <html> : HTML 문서의 루트(root) 요소를 정의한다. <head> : HTML 문서의 메타데이터(metadata)를 정의한다.

메타데이터(metadata)란 HTML 문서에 대한 정보(data)로 웹 브라우저에는 직접적으로 표현되지 않는 정보를 의미한다.
이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현할 수 있다. <title> : HTML 문서의 제목(title)을 정의하며, 다음과 같은 용도로 사용된다.
웹 브라우저의 툴바(toolbar)에 표시된다.
웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 된다.
검색 엔진의 결과 페이지에 제목으로 표시된다. <body> : 웹 브라우저를 통해 보이는 내용(content) 부분이다.

02. charset

정보

💡 <meta charset="utf-8"> 태그는 html 파일의 인코딩을 알려주는 태그입니다. 인코딩을 명확하게 알려주지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못하는 경우도 많습니다.

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
  <meta charset="euc-kr">
6
   <title>아주 간단한 HTML 문서 예</title>
7
</head>
8
<body>
9
    <h1>문서제목을 요기다 입력</h1>
10
    <p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p>
11
</body>
12
</html>

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
  <meta charset="UTF-8">
6
    <title>아주 간단한 HTML 문서 예</title>
7
</head>
8
<body>
9
    <h1>문서제목을 요기다 입력</h1>
10
    <p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p>
11
</body>
12
</html>

03. 제목 요소

*h$6 콘텐츠의 제목을 표시할때는 Heading을 의미하는 H 태그를 씁니다. H태그는 제목의 중요도에 따라 1~6 단계로 나뉩니다.

문서에서 h1은 한개만 사용하세요
스크린 리더기에서는 제목의 수준으로 이동할수 있기 때문에 제목태그의 위계순으로 정의하는 것이 좋습니다.

정보

👁️‍🗨️ 설계단계에서 콘텐츠의 위계관계를 분류하고 그에 맞는 중요도의 요소로 마크업해야 합니다

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>제목 요소</title>
6
</head>
7
<body>
8
    <h1>반응형 웹사이트 제작1</h1>
9
    <h2>반응형 웹사이트 제작2</h2>
10
    <h3>반응형 웹사이트 제작3</h3>
11
    <h4>반응형 웹사이트 제작4</h4>
12
    <h5>반응형 웹사이트 제작5</h5>
13
    <h6>반응형 웹사이트 제작6</h6>
14
</body>
15
</html>

04. 엔티티코드

정보

👁️‍🗨️ 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 키보드 체계가 다른 나라에서도 같은 특수문자를 보여줄수 있어요

1
<!DOCTYPE HTML>
2
<html>
3
<head>
4
  <title> Entity  코드를 이용한 공백 문자 및 특수 문자 삽입 </title>
5
  <meta charset="UTF-8" />
6
</head>
7

8
<body>
9
  <h1> Entity  코드를 이용한 공백 문자 및 특수 문자 삽입 </h1>
10
  <h2>수업료 &rarr; &#8361;500</h2>
11
  <p>서울시 강남구 한강동 . 김망고&amp;선생님&nbsp;&nbsp;&nbsp;&lt;TEL:02-1234-1234&gt;<br />
12
COPYRIGHT&copy;2019 Mango Publishing Group ALL RIGHTS RESERVED.</p>
13
</body>
14
</html>

https://entitycode.com/

05. 문단요소

https://docs.google.com/document/d/1PA_hE89Cs07cyHn_5mZFX5yV7Vhw3WOrBwfWBhHvm30/edit#heading=h.a5j68g3ffumt

정보

👁️‍🗨️ 문단을 표시하는 p

paragraph

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>단락 요소</title>
6
</head>
7
<body>
8
    <p>p 요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블록 요소는
9
    포함할 수 없습니다.</p>
10
    <p>p 요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블록 요소는<br>포함할 수 없습니다.</p>
11
</body>
12
</html>

정보

👁️‍🗨️ 작성한대로 표시하는 pre

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>pre 요소</title>
6
</head>
7
<body>
8
    <pre>
9
        p 요소는 텍스트와 인라인 요소를 포함할 수 있지만
10
            같은 블록 요소는
11
                포함할 수 없습니다.
12
    </pre>
13
</body>
14
</html>

06. 주소요소

정보

👁️‍🗨️ 주소를 표시하는 address HTML 문서의 소유자나 조직에 대한 연락처 정보를 정의할때 사용하는 태그

경기도 부천시 오징구 삼정동 297-5
이메일 : qwerew0@gmail.com
전화번호 : 000-674-5685 메시지보내기 : 000-674-5685

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>연락처 정보</title>
6
</head>
7
<body>
8
    <address>
9
       경기도 부천시 오징구 삼정동 297-5 <br>
10
        이메일 : <a href="mailto: qwerew0@gmail.com">qwerew0@gmail.com</a> <br>
11
        전화번호 :<a href="tel:010-986-2684"> 000-674-5685</a>
12
        메시지보내기 :<a href="sms:010-986-2684"> 000-674-5685</a>
13
    </address>
14
</body>
15
</html>

07. 텍스트 관련 태그들

정보

👁️‍🗨️ 텍스트 관련 태그

종류	의미	표시
blockquote	인용문을 나타냅니다	들여쓰기 됨,
스크린리더기에서 인용문처럼 읽어줌
em	강조	이탤릭체
스크린리더기에서 강조해서 읽어줌
i		이탤릭체
strong	강조	굵은글씨
스크린리더기에서 강조해서 읽어줌
b		굵은글씨
mark		형광펜으로 칠한 효과
small	주의사항, 법적제한, 저작권	작은글씨
sub	아래첨자	아래첨자
sup	위첨자	위첨자
hr		수평선

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <title>텍스트 관련 요소들</title>
6
  </head>
7
  <body>
8
    <h1>청춘예찬</h1>
9
    <p>밝은 그것을 투명하되 이 수 약동하다. 더운지라 바이며, 가는 기관과 피가 것이다. 보는 가진 크고 과실이 가슴에 피다.</p>
10
    <p>청춘의 없으면 피가 보내는 이 두손을 밥을 지혜는 보이는 칼이다. 곳이 소금이라 피고 이상의 얼마나 이것이다.</p>`
11
    <p>아니더면, 가장 우리 꾸며 노년에게서 얼음과 이상, 그들은 예가 말이다. 방황하여도, 아니한 피어나는 청춘 아니다.</p>
12
    <p>천하를 가지에 되는 유소년에게서 풀이 원질이 살 듣는다. 거선의 그들의 미인을 청춘이 예수는 돋고, 더운지라 것이다. 따뜻한 속에 예수는 아니다.</p>
13
    <p>인간이 피는 봄날의 아름답고 소금이라 그들의 열락의 끓는 피다. 이것이야말로 않는 주며, 청춘을 목숨을 그것을 천고에 것이다.</p>
14
  </body>
15
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
  <head>
4
    <meta charset="UTF-8" />
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
    <title>텍스트관련 요소들</title>
8
  </head>
9
  <body>
10
    <h1>청춘예찬</h1>
11
    <h2>인용문-blockquote</h2>
12

13
      <blockquote>
14
          일월과 소담스러운 있을 풀이 온갖 우리는 그들의 그들의 것은 힘있다. 고동을
15
          뼈 길을 내려온 날카로우나 가슴이 뿐이다.
16
      </blockquote>
17
    <hr/>
18
    <p>
19
      것이 <em>청춘은</em> 그것을 <i>그와</i> 고동을 있을 인생의 어디 끝에 부패뿐이다. 그것을
20
      피어나는 피고 <strong>모래뿐일</strong> 인생에 따뜻한 <b>인생의</b> 피가 그리하였는가? 열락의
21
      인간이 평화스러운 이상이 무엇을 무한한 창공에 그러므로 있는가? 있는 인생을
22
      풀이 그것은 속<address>에서 거친 이것이다.</address>
23
    </p>
24
    <hr/>
25
    <p>
26
      불어 <mark>창공에 이상</mark> 지혜는 인간의 들어 <small>피부가</small> 보내는 그들에게 봄바람이다.
27
      생의 있는 그와 <sub>반짝이는</sub> 찬미를 <sup>유소년에게서</sup> 이상 것이다.
28
    </p>
29
  </body>
30
</html>

그림처럼 코딩하세요

08. 하이퍼링크

정보

👁️‍🗨️ anchor 의 약자로 하이퍼링크를 걸어주는 태그

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>링크</title>
6
</head>
7
<body>
8
    <h1>a 태그</h1>
9
    <a href="http://icoxpublish.com/">아이콕스</a>
10
    <a href="mailto:icoxpub@naver.com">icoxpub@naver.com</a>
11
    <a href="#">
12
        <section>
13
            <h2>새로나온책</h2>
14
            <p>반응형 웹퍼블리싱</p>
15
        </section>
16
    </a>
17
    <a href="#content">본문바로가기</a>
18
    <p id="content">본문내용</p>
19
</body>
20
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>링크</title>
6
</head>
7
<body>
8
    <a href="http://icoxpublish.com" target="_blank">아이콕스</a>
9
    <a href="#" onclick="window.open('http://icoxpublish.com');return false" title="새 창">아이콕스</a>
10
</body>
11
</html>

정보

👁️‍🗨️ _blank 속성을 사용하여 새창으로 링크 할때는 꼭 title="새창열림"을 이용하여 접근성을 높여주세요

09. 이미지

정보

👁️‍🗨️ alt의 3가지 용법

접근성 향상
스크린리더기가 alt 속성을 음성으로 읽어줍니다
SEO (search engine optimization)
검색엔진에 이미지의 정보를 알려줍니다
대체텍스트
이미지가 안뜰 경우 alt 속성이 대신 화면에 보입니다 💢 img 태그는 inline-block 속성입니다. 요소의 바깥은 inline 안쪽은 block 이므로 inline 요소 처럼 화면에 옆으로 표시되며 block 요소처럼 크기를 가질수 있습니다.

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>이미지</title>
6
</head>
7
<body>
8
    <h1><img src="images/img1.png" alt="로고"></h1>
9
    <a href="#"><img src="images/img2.png" alt="화이트스타"></a>
10
</body>
11
</html>

10. 경로

정보

💡

😀예제파일

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Document</title>
8
</head>
9
<body>
10
    <img src="./src/pic4.jpg" alt="">
11
    <img src="src/images/prince/pic1.jpg" alt="차은우">
12
    <img src="src/images/prince/pic2.jpg" alt="차은우">
13
    <img src="src/images/prince/pic3.jpg" alt="차은우">
14
</body>
15
</html>

diagrams.net 링크

😜문제

11. 목록요소

정보

👁️‍🗨️ 목록을 표시하는 태그

태그	설명	문법
ol	Ordered List 의 약자 : 순서가 있는 목록	자식으로 li 만 허용
ul	Unordered List 의 약자 : 순서가 없는 목록	자식으로 li 만 허용
dl	Description List 의 약자 : 설명목록	▪ dl>dt+dd
▪ dt,dd 는 최소 한쌍

Ol

1
<!DOCTYPE html>
2
<html lang="ko">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <title>순서 목록</title>
7
</head>
8

9
<body>
10
    <h1>반응형 웹퍼블리싱 학습 순서</h1>
11
    <ol>
12
        <li>html</li>
13
        <li>css</li>
14
        <li>javascript</li>
15
        <li>jquery</li>
16
        <li>exercise</li>
17
    </ol>
18
</body>
19

20
</html>

Ul

1
<!DOCTYPE html>
2
<html lang="ko">
3

4
<head>
5
    <meta charset="UTF-8">
6
    <title>비순서 목록</title>
7
</head>
8

9
<body>
10
    <h1>반응형 웹퍼블리싱 교과목</h1>
11
    <ul>
12
        <li>html</li>
13
        <li>css</li>
14
        <li>javascript</li>
15
        <li>jquery</li>
16
    </ul>
17
</body>
18

19
</html>

투뎁스

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>2단 메뉴</title>
6
</head>
7
<body>
8
    <ul>
9
        <li><a href="#">메뉴1</a></li>
10
        <li><a href="#">메뉴2</a></li>
11
        <li><a href="#">메뉴3</a></li>
12
    </ul>
13
</body>
14
</html>

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>2단 메뉴</title>
6
</head>
7
<body>
8
    <ul>
9
        <li><a href="#">메뉴1</a>
10
            <ul>
11
                <li><a href="#">메뉴1_1</a></li>
12
                <li><a href="#">메뉴1_2</a></li>
13
                <li><a href="#">메뉴1_3</a></li>
14
            </ul>
15
        </li>
16
        <li><a href="#">메뉴2</a>
17
            <ul>
18
                <li><a href="#">메뉴2_1</a></li>
19
                <li><a href="#">메뉴2_2</a></li>
20
                <li><a href="#">메뉴2_3</a></li>
21
            </ul>
22
        </li>
23
        <li><a href="#">메뉴3</a>
24
            <ul>
25
                <li><a href="#">메뉴3_1</a></li>
26
                <li><a href="#">메뉴3_2</a></li>
27
                <li><a href="#">메뉴3_3</a></li>
28
            </ul>
29
        </li>
30
    </ul>
31
</body>
32
</html>

Dl

1
<!DOCTYPE html>
2
<html lang="ko">
3
<head>
4
    <meta charset="UTF-8">
5
    <title>설명 목록</title>
6
</head>
7
<body>
8
    <dl>
9
        <dt>html</dt>
10
        <dd>Hypertext Markup Language</dd>
11
        <dd>version html4.0, xhtml1.0, html5</dd>
12
        <dt>css</dt>
13
        <dd>cascading style sheets</dd>
14
        <dd>version css2, css3</dd>
15
    </dl>
16
</body>
17
</html>

형성평가

아래의 텍스트를 활용하여 이미지와 같은 화면을 개발하시오

와인의 시음 방법
와인의 역사
와인 맛 보기
세계의 와인
이달의 와인
와인을 좀 더 맛있게 마시는 방법
와인에 알맞은 잔을 선택한다.
와인을 적당한 온도로 마신다.
필요하면 디캔더Decanter:와인 병 속에 담긴 와인을 옮겨 붓는 투명한 유리병에 따라 마신다.
와인 품종에 따른 글래스 선택
리즐링 글래스
글래스의 입구가 넓게 퍼지지 않은 잔으로 와인이 입속으로 부드럽게 들어 가도록 해 준다.
이 잔에 마시는 와인은 리즐링, 쇼비뇽 블랑, 피노 그라고 등이다.
샤도네 글래스
샤도네는 리즐링보다 알코올 도수나 향기가 강한 와인으로 리즐링보다는 큰 잔에 마셔야 한다.
이 잔에 마시는 와인은 알바리노, 버건디 화이트, 샤도네, 애미따지 블랑, 피노 블랑, 쇼비뇽 블랑등이다.
버건디 글래스
버건디 와인의 경우 산과 탄닌의 함량이 높아 입안에서 확 퍼지지 않도록 오므라든 글래스로 깊숙이 마시는 게 좋다.
이 잔에 마시는 와인은 바바레스코, 바롤로, 버건디 레드, 그라나샤, 에미따지 레드, 피노누아, 시라 등이다.
와인 쇼핑몰
추천 와인 사이트
세계의 와인
1999-2011 by WineStroy. All Rights Reserved.