CHAPTER 2. HTML 기본 요소.

CHAPTER 2. HTML 기본 요소

이번 장의 목표

텍스트 표시 텍스트는 특별한 태그없이도 <body>...</body> 안에서 표시할 수 있다.
하지만 단락을 생성하지 않으면 모든 텍스트가 연결되어서 하나의 긴 줄로 표시된다. <!DOCTYPE html> <html> <body> 안녕하세요? 텍스트는 body태그 안에 특별한 태그 없이 입력할 수 있지만 단락을 사용하지 않으면 전체가 연결되어서 한줄로 표시됩니다. </body> </html>

단락 단락(Paragraphs)이란 하나하나의 짧은 이야기 토막 단락의 전후에 빈 줄이 추가된다.
<!DOCTYPE html> <html> <body> <p>이것이 하나의 단락입니다.</p> </body> </html>

<br> 태그 강제 줄바꿈 태그 <!DOCTYPE html> <html>
<body> <p>여기는 <br>br태그를 사용하여 <br>줄을 바꾸었습니다. </p> </body> </html>

텍스트 입력시 주의할 점 HTML 코드에서 엔터키를 눌러서 줄을 바꾸었다고 해서 웹 브라우저에서 줄이 바뀌는 것은 아니다.
<!DOCTYPE html> <html> <body> <p> 아주 먼 옛날 바닷가 어느 왕국에 애나벨리라는 이름을 가진 한 소녀가 살고 있었지요. 그 소녀는 날 사랑했었지요. </p> </body> </html>

<pre> 태그 프로그래머가 입력한 그대로 화면에 표시하는 태그 <!DOCTYPE html>
<body> <pre> 아주 먼 옛날 바닷가 어느 왕국에 애나벨리라는 이름을 가진 한 소녀가 살고 있었지요. 그 소녀는 날 사랑했었지요. </pre> </body> </html>

헤딩 헤딩(heading): 웹 페이지의 머리기사(headline) <!DOCTYPE html>
<body> <h1>이것이 heading 1 입니다.</h1> <h2>이것이 heading 2 입니다.</h2> <h3>이것이 heading 3 입니다.</h3> <h4>이것이 heading 4 입니다.</h4> <h5>이것이 heading 5 입니다.</h5> <h6>이것이 heading 6 입니다.</h6> </body> </html>

주석 주석(comment)은 코드를 설명하는 글 <!DOCTYPE html> <html>
<body>  <img src=" height="100" width="400" />  </body> </html>

텍스트 서식

텍스트 서식 <!DOCTYPE html> <html> <body>
<p><b>이 텍스트는 bold입니다.</b></p> <p><strong>이 텍스트는 strong입니다.</strong></p> <p><i>이 텍스트는 italic입니다.</i></p> <p><em>이 텍스트는 emphasized입니다.</em></p> <p><code>이 텍스트는 code입니다.</code></p> <p><sub> subscript</sub> 이고 <sup>superscript</sup> 입니다.</p> </body> </html>

수평선 <hr> 태그를 사용하면 수평선을 그릴 수 있다. <!DOCTYPE html>
<body> 이것이 수평선입니다. <hr /> 수평선이었습니다. </body> </html>

특수문자 ‘<’와 ‘>’ 같은 문자를 화면에 표시하기 위하여 필요하다.

커피 전문점 웹 페이지

HTML 소스 <!DOCTYPE html> <html> <head>
<title>Web Coffee</title> </head> <body> <h1>Web 커피 메뉴</h1> <h2>아메리카노 5000원</h2> <p>에스프레소에 물을 추가한 것입니다.</p> <h2>카페오레 6000원</h2> <p>에스프레소에 우유를 넣은 커피입니다.</p> <h2>카푸치노 6000원</h2> <p>커피 위에 우유거품을 얹은 커피입니다.</p> </body> </html>

리스트 리스트: 항목들을 나열하는데 사용 번호있는 리스트: <ol> 번호없는 리스트: <ul>

번호없는 리스트 <ul> <li>에스프레소</li>

번호있는 리스트 <ol> <li>에스프레소</li>

정의 리스트 정의 리스트(definition list): 항목들과 함께 항목들의 정의(설명)가 표시되는 리스트
<dl> <dt>에스프레소</dt> <dd>- 커피의 기본, 커피의 원액이다.</dd> <dt>아메리카노</dt> <dd>- 에스프레소에 물을 넣은 것</dd> <dt>카페라떼</dt> <dd>- 커피에 우유를 섞은 것</dd> </dl>

링크 하이퍼링크(또는 링크)는 다른 문서로 점프할 수 있는 단어나 이미지

링크 예제 <!DOCTYPE html> <html> <body>
<a href=" target="_blank"> google.com 방문</a> <p> target 속성이 "_blank"이므로 , 링크는 새로운 탭에서 열립니다. </p> </body> </html>

target 속성 target 속성은 각 링크가 클릭되었을 때, 새로운 페이지가 어디에 열리는 지를 지정

예제 <!DOCTYPE html> <html> <body>
<a href=" target="_self"> google.com 방문1</a> <br /> <a href=" target="_blank"> google.com 방문2</a> </body> </html>

id 속성 <!DOCTYPE html> <html> <body>
<a href="#section1">참고 사항으로 가려면 여기를 클릭하세요.</a> <p> Hello World!</p> <hr /> <a id="section1">참고 사항</a> <p> 동일한 페이지 안에서도 점프할 수 있습니다. </p> </body> </html>

이미지 <img> 태그 사용

예제 <!DOCTYPE html> <html> <body>
<h2>설악산</h2> <img border="0" src="seolak.jpg" alt="설악산" width="300" height="230"> </body> </html>

이미지 처리 방법

width와 height 속성

alt 속성 브라우저가 어떤 이유로 이미지를 화면에 표시하지 못했을 경우에, 표시되는 대체 텍스트(alternate text)를 지정

이미지의 종류 JPEG 실사사진과 같이 복잡하고 많은 색상으로 이루어진 이미지에 적합 손실 압축 방식을 사용한다. PNG
클립 아트와 같이 적은 수의 색상을 가진 이미지에 적합 무손실 압축 방식 GIF 로고나 클립아트 형태의 이미지에 적합 256 색상만을 지원 투명 배경과 애니메이션을 지원한다.

커피 전문점 예제

HTML 소스 <!DOCTYPE html> <html> <head>
<title>Web Programming</title> </head> <body> <h1>Welcome to Web Coffee!</h1> <img src="coffee.gif"> <p> 하우스 로스팅 원두의 신선한 커피를 맛보고 싶다면 <em>공인 1급 바리스타</em>가 최고급 원두만을 직접 엄선하여 사용합니다. </p> <h2>메뉴</h2> 아메리카노,카페라떼,카푸치노,카페모카, ... </body> </html>

썸네일 예제

thumnail.html <!DOCTYPE html> <html> <head> <title>NASA 이미지들</title> </head> <body> <h1>NASA가 제공하는 이미지들</h1> <p> 미국의 NASA는 우주에 대한 고해상도 이미지들을 제공하고 있다. </p> <h2>Hubble Images</h2> 허블 망원경으로 촬영한 이미지로서 우주의 초기의 은하 모습을 보여준다. <a href="photo1.html"> <img src="thumbnails/PIA12110_hithumb.jpg" alt=""> </a> <a href="photo2.html"> <img src="thumbnails/PIA03149_hithumb.jpg" alt=""> </body> </html>

photo1.html <!doctype html> <html> <head> <title>Deep Field</title> </head> <body> <h1>Hubble Image #1</h1> <p> <img src="images/PIA03542_ip.jpg" alt="Deep Field"> </p> </body> </html>

photo2.html <!DOCTYPE html> <html> <head> <title>Deep Field</title> </head> <body> <h1>Hubble Image #2</h1> <p> <img src="images/PIA03149_ip.jpg" alt="Deep Field"> </p> </body> </html>

테이블 <table border="1"> <tr> <td>홍길동</td>

테이블 헤더 <table border="1"> <tr> <th>영화제목</th>
<td>라이프 오브 파이</td> <td>2013</td> <td>이안</td> <td>8.68</td> … </table>

테이블 예제 <table border="1"> <tr> <td>100</td>

테이블 경계 <!DOCTYPE html> <html> <body>
<table border="1"> <tr> <td>홍길동</td> <td>98</td> </tr> <td>김철수</td> <td>80</td> </table> </body> </html>

테이블 행, 열 병합 <table border="1"> <tr>
<th>1열</th> <th>2열</th> <th>3열</th> </tr> <td rowspan="2">1행 1열</td> <td>1행 2열</td> <td>1행 3열</td> <td>2행 2열</td> <td>2행 3열</td> <td colspan="3">3행 1열</td> </table>

테이블 캡션 <table border="1"> <caption> 최근에 본 영화들
<tr> <th>영화제목</th> <th>연도</th> <th>감독</th> <th>평가</th> </tr> ... </table>

테이블 예제

HTML 소스 <table border="1"> <tr> <th colspan="5">평생교육원 강좌 소개 년도 2학기</th> </tr> <th>강좌 이름</th> <th>강의자</th> <th>소개</th> <th>강좌코드</th> <th>실습비</th> <td>뎃생과 유화</td> <td>김철수</td> <td>모든 미술영역의 뼈대를 이루는 뎃생의 기본실력을 체계적으로 다루며, 유화에서는 재료를 다루는 방법에서부터 다양한 표현기법에 이르기까지 전문적인 미술인으로 입문할 수 있도록 각 개인의 수준에 맞추어 개인별, 단계별로 지도합니다. </td> <td>H27</td> <td>100,000원</td>

HTML 소스 <tr> <td>바이올린</td> <td>홍길동</td> <td>전반적인 현악기의 특성을 파악하며 기초를 다지고, 에뛰드와 곡을 접하면서 아름다운 음색의 바이올린을 연주할 수 있다. </td> <td>H28</td> <td>200,000원</td> </tr> <td>성악 아카데미</td> <td>김호성</td> <td>강의를 통해 배우고 익힌 곡을 음악회를 통하여 기량을 향상하고 무대를 경험한다. <td>H30</td> <td>300,000원</td> </table>

예제: 개인 홈페이지

HTML 소스 <!DOCTYPE html> <html> <head> <title>My Homepage</title> </head> <body> <h2>My Homepage</h2> <p> <img src="programmer.png" width="100" height="100" alt="프로그래머 그림" /> <strong>컴퓨터 프로그래머</strong>를 꿈꾸며 열심히 공부하고 있는 1인입니다. </p> <h3>현재 학습하고 있는 과목</h3> <ul> <li>C 언어 </li> <li>JAVA 언어 </li> <li>웹프로그래밍 <a href=" target="_blank">W3C 사이트</a></li> </ul>

HTML 소스 <h3>이번 학기 시간표</h3> <table border="1"> <caption> 시간표 </caption> <tr> <th> </th> <th>월요일</th> <th>화요일</th> <th>수요일</th> </tr> <td>1교시</td> <td>C언어</td> <td>JAVA언어</td> … </table> </body> </html>

CHAPTER 2. HTML 기본 요소.

Similar presentations

Presentation on theme: "CHAPTER 2. HTML 기본 요소."— Presentation transcript:

Similar presentations

About project

지원

로그인

Auth with social network:

CHAPTER 2. HTML 기본 요소.

Similar presentations

Presentation on theme: "CHAPTER 2. HTML 기본 요소."— Presentation transcript:

Similar presentations

About project

지원