[HTML] HTML 문서 기본

slowreem 2021. 4. 13. 19:16

1. HTML 문서 구성

<!DOCTYPE html>
<html>
    <head>
    	<title> 브라우저 타이틀 바에 출력 </title>
    </head>
    <body>
    	<h1> 글자 크기 제일 큰 제목 </h1>
        <h2> 제목 </h2>
        <h3> 제목 </h3>
        <h4> 제목 </h4>
        <h5> 제목 </h5>
        <h6 title="h6태그로 작성하였습니다."> 글자 크기 제일 작은 제목 </h6>
        
        <p> 단락 </p>
        
        <hr> 구분선
        
        <br> 줄바꿈
    </body>
</html>

h1, h2 ...h6 : heading. <h1>이 가장 큰 제목이고 <h6>가 가장 작은 제목이다.
<h6 title="..."> : 툴팁(tooltip). 객체 위에 마우스 커서 올려놨을 때 뜨는 문구. 모든 태그의 title 속성으로 들어감.
<p> : paragraph. </p>로 끝나는 문단 다음에는 자동으로 빈 줄이 생긴다.
<hr> : horizontal. 종료 태그가 없다.

개발자 포맷 그대로 출력하기, <pre>

텍스트 꾸미기

<b> 진하게. 단순 텍스트 표시

<strong> 진하게(강조). 브라우저에 중요하다고 알림. 웹 접근성에 기여.

<em> 기울임(강조). 브라우저에 중요하다고 알림. 웹 접근성에 기여.

<i> 이탤릭체 (기울임). 단순 텍스트 표시

<small> 작게

<del> 중앙선

<ins> 밑줄

<sup> 위첨자

<sub> 아래 첨자

<mark> 하이라이트 표시

블록태그와 인라인 태그

<div> : 블록 단위로 적용할 때. <div> 블록 전체에 동일한 CSS 스타일을 적용하거나 자바스크립트로 블록을 하나의 단위처럼 다루고자 할 때.

<span> : 텍스트의 일부분에 적용할 때

2. 문자, 기호, 심볼 입력

빈칸  

HTML Symbols and Entities

3. 이미지 삽입

<image src="url" alt="이미지 출력 오류 시 안내 문구" width="" height="">

4. 리스트 삽입

ol (ordered list)

ul (unordered list)

li (list item)

dl (definition list)

dt (definition term)

dd (definition description)

5. 표 삽입

<table>
    <caption> 3x4 표 실습 </caption>
    <thead>
    	<tr> <th>이름</th> <th>중간</th> <th>기말</th> </tr>
    </thead>
    <tfoot> 
    	<tr> <th></th> <th></th> <th></th> </tr>
    </tfoot>
    <tbody> 
    	<tr> <td></td> <td></td> <td></td> </tr>
        <tr> <td></td> <td></td> <td></td> </tr>
    </tbody>
</table>

rowspan="3" 행 합치기

colspan="1" 열 합치기