[포스코x코딩온] 웹개발자 입문 과정 1주차 회고-02 | HTML tag의 종류

 tag의 종류

● tag의 종류- 1. 제목 태그, <h1~6></h1~6>

- 제목을 뜻하는 Heading의 약자, h 사용!

- 자동 줄바꿈! 

- 하나의 HTML문서에는 한개의 h1 태그를 권장

- 웹 검색 엔진이 제일 먼저 검색하는 태그! 

 

● tag의 종류- 2. 본문 태그, <p></p>

- 본문을 뜻하는 paragraph의 약자,<p>사용

- 본문을 적기 위한 태그

 

● tag의 종류- 3. 줄 바꿈 태그, <br>

- 줄바꿔줌 

 

● tag의 종류- 4. 목록, <ul></ul> or <ol></ol>

- <ul> 순서 없는 목록

- <ol> 순서 있는 목록

- <ol> 은 속성 사용 가능 

- <ol type="?">: 말머리 기호 변경(1,A, a, I, i)

- <ol start="?">: 시작 값 변경

- <ol reversed>: 역순으로 시작 

 

● tag의 종류- 5. 수평 줄, <hr>

- 수평으로 된 줄을 그어줌

 

● tag의 종류- 6. 문자 꾸미기 태그들

- <b>: 두껍게

- <strong>:두껍게 +sementic 한 의미를 지님

- <i> : 이탤릭 체

- <em>:Emphasized, 강조, 기울여서 표시됨

- <del>: 중간 줄

- <u> : 밑줄

 

● tag의 종류- 7. 이미지를 넣어주는 <img>

- 이미지를 넣을 때 사용

- 속성 값 중 하나인 src 사용

- 이미지 로드가 안될 경우 alt 속성을 넣으면 이미지에 대한 설명이 커서를 올렸을 때 나옴

- 파일을 직접 가져오거나 인터넷에서 주소를 가져와서 사용할 수 있음

 

● tag의 종류- 8. HTML의 꽃 하이퍼링크, <a>

- 기존 문서나 텍스트의 선형성, 고정성의 제약에서 벗어나 사용자가 원하는 정보를 취득할 수 있는 기능을 제공함

- Anchor의 약자인 <a>태그 사용

- 속성값 - href:Hypertext Reference의 약자, 이동할 페이지의 링크를 뜻함, target: 링크된 문서를 열었을 때 문서가 열릴 위치 표시 ex) _blank,_self,_parent,_top

    <a href="http://www.naver.com" target="_blank">네이버이동</a>
    <a href="http://www.naver.com" title="마우스커서를 올리면 나오는 문장">네이버이동</a>

 

 

tag가 매우 다양하다는 점이 신기했다.

특히 웹사이트에서 자주 사용하던 것이 a태그라는 점을 알 수 있어서 신기했다.

또한 태그 마다 속성이 있어서 속성을 다양하게 알면 더 다채롭게 사용할 수 있을 것 같다.