문단과텍스트요소
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
01. html5 기본 구조
ex0-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>페이지타이틀</title>
</head>
<body>
<h1>여기는 제목 입니다</h1>
<p>여기는 문장입니다</p>
</body>
</html>
Info: 👁️🗨️
<!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
Info: 💡
<meta charset="utf-8">태그는 html 파일의 인코딩을 알려주는 태그입니다. 인코딩을 명확하게 알려주지 않으면 웹브라우저 설정 상황에 따라 자동으로 인코딩을 처리해주는데, 처리가 정확할 경우도 있지만, 그렇지 못하는 경우도 많습니다.
ex0-4-before.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="euc-kr">
<title>아주 간단한 HTML 문서 예</title>
</head>
<body>
<h1>문서제목을 요기다 입력</h1>
<p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p>
</body>
</html>
ex0-4-after.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title>아주 간단한 HTML 문서 예</title>
</head>
<body>
<h1>문서제목을 요기다 입력</h1>
<p>아주 아주 간단한 HTML 문서를 보여주는 예 입니다.</p>
</body>
</html>
03. 제목 요소
*h$6 콘텐츠의 제목을 표시할때는 Heading을 의미하는 H 태그를 씁니다. H태그는 제목의 중요도에 따라 1~6 단계로 나뉩니다.
- 문서에서 h1은 한개만 사용하세요
- 스크린 리더기에서는 제목의 수준으로 이동할수 있기 때문에 제목태그의 위계순으로 정의하는 것이 좋습니다.
Info: 👁️🗨️ 설계단계에서 콘텐츠의 위계관계를 분류하고 그에 맞는 중요도의 요소로 마크업해야 합니다
ex1-4.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>제목 요소</title>
</head>
<body>
<h1>반응형 웹사이트 제작1</h1>
<h2>반응형 웹사이트 제작2</h2>
<h3>반응형 웹사이트 제작3</h3>
<h4>반응형 웹사이트 제작4</h4>
<h5>반응형 웹사이트 제작5</h5>
<h6>반응형 웹사이트 제작6</h6>
</body>
</html>
04. 엔티티코드
Info: 👁️🗨️ 엔티티 코드란 Html 문서에서 특수 문자를 입력하기 위해 사용하는 코드 키보드 체계가 다른 나라에서도 같은 특수문자를 보여줄수 있어요
1-4-1.html
<!DOCTYPE HTML>
<html>
<head>
<title> Entity 코드를 이용한 공백 문자 및 특수 문자 삽입 </title>
<meta charset="UTF-8" />
</head>
<body>
<h1> Entity 코드를 이용한 공백 문자 및 특수 문자 삽입 </h1>
<h2>수업료 → ₩500</h2>
<p>서울시 강남구 한강동 . 김망고&선생님 <TEL:02-1234-1234><br />
COPYRIGHT©2019 Mango Publishing Group ALL RIGHTS RESERVED.</p>
</body>
</html>
05. 문단요소
Info: 👁️🗨️ 문단을 표시하는
p
paragraph
ex1-5.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>단락 요소</title>
</head>
<body>
<p>p 요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블록 요소는
포함할 수 없습니다.</p>
<p>p 요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블록 요소는<br>포함할 수 없습니다.</p>
</body>
</html>
Info: 👁️🗨️ 작성한대로 표시하는
pre
ex1-6.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>pre 요소</title>
</head>
<body>
<pre>
p 요소는 텍스트와 인라인 요소를 포함할 수 있지만
같은 블록 요소는
포함할 수 없습니다.
</pre>
</body>
</html>
06. 주소요소
Info: 👁️🗨️ 주소를 표시하는
addressHTML 문서의 소유자나 조직에 대한 연락처 정보를 정의할때 사용하는 태그
경기도 부천시 오징구 삼정동 297-5
이메일 : qwerew0@gmail.com
전화번호 : 000-674-5685 메시지보내기 : 000-674-5685
ex1-7.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>연락처 정보</title>
</head>
<body>
<address>
경기도 부천시 오징구 삼정동 297-5 <br>
이메일 : <a href="mailto: qwerew0@gmail.com">qwerew0@gmail.com</a> <br>
전화번호 :<a href="tel:010-986-2684"> 000-674-5685</a>
메시지보내기 :<a href="sms:010-986-2684"> 000-674-5685</a>
</address>
</body>
</html>
07. 텍스트 관련 태그들
Info: 👁️🗨️ 텍스트 관련 태그
| 종류 | 의미 | 표시 |
|---|---|---|
| blockquote | 인용문을 나타냅니다 | 들여쓰기 됨, |
| 스크린리더기에서 인용문처럼 읽어줌 | ||
| em | 강조 | 이탤릭체 |
| 스크린리더기에서 강조해서 읽어줌 | ||
| i | 이탤릭체 | |
| strong | 강조 | 굵은글씨 |
| 스크린리더기에서 강조해서 읽어줌 | ||
| b | 굵은글씨 | |
| mark | 형광펜으로 칠한 효과 | |
| small | 주의사항, 법적제한, 저작권 | 작은글씨 |
| sub | 아래첨자 | 아래첨자 |
| sup | 위첨자 | 위첨자 |
| hr | 수평선 |
ex1-7-1.html 시작파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>텍스트 관련 요소들</title>
</head>
<body>
<h1>청춘예찬</h1>
<p>밝은 그것을 투명하되 이 수 약동하다. 더운지라 바이며, 가는 기관과 피가 것이다. 보는 가진 크고 과실이 가슴에 피다.</p>
<p>청춘의 없으면 피가 보내는 이 두손을 밥을 지혜는 보이는 칼이다. 곳이 소금이라 피고 이상의 얼마나 이것이다.</p>`
<p>아니더면, 가장 우리 꾸며 노년에게서 얼음과 이상, 그들은 예가 말이다. 방황하여도, 아니한 피어나는 청춘 아니다.</p>
<p>천하를 가지에 되는 유소년에게서 풀이 원질이 살 듣는다. 거선의 그들의 미인을 청춘이 예수는 돋고, 더운지라 것이다. 따뜻한 속에 예수는 아니다.</p>
<p>인간이 피는 봄날의 아름답고 소금이라 그들의 열락의 끓는 피다. 이것이야말로 않는 주며, 청춘을 목숨을 그것을 천고에 것이다.</p>
</body>
</html>
ex-1-7-1.html 완성파일
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>텍스트관련 요소들</title>
</head>
<body>
<h1>청춘예찬</h1>
<h2>인용문-blockquote</h2>
<blockquote>
일월과 소담스러운 있을 풀이 온갖 우리는 그들의 그들의 것은 힘있다. 고동을
뼈 길을 내려온 날카로우나 가슴이 뿐이다.
</blockquote>
<hr/>
<p>
것이 <em>청춘은</em> 그것을 <i>그와</i> 고동을 있을 인생의 어디 끝에 부패뿐이다. 그것을
피어나는 피고 <strong>모래뿐일</strong> 인생에 따뜻한 <b>인생의</b> 피가 그리하였는가? 열락의
인간이 평화스러운 이상이 무엇을 무한한 창공에 그러므로 있는가? 있는 인생을
풀이 그것은 속<address>에서 거친 이것이다.</address>
</p>
<hr/>
<p>
불어 <mark>창공에 이상</mark> 지혜는 인간의 들어 <small>피부가</small> 보내는 그들에게 봄바람이다.
생의 있는 그와 <sub>반짝이는</sub> 찬미를 <sup>유소년에게서</sup> 이상 것이다.
</p>
</body>
</html>
퀴즈
그림처럼 코딩하세요
08. 하이퍼링크
Info: 👁️🗨️ anchor 의 약자로 하이퍼링크를 걸어주는 태그
ex1-8.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<h1>a 태그</h1>
<a href="http://icoxpublish.com/">아이콕스</a>
<a href="mailto:icoxpub@naver.com">icoxpub@naver.com</a>
<a href="#">
<section>
<h2>새로나온책</h2>
<p>반응형 웹퍼블리싱</p>
</section>
</a>
<a href="#content">본문바로가기</a>
<p id="content">본문내용</p>
</body>
</html>
ex1-9.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>링크</title>
</head>
<body>
<a href="http://icoxpublish.com" target="_blank">아이콕스</a>
<a href="#" onclick="window.open('http://icoxpublish.com');return false" title="새 창">아이콕스</a>
</body>
</html>
Info: 👁️🗨️
_blank속성을 사용하여 새창으로 링크 할때는 꼭title="새창열림"을 이용하여 접근성을 높여주세요
09. 이미지
**이미지다운로드**
Info: 👁️🗨️ alt의 3가지 용법
- 접근성 향상 1. 스크린리더기가 alt 속성을 음성으로 읽어줍니다
- SEO (search engine optimization) 1. 검색엔진에 이미지의 정보를 알려줍니다
- 대체텍스트 1. 이미지가 안뜰 경우 alt 속성이 대신 화면에 보입니다 💢 img 태그는 inline-block 속성입니다. 요소의 바깥은 inline 안쪽은 block 이므로 inline 요소 처럼 화면에 옆으로 표시되며 block 요소처럼 크기를 가질수 있습니다.
ex1-10.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이미지</title>
</head>
<body>
<h1><img src="images/img1.png" alt="로고"></h1>
<a href="#"><img src="images/img2.png" alt="화이트스타"></a>
</body>
</html>
10. 경로
Info: 💡
😀예제파일
path.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./src/pic4.jpg" alt="">
<img src="src/images/prince/pic1.jpg" alt="차은우">
<img src="src/images/prince/pic2.jpg" alt="차은우">
<img src="src/images/prince/pic3.jpg" alt="차은우">
</body>
</html>
구조도식화
😜문제
11. 목록요소
Info: 👁️🗨️ 목록을 표시하는 태그
| 태그 | 설명 | 문법 |
|---|---|---|
| ol | Ordered List 의 약자 : 순서가 있는 목록 | 자식으로 li 만 허용 |
| ul | Unordered List 의 약자 : 순서가 없는 목록 | 자식으로 li 만 허용 |
| dl | Description List 의 약자 : 설명목록 | ▪ dl>dt+dd |
| ▪ dt,dd 는 최소 한쌍 |
Ol
ex1-15.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>순서 목록</title>
</head>
<body>
<h1>반응형 웹퍼블리싱 학습 순서</h1>
<ol>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
<li>exercise</li>
</ol>
</body>
</html>
Ul
ex1-16.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>비순서 목록</title>
</head>
<body>
<h1>반응형 웹퍼블리싱 교과목</h1>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
<li>jquery</li>
</ul>
</body>
</html>
투뎁스
ex1-17_1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2단 메뉴</title>
</head>
<body>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</body>
</html>
ex1-17_2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>2단 메뉴</title>
</head>
<body>
<ul>
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">메뉴1_1</a></li>
<li><a href="#">메뉴1_2</a></li>
<li><a href="#">메뉴1_3</a></li>
</ul>
</li>
<li><a href="#">메뉴2</a>
<ul>
<li><a href="#">메뉴2_1</a></li>
<li><a href="#">메뉴2_2</a></li>
<li><a href="#">메뉴2_3</a></li>
</ul>
</li>
<li><a href="#">메뉴3</a>
<ul>
<li><a href="#">메뉴3_1</a></li>
<li><a href="#">메뉴3_2</a></li>
<li><a href="#">메뉴3_3</a></li>
</ul>
</li>
</ul>
</body>
</html>
Dl
ex1-18.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>설명 목록</title>
</head>
<body>
<dl>
<dt>html</dt>
<dd>Hypertext Markup Language</dd>
<dd>version html4.0, xhtml1.0, html5</dd>
<dt>css</dt>
<dd>cascading style sheets</dd>
<dd>version css2, css3</dd>
</dl>
</body>
</html>
형성평가
아래의 텍스트를 활용하여 이미지와 같은 화면을 개발하시오
와인의 시음 방법
와인의 역사
와인 맛 보기
세계의 와인
이달의 와인
와인을 좀 더 맛있게 마시는 방법
와인에 알맞은 잔을 선택한다.
와인을 적당한 온도로 마신다.
필요하면 디캔더Decanter:와인 병 속에 담긴 와인을 옮겨 붓는 투명한 유리병에 따라 마신다.
와인 품종에 따른 글래스 선택
리즐링 글래스
글래스의 입구가 넓게 퍼지지 않은 잔으로 와인이 입속으로 부드럽게 들어 가도록 해 준다.
이 잔에 마시는 와인은 리즐링, 쇼비뇽 블랑, 피노 그라고 등이다.
샤도네 글래스
샤도네는 리즐링보다 알코올 도수나 향기가 강한 와인으로 리즐링보다는 큰 잔에 마셔야 한다.
이 잔에 마시는 와인은 알바리노, 버건디 화이트, 샤도네, 애미따지 블랑, 피노 블랑, 쇼비뇽 블랑등이다.
버건디 글래스
버건디 와인의 경우 산과 탄닌의 함량이 높아 입안에서 확 퍼지지 않도록 오므라든 글래스로 깊숙이 마시는 게 좋다.
이 잔에 마시는 와인은 바바레스코, 바롤로, 버건디 레드, 그라나샤, 에미따지 레드, 피노누아, 시라 등이다.
와인 쇼핑몰
추천 와인 사이트
세계의 와인
1999-2011 by WineStroy. All Rights Reserved.
