HTML
1. HTML 이란?
- HTML은 Hyper Text Markup Language의 약자로 웹 문서를 작성하는 마크업 언어 입니다.
2. HTML 구성 요소
- Document : 한페이지를 나타내는 단위
- Element : 하나의 레이아웃을 나타내는 단위 : 시작태그, 끝태그, 텍스트로 구성
- Tag : 엘리먼트의 종류를 정의 : 시작태그(속성값), 끝태그
- Attribute : 시작태그에서 태그의 특정 기능을 하는 값
- id : 웹 페이지에서 유일한 값
- class : 동일한 여러개의 값 사용 가능 : element를 그룹핑 할때 사용
- attr : id와 class를 제외한 나머지 속성들s
- Text : 시작태그와 끝태그 사이에 있는 문자열
- 엘리먼트는 서로 계층적 구조를 가질수 있습니다.
%%html
<!-- 사용 예 -->
<div class="wrapper">
<button class="btn no1" type="button" value="1">HTML 1</button>
<button class="btn no2" type="button" value="2">HTML 2</button>
</div>
HTML 1
HTML 2
3. HTML 구조
- DOCTYPE
- 문서의 종류를 선언하는 태그 입니다.
- html
- head
- meta
- 웹페이지에 대한 정보를 넣습니다.
- title
- 웹페이지의 제목 정보를 넣습니다.
- meta
- body
- 화면을 구성하는 엘리먼트가 옵니다.
- head
<!-- HTML 웹문서의 기본적인 구조 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>4. HTML 태그
- html에서 문자를 나타내는 태그들
4.1 head
- title을 나타낼때 사용
- Head는 총 6가지 종류의 태그가 있습니다.(h1~h6)
- 숫자가 커질수록 문자의 크기가 줄어듭니다.
%%html
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading</h6>4.2 p
- 한줄의 문자열을 출력하기 위한 태그
%%html
<p>HTML은 마크업 언어 입니다.</p>
<p>p 태그는 한줄로 문자열을 출력합니다.</p>HTML은 마크업 언어 입니다.
p 태그는 한줄로 문자열을 출력합니다.
4.3 span
- 한블럭의 문자열을 표현하기 위한 태그
%%html
<span class="s1">span-tag-0</span>
<span class="s2">span-tag-1</span>
<span class="s3">span-tag-2</span>span-tag-0
span-tag-1
span-tag-2
4.4 pre
- 줄바꿈이나 띄어쓰기가 적용되는 태그
%%html
<p>
python
datascience
</p>
<pre>
python
datascience
</pre>python datascience
python
datascience
4.5 code
- 코드를 작성하는 태그
- 들여쓰기나 두칸 이상의 공백은 적용이 안됩니다.
%%html
<code>
var a = 10;
var b = 20;
print("{} + {} = {}".format(a, b, a + b));
</code>
var a = 10;
var b = 20;
print("{} + {} = {}".format(a, b, a + b));
5. 문자 이외의 HTML 태그
5.1 div
- 레이아웃을 나타내는 태그
%%html
<div>
<p>div1</p>
<p>div1</p>
<p>div1</p>
</div>
<div>div2</div>
<div>div3</div>div1
div1
div1
div2
div3
5.2 table
- 로우와 컬럼이 있는 테이블 모양을 나타낼때 사용하는 태그
%%html
<table>
<caption>테이블</caption>
<thead>
<tr>
<th>html_1</th>
<th>html_2</th>
</tr>
</thead>
<tbody>
<tr>
<th>html_3</th>
<th>html_4</th>
</tr>
</tbody>
</table>| html_1 | html_2 |
|---|---|
| html_3 | html_4 |
5.3 ul, li
- 리스트를 나타내는 태그
%%html
<ul>
<li>ul_li_1</li>
<li>ul_li_2</li>
<li>ul_li_3</li>
</ul>- ul_li_1
- ul_li_2
- ul_li_3
5.4 a
- 링크를 나타내는 태그
- href 속성에 url을 넣습니다.
- url과 상대경로를 모두 사용 가능
target="_blank"는 링크를 열때 새탭에서 열도록 하는 기능이 있습니다.
%%html
<a href="http://google.com" target="_blank">Google</a>
<a href="01_html_1.md">html basic</a>5.5 image
- 이미지를 나타내는 태그
%%html
<img src="https://cfm.kt.com/images/v2/layout/gnb-ktlogo.png" alt="kt logo">
5.4 iframe
- 외부 url 링크 페이지를 보여주기 위한 엘리먼트
- 모든 웹 페이지를 보여줄수있는건 아니고 iframe으로만 출력이 되던가 안되거나 하는등의 설정을 할수 있습니다.
%%html
<iframe src="https://www.youtube.com/watch?v=euR76oRd7L4" width="100%" height="400">이 브라우저는 iframe을 지원하지 않습니다</iframe>5.5 input
5.5.1 text
- 문자열을 입력받을때 사용하는 input 타입
%%html
<input type="text" name="" value="" placeholder="이메일">5.5.2 password
- 비밀번호를 입력받을때 사용하는 input 타입
%%html
<input type="password" name="" value="" placeholder="패스워드">5.5.3 radio
- 여러개의 버튼중에서 한개의 버튼만 체크되는 버튼
- radio 버튼은 name 속성값으로 그룹핑을 합니다.
%%html
<input type="radio" name="radio1" value="1">라디오1</input>
<input type="radio" name="radio1" value="2">라디오1</input><br>
<input type="radio" name="radio2" value="3">라디오2</input>
<input type="radio" name="radio2" value="4">라디오2</input>
<input type="radio" name="radio2" value="5">라디오2</input><br>라디오1
라디오1
라디오2
라디오2
라디오2
5.5.4 checkbox
- 여러개의 버튼이 체크되는 버튼
%%html
<input type="checkbox" name="checkbox1" value="1">체크박스1</input>
<input type="checkbox" name="checkbox1" value="2">체크박스2</input>체크박스1
체크박스2
5.5.5 select, option
- 옵션선택을 할수 있는 드랍다운 태그
%%html
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
</select>5.6 textarea
- 여러줄을 입력이 가능한 태그
%%html
<textarea name="name" rows="4" cols="30" ></textarea>5.7 button
- 마우스 클릭을 입력받는 버튼 태그
%%html
<button type="button">Click</button>Click
지식을 담습니다.