HTML 기초

HTML

구조 (마크업 언어) 뼈대 

태그들의 집합으로 이루어져 있다. 

 

Frequently used HTML tags
<div>	</div>	Division
<span>	</span>	Span
<h>, <h1>....	</h>,</h1>...	header	숫자가 낮을수록 우선순위
<p>	</p>	Paragraph	본문용
<img src="LINK" width="" height="">	no closing tag	Image
<br>	no closing tag	make empty line	Add 1 blank line
<ul> or <ol> & <li>	</ul> & <li>	Unordered / ordered list & List item
<input type="FORM">	no closing tag	input(text, radiobox, tickbox)	다양한 입력 폼
<textarea>	</textarea>	Multi-line text
<button>	</button>	Button
<b>, <i>, <u>, <s>	</b>, </i>, </u>, </s>	Bold, Italics, Underline, Barred
<a href="LINK" or <a href="LINK" target ="_blank">	</a>	Link	add target="_blank" new windows when click the link

*add target = "_blank"로 외부페이지를 오픈할 때 JS로 리다이렉트 시킬 수 있는 보안 취약점이 존재한다. (Tapnapping피싱공격)따라서 rel="noopener noreferrer" 를 추가해줘야 함 

<a href="http://danc.tistory.com" target="_blank" rel="noopener norefferer">My Blog </a>

 

---

 

HTML에서 Tag는 opening / closing tag로 구성되어 있으며 그 둘 사이에 콘텐츠를 넣고 돌린다.

<p class = "paragraph"> P is a paragraph. </p>

class = "paragraph" - Attribute(속성)

P is a paragraph - Contents(콘텐츠)

---

Radio box (동그란놈) 은 선택지 중 하나밖에 고르지 못함
(그룹 설정 가능 - name 으로 a와 b를 묶기 - 안하면 둘다 선택가능 )

name value를 같게 해야 세트가 되어 하나만 클릭 할 수 있다. value를 다르게 했더니 둘다 선택되버림

<input type = "radio" name="aa"> lookin good so far.
<input type = "radio" name="aa"> lookin good so far.

 

---

Sementic Tag

> HTML 에서의 <header>, <main>, <nav>, <aside>, <footer> 태그는 <div>와 똑같다. <

 > 하지만 태그 자체로 의미를 알수 있다는 점에서 non-sementic tag인 <div> 와는 차이가 있다. <