1. 글자 태그
1.1 제목 글자 태그 <h1> ~ <h6>
1.2 특수 문자
1.2.1 공백
1.2.2 < <
1.2.3 > >
1.2.4 & &
1.3 본문 글자 태그 <p>
1.4 개행 태그 <br>
1.5 수평 줄 태그 <hr>
1.6 하이퍼링크 태그 <a> : Anchor ( 닻 )
<a href = " 이동할 페이지 "> 출력 글자 </a>
1.6.1 절대 경로
1.6.2 상대 경로
1.6.3 아이디 경로 : 현재 웹 페이지 내부의 태그 id ( #name - id속성이 name인 태그로 이동 )
1.6.4 메일 경로 : mailto : 이메일 주소 - 해당 주소로 메일 전송
1.6.5 새 창으로 띄우기 : target = "_blank"
1.7 글자 모양 태그
1.7.1 굵은 글자 태그 <b>
1.7.2 기울어진 글자 태그 <i>
1.7.3 작은 글자 태그 <small>
1.7.3 아래 첨자 태그 <sub>
1.7.4 위 첨자 태그 <sup>
1.7.5 밑줄 글자 태그 <ins>
1.7.6 가운데 줄, 취소선 태그 <del>
2. 목록 태그 ( 내비게이션 메뉴를 만들 때 주로 사용 )
2.1 글머리 기호 목록 태그 <ul>
2.2 순서 번호 목록 태그 <ol>
2.3 목록 요소 <li>
3. 테이블 태그
3.1 표 <table>
3.2 표의 머리 <thead>
3.3 표의 본문 <tbody>
3.4 표의 꼬리 <tfoot>
3.5 표의 행 <tr>
3.6 표의 제목 요소 <th> : 글씨가 굵게 나타난다.
3.7 표의 일반 요소 <td>
3.8 속성
3.8.1 표의 경계선 <border>
3.8.1 셀의 너비 지정 <colspan>
3.8.2 셀의 높이 지정 <rowspan>
4. 이미지 태그 ( 단독 사용 ) <img/>
4.1 속성
4.1.1 이미지의 경로 지정 <src> : 웹에 존재하는 이미지 경로도 허용됨
4.1.2 이미지가 없을 때 나오는 글자 지정 <alt>
4.1.3 이미지의 너비 지정 <width>
4.1.4 이미지의 높이 지정 <height>
( 의미 없는 이미지 경로 : http://placehold.it/너비x높이 )
5. 공간 분할 태그 : CSS로 원하는 레이아웃을 편하게 구성 할 수 있다.
5.1 블록 형식으로 공간 분할 <div> : 한줄 전체 블록 형식
div, h1 - h6, p, 목록, 테이블, 목록 태그, 테이블 태그, 입력 양식 태그
5.2 인라인 형식으로 공간 분할 <span> : 해당 태그들의 크기 만큼
span, a, input, 글자 형식 태그
5.3 시맨틱 태그 (semantic : 의미론적인)
: 컴퓨터는 코드를 보기 때문에 레이아웃을 빠르게 구분하기에 힘들다.
어떤 태그가 어떤 기능을 하는지, 웹 페이지에서 데이터를 효율적으로 추출할 수도 없다.
이를 해결하고자 특정 태그에 의미를 부여하면 어떨까 해서 나온 것이 시맨틱 태그다 !
5.3.1 헤더 <header>
5.3.2 내비게이션(목록) <nav>
5.3.3. 사이드에 위치하는 공간 <aside>
5.3.4 여러 중심 내용을 감싸는 공간 <section>
5.3.5 글자가 많이 들어가는 부분 <article>
5.3.6 푸터 <footer>
연습
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html> <head> <title> 도담씨 </title> </head> <body> <header> <br> <h2> HTML 기본 태그 연습하기 </h2> <h4> by. 도담씨 </h4> <hr> </header> <p> 2014-04-13 도담씨 블로그를 시작하다 :-> <br> <br> <b> <a href="http://do-dam.tistory.com/" target="_blank"> 도담씨의 블로그 가기</a> </b> <small> click! </small> <br><br> <img src="http://placehold.it/300x150"/> </p> <hr> <h5> CONTENT</h5> <nav> <ul> <li> Web Programming </li> <li> Andriod </li> <li> Dialiy </li> <li> Game review</li> </ul> </nav> <table border="1"> <tr> <th> 블로그명 </th> <td> #DODAM #BLOG </td> </tr> <tr> <th> 닉네임 </th> <td> #도담도담 </td> </tr> <tr> <td colspan="2"> 블로그 열심히 하기 XD </td> </tr> </table> </body> </html> | cs |
'웹 프로그래밍' 카테고리의 다른 글
| CSS 내부 스타일시트, 외부 스타일 시트 (1) | 2018.05.04 |
|---|---|
| HTML 입력 양식 태그 <form> <input> (0) | 2018.04.16 |
| HTML 멀티미디어 태그와 입력 양식 태그 (0) | 2018.04.15 |
| HTML 기본 구조와 작성법 (0) | 2018.04.13 |
| 웹의 개요와 동작 원리 (1) | 2018.04.13 |