1. HTML이란
1.1 HTML의 개념
•
HTML은 Hyper text Markup Language의 약자로, 월드와이드웹 문서를 작성하는 Markup Language. 웹페이지의 내용을 서술하고 정의하는 데 사용
•
Markup Language: 시작과 종료 태그가 있는 language (대표적 예: XML)
•
HTML은 여러 태그들로 구성되어 있으며 각 태그들을 사용하여 원하는 형태의 문서를 만들어갈 수 있음
(태그라는 문법적 특성으로 웹 화면의 요소를 표현)
1.2 HTML의 구성요소
1.
Elements(요소): 시작태그와 종료태그로 이루어진 코드
2.
Tag(태그): 요소의 일부로 <div>, <p> 등, 시작태그와 종료태그가 있음
3.
Attribute(속성): 태그 안에 키와 값으로 이루어진 코드
태그는 HTML의 문법적 규칙이자 코드를 의미하고, 요소는 실제 웹 페이지 화면에 그려지는 구성요소를 의미함. 보통은 하나의 HTML 태그가 웹페이지의 요소에 일대일로 연결됨
1.3 HTML의 기본 구조
•
html, head, body 태그
•
html 태그: 문서의 시작과 끝
•
head 태그: 문서의 메타 정보 정의
•
body 태그: 실제 사용자에게 보여질 화면을 구현
2. 서식 태그
2.1 h
•
heading의 약자로, 타이틀을 표현하기 위한 element
•
h1~h6로 여섯단계가 표현 가능
•
사용 예
<!--emmet 문법: h${$단계 제목}*6-->
<h1>1단계 제목</h1>
<h2>2단계 제목</h2>
<h3>3단계 제목</h3>
<h4>4단계 제목</h4>
<h5>5단계 제목</h5>
<h6>6단계 제목</h6>
HTML
복사
→ 적용시 이렇게 나타난다.
1단계 제목
2단계 제목
3단계 제목
4단계 제목
5단계 제목
6단계 제목
2.2 p
•
paragraph의 약자로, 문단을 분리하기 위한 태그
•
사용 예
<!--emmet 문법: p{p_tag_$}*3-->
<p>안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.</p>
<p>안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.</p>
<p>안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.</p>
HTML
복사
→ 적용시 이렇게 나타난다.
안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.
안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.
안녕하세요? 제 이름은 홍길동입니다. 저는 서울에서 태어났습니다.
2.3 pre
•
preformatted text의 약자로, 입력한 그대로 화면 출력하는 태그
•
줄바꿈이나 띄어쓰기가 그대로 적용되는 element
•
사용 예
<p>
python
data
</p>
<pre>
python
data
</pre>
HTML
복사
→ 적용시 이렇게 나타난다.
python data
python
data
2.4 br
•
break의 약자로, 줄바꿈 태그
•
html 코드상에서 줄바꿈을 해도 웹페이지 상에서는 적용되지 않기 때문에, 줄바꿈 태그를 넣어주어야 함
•
종료 태그 없이 사용 가능한 홀태그 (태그 속의 내용물이 필요 없음)
2.5 hr
•
horizontal rule의 약자로, 가로선 태그
•
홀태그로 하나의 태그만 사용함
2.6 글씨체
•
b, strong(굵은글씨)
•
i,em(이탤릭체)
•
sup,sub(윗첨자, 아래첨자)
•
small(작은 글씨)
•
mark(배경이 노랑색)
•
del(삭제문자열 - 가로줄)
•
ins(언더라인 문자열)
•
code(코드 문자열)
•
사용 예
굵은글씨: <b>굵은글씨</b></br>
굵은글씨: <strong>굵은글씨</strong><br>
<br>
이탤릭체: <i>이탤릭체</i><br>
이탤릭체: <em>이탤릭체</em><br>
<br>
윗첨자: <sup>윗첨자</sup><br>
아래첨자: <sub>아래첨자</sub><br>
작은글씨: <small>작은글씨</small><br>
<br>
글자배경이 <mark>노란색</mark> 입니다.<br>
문자열 <del>삭제</del>입니다.<br>
문자열 <ins>언더라인</ins>입니다.<br>
<br>
코드: <code>code</code>
HTML
복사
→ 적용시 이렇게 나타난다.
굵은글씨: 굵은글씨
굵은글씨: 굵은글씨
이탤릭체: 이탤릭체
이탤릭체: 이탤릭체
윗첨자: 윗첨자
아래첨자: 아래첨자
작은글씨: 작은글씨
글자배경이 노란색 입니다.
문자열삭제입니다.
문자열 언더라인입니다.
코드:
굵은글씨: 굵은글씨
이탤릭체: 이탤릭체
이탤릭체: 이탤릭체
윗첨자: 윗첨자
아래첨자: 아래첨자
작은글씨: 작은글씨
글자배경이 노란색 입니다.
문자열
문자열 언더라인입니다.
코드:
code3. 리스트 태그
3.1 ol, ul, li
•
list element
•
여러개의 li 태그를 ol 또는 ul 태그로 묶어서 사용
◦
ol: Ordered List. 순서가 있는 항목들을 나열. 번호 리스트
◦
ul: Unordered List. 순서가 없는 항목. 불렛 리스트
◦
li: List item
•
크롤링 할 때 많이 보게 될 태그
•
ol 태그 예시
<!--emmet 문법: ol>li{ul_li_$}*3-->
<ol>
<li>ul_li_1</li>
<li>ul_li_2</li>
<li>ul_li_3</li>
</ol>
HTML
복사
→ 적용시 아래와 같이 나타난다.
- ul_li_1
- ul_li_2
- ul_li_3
•
ul 태그 예시
<!--emmet 문법: ul>li{ul_li_$}*3-->
<ul>
<li>ul_li_1</li>
<li>ul_li_2</li>
<li>ul_li_3</li>
</ul>
HTML
복사
→ 적용시 아래와 같이 나타난다.
- ul_li_1
- ul_li_2
- ul_li_3
참고자료
•
패스트캠퍼스, ⟪데이터사이언스스쿨 8기⟫ 수업자료
•
인프런, ⟪프로그래밍 시작하기: 웹 입문⟫ 수업자료