나중에 웹 에디터로 작성할 수 있지만 태그의 기능을 눈으로 읽을 수는 있어야 하기 때문에 기초 지식은 필요하다.
<h1> ~ <h6> </h6>~</h6>
h의 의미는 웹 문서의 제목을 나타낼때 사용하는 요소이다.
h는 블럭요소이며 인라인이나 텍스트는 포함가능하지만 블럭 요소는 포함 할 수 없다.
<p></p>
단락을 정의하는 블럭 요소이므로 줄 바꿈이 일어난다.
블럭 요소이기 때문에 h와 마찬가지로 텍스트와 인라인 요소만 포함 가능하다.
<a href="상대경로,절대경로"></a>
a태그는 링크를 걸때 사용한다.
<img src="주소" alt = "name"/>
이미지를 붙이는 태그로 주소값은 절대,상대 둘다 가능하지만 웹서버는 상대경로는 사용하는게 보안에 좋고 제정신이라면 그렇게 사용한다. alt는 꼭 써야한다.
<blockquote cite="인용문 출처" title="제목"></blockquote>
인용문을 붙이는 태그
<hr/>
구분선을 긋는 태그이다.
<address></address>
주소를 지정하는 태그이다.
<em></em>
<strong></strong>
인라인 요소를 강조하는 태그로 em은 italic strong은 bold체이다.
<abbr title="Long Term Evolution">LTE</abbr>
<acronym title="United Nations Children's Fund">UNICEF</acronym>
abbr은 생략어로 www나 LTE같이 한 문자씩 발음하는 단어에 사용하고
acronym은 두문자어로 유니세프, 나토 처럼 한 단어로 발음하는 단어에 사용한다. 기능상의 차이는 없고 영어권에서 개발된 html특성상 사용자에 이해를 돕기위해 구분되어 있다.
<del>삭제글</del>
<ins>수정글</ins>
del은 삭제글처럼 글자 중간에 선을 그을때 사용하고 ins는 밑줄을 그을때 사용한다.
리스트(목록) 출력하는 방법
리스트는 3가지 방법으로 표현하는데 ol(순차형 리스트),ul(비순차적 리스트),dl(정의형 리스트) 가 있다.
markup 예제와 예제가 어떤식으로 보이는지 아래에 올려 놓았다.
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" lang="ko"> | |
| <head> | |
| <title>p : 단락태그 </title> | |
| <meta http-equiv="Content-type" content = "text/html;charset=utf-8"/> | |
| </head> | |
| <body> | |
| <!-- h의 의미는 웹문서의 제목을 나타낼때 사용하는 요소--> | |
| <!--<h1></h1> ~~ <h6></h6> 블럭요소이다. | |
| 인라인이나 텍스트는 포함할 수 있지만 블럭 요소는 포함 할 수 없다. | |
| --> | |
| <p>단락을 정의하는 p는 블럭요소이므로 줄바꿈이 일어납니다.</p> | |
| <h6>제목</h6> | |
| <p>p요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블럭 요소는 포함하지 못합니다.<br></br> | |
| 예) ceo인사말 페이지 처럼 문장으로 구성된 내용을 문단으로 구분하기 위해 사용한다. | |
| <br> | |
| <img src="http://ddragon.leagueoflegends.com/cdn/4.19.3/img/champion/Teemo.png" alt = "teemo" /> | |
| <br> | |
| </p> | |
| <h5>제목</h5> | |
| <h4>제목</h4> | |
| <h3>제목</h3> | |
| <h2>제목</h2> | |
| <h1>제목</h1> | |
| <blockquote cite="인용문 출처" title="제목"> | |
| <p>테스팅 | |
| </p> | |
| </blockquote> | |
| <hr/><!--구분선 긋기--> | |
| <address><!--주소 지정--> | |
| 서울시 당산동 태일빌딩 COPYRIGHT © 한국산업융합협회 All Rights Reserved | |
| </address> | |
| <h1>텍스트요소</h1> | |
| <h2>강조</h2> | |
| <p>이제는<em>반응형웹</em>이 대세이다.<br> 인라인요소로 일반 강조할때 사용, 기울림체로 표현한다.<br> <em>ex)회원가입텍스트 구성시, 아이디는 4-8글자입니다.</em></p> | |
| <p>이제는<strong>반응형웹</strong>이 대세이다.<br> 인라인요소 볼드체로 나타낸다. <strong>ex)필수입력사항</strong></p> | |
| <h2>생략어와 두문자어</h2> | |
| <p> | |
| <abbr title="정말 빠른 속도">LTE</abbr> | |
| <acronym title="United Nation Children Foundation">UNICEF</acronym>(유니세프) | |
| </p> | |
| <h2>추가글과 삭제글</h2> | |
| <p>정기세일 : <del>8.30-09.15</del></p> | |
| <p>정기세일 변경 <ins>9.1~9.15</ins></p> | |
| <del><p>정기세일</p></del> | |
| <h2>윗첨자와 아랫첨자</h2> | |
| <p>o<sup>2</sup>co<sub>2</sub></p> | |
| <!-- | |
| 리스트(목록)를 출력하는 방법 | |
| ol순차적 리스트 | |
| ul비순차적 리스트 | |
| dl정의형 리스트 | |
| --> | |
| <h1>ol요소의 활용</h1> | |
| <h2>채용절차</h2> | |
| <ol> | |
| <li>서류전형</li> | |
| <li>면접전형 : 기술면접</li> | |
| <li>최종 : 임원면접</li> | |
| </ol> | |
| <h1>ul요소의 활용</h1> | |
| <h2>채용절차</h2> | |
| <ul> | |
| <li><a href="#">웹강사 소개</a></li> | |
| <li><a href="#">강좌목록</a></li> | |
| <li><a href="#">구인구직소개</a></li> | |
| </ul> | |
| <h1>dl요소의 활용</h1> | |
| <h2>즐겨찾는 메뉴</h2> | |
| <dl> | |
| <dt><a href="#">웹강사 소개</a></dt> | |
| <dd><a href="#">강좌목록</a></dd> | |
| <dd><a href="#">구인구직소개</a></dd> | |
| </dl> | |
| <p>상대경로 :<a href="company\sub.html">sub상대경로</a></p> | |
| <p>절대경로 :<a href="file:\\\C:\html5\html_src\company\sub.html">sub절대경로</a></p> | |
| </body> | |
| </html> |
단락을 정의하는 p는 블럭요소이므로 줄바꿈이 일어납니다.
제목
p요소는 텍스트와 인라인 요소를 포함할 수 있지만 같은 블럭 요소는 포함하지 못합니다.
예) ceo인사말 페이지 처럼 문장으로 구성된 내용을 문단으로 구분하기 위해 사용한다. 
제목
제목
제목
제목
제목
테스팅
서울시 당산동 태일빌딩 COPYRIGHT © 한국산업융합협회 All Rights Reserved
텍스트요소
강조
이제는반응형웹이 대세이다.
인라인요소로 일반 강조할때 사용, 기울림체로 표현한다.
ex)회원가입텍스트 구성시, 아이디는 4-8글자입니다.
이제는반응형웹이 대세이다.
인라인요소 볼드체로 나타낸다. ex)필수입력사항
생략어와 두문자어
LTE UNICEF(유니세프)
추가글과 삭제글
정기세일 : 8.30-09.15
정기세일 변경 9.1~9.15
정기세일
윗첨자와 아랫첨자
o2co2
ol요소의 활용
채용절차
- 서류전형
- 면접전형 : 기술면접
- 최종 : 임원면접
ul요소의 활용
채용절차
dl요소의 활용
즐겨찾는 메뉴
상대경로 :sub상대경로
절대경로 :sub절대경로
'개발 > HTML5' 카테고리의 다른 글
| 웹 관련 정리 내용 (0) | 2014.12.19 |
|---|---|
| JSP기본 정의 (0) | 2014.12.16 |
| 03.HTML - form요소과 form내부의 input요소 (2) | 2014.12.02 |
| 02.HTML - Table 태그의 종류 및 사용법 (0) | 2014.12.02 |
| 00.HTML - 기본 개념 (0) | 2014.12.02 |
댓글