-
[HTML] HTML 문서 기본개발 프로세스/Front-end 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. 문자, 기호, 심볼 입력
빈칸
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" 열 합치기
'개발 프로세스 > Front-end' 카테고리의 다른 글
[HTML] 하이퍼링크와 멀티미디어 (0) 2021.04.15 [HTML] 시맨틱 웹 Semantic Web : 문서구조화 (0) 2021.04.14 [HTML] 웹폼 Webform : 색 입력, 시간 정보 입력, 숫자 입력, 파일 선택 (0) 2021.04.13 [HTML] 웹폼 Webform : <label>, <fieldset> (0) 2021.04.13 [HTML] 웹폼 Webform : 버튼 만들기 (0) 2021.04.13