HTML - 기본 태그
HTML
HTML(Hyper Text Markup Language) : HyperText(웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 것) 기능을 가진 문서를 만드는 언어. 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 웹 페이지를 위한 마크업 언어. (홈페이지의 뼈대)
<TAG>
- Syntax
<h1~6>제목</h1~6>
<p>문단</p>
<strong>강조</strong>
<em>강조</em>
.
.
- attribute : 태그에 추가적인 정보 제공
- Syntax
<p attribute = 'value'> ~ </p>
링크
[a 태그에 들어올 수 있는 ‘value’]
- URL
- Syntax
<a href ="creamereos.github.io">링크</a>
href = Hypertext REFerence(하이퍼텍스트 주소)
- 페이지 내 이동 (id value)
- Syntax
<a href ="#id 이름">페이지 내 이동</a>
id #
- 이메일 주소
- Syntax
<a href ="mailto:이메일">메일 보내기</a>
href = Hypertext REFerence(하이퍼텍스트 주소)
- 전화번호
- Syntax
<a href ="tel:01012345678">전화 걸기</a>
- Syntax
target="_blank" : 새창에서 열기
<a href ="creamereos.github.io" target="_blank">링크</a>
이미지
- Syntax
<img src = "#" alt=""/>
src = SouRCe, alt = ALTernative text
- 절대 경로(온라인)
ex : <img src = "https://f1.codingworldnews.com/2019/06/8txguwtk17.jpg" alt="프로그래밍 사진"/>
- 상대 경로(로컬)
ex : <img src = "./img/cat.png" alt="프로그래밍 사진"/>
리스트
- ol (Ordered List)
<ol>
<li>항목1</li>
<li>항목2</li>
</ol>
- 항목1
- 항목2
- ul (Unordered List)
<ul>
<li>항목1</li>
<li>항목2</li>
</ul>
- 항목1
- 항목2
ul,ol,dl의 자식요소는 li만 가능
가능
<ul>
<a> <li>항목1</li> </a>
</ul>
불가능
<ul>
<a> <li>항목1</li> </a>
</ul>
정의 리스트
용어를 정의 할 때 사용
{Key:Value}로 정보를 제공 할 때 사용
dl(Description List)
dt(Description Term) : Key
dd(Description data) : Value
<dl>
<dt>정의</dt>
<dd>정의에 대한 설명</dd>
</dl>
인용
blockquote :브라우저가 인용 문인 걸 알 수 있음.
<blockquote cite="인용을 가져온 URL 주소"> 인용 내용 </blockquote>
<cite>인용 출처</cite>
인용 내용
q : 문단 내 인용
<q> 인용 내용 </q>
인용 내용
div & span
- 아무런 의미가 없음
- CSS 사용 시 요소를 묶을 때 사용
- div : 모든 곳에 사용. 하지만 너무 많이 사용하면 헷갈리니 사용을 최소화해야함
- span : text 레벨에서 사용(작은 부분)
