HTML_태그

 

 

** 디자인은 css에서!

 

1. 제목태그

- <h1></h1> ~ <h6></h6> :  크기가 달라지면 숫자가 높을수록 하위제목

 

  

 

2. 줄바꿈 태그 

- <br> : break, 닫는 태그 없으며, 여러번 사용가능, enter의 기능 

- <p></p> : paragraph, 문단구분을 위한 태그

 

 

 

3. 강조태그

- <b></b> : bold  단순히 진하게 

- <strong></strong> : 컴퓨터에게 중요함을 알릴 때 

 

 

 

4. 기울임태그

- <i></i> :  italic 단순히 기울임

- <em></em> : emphasize 컴퓨터에게 중요함을 알릴 때 

 

 

 

5. 기타태그

- <mark></mark> : 사용자가 관심 가질만한 정보 강조

-  : superscript 위 첨자로 넣는 글자

-  : subscript 아래 첨자

- <s></s> :strike 취소선 

 

 

 

6. 인용문태그

- <blockquote></blockquote> : 텍스트가 긴 인용문에 사용 

 → <cite="url"> : 인용문의 url

 

 

 

7. 이미지  태그 

- <img /> : image 

 → <src>: 이미지의 절대(내 컴퓨터 파일위치), 상대 경로(인터넷 이미지 주소)

 → <alt>: 이미지 설명 

 → <width> : 이미지 가로길이

 

 

 

8. 하이퍼링크

: 다른페이지나 같은 페이지의 위치, 파일 등 주소와 다른 url  주소 연결하도록 설정 

<a></a>: anchor

 → <href="haheaven.tistory.com">

 → <target="_self","_blank"> : self-현재창에서 이동, blank-새 탭에서 이동 

<a href="https://www.tistory.com" target="_blank"></a>. --> 새 탭열리며 tistory로!

 

 

 

9. 목록태그 

- <ul></ul> : unordered list 순서가 없는 리스트   (((<ul><li></li></ul>)))

- <ol></ol> : orederdlist 순서가 있는 리스트   (((<ol><li></li></ol>

 → <li></li> : list item 목록요소

 

 

 

10. 테이블태그

- <table></table> : 표

- <tr> : table row - 표의 한열 

- <th> : table header - 각 열, 행의 머리 

- <td></td> : table data - 표의 각 칸 

- <caption></caption> : 표 제목 

 

 

 

11. 구획 태그

- <div></div> : division 

: 스스로 아무것도 표현 x 

: 다른 요소를 묶거나, 구획을 나눌 때 

 

 

 

 

12. 의미가 부여된 태그 

- <header></header> : 페이지 최상단, 제목, 로고 등 포함 

- <footer></footer> : 페이지 최하단, 작성자, 관련 문서 등 포함 

- <nav></nav> : 링크들 포함 

- <aside></aside> :  주로 사이드바

- <main></main> : 주요 컨텐츠

- <section></section> : 컨텐츠 내 독립적 구획

- <article></article> : 반복적으로 나타나는 구획, 게시판, 목록상 각 항목 

 

 

 

 

13. 폼 태그 

- <label></label> : 각 입력의 레이블을 표시 

  → <for="어떤 레이블인지 지정하는 네임 적기">

- <input></input>

  →  <id="for 지정값과 똑같이적기">

- <input type="text"> : 일반 텍스트 입력

- <input type="password"> : 패스워드 입력 (••• 으로 표시)

- <input type="tel"> : 전화번호 입력 (모바일 등에서 전화번포 키패드 표

  → <placeholder="칸에 보여줄 텍스트(공백시)">

  → <maxlength="최대글자수(숫자)"> 

- <input type="number"> : 숫자값 입력

- <input type="checkbox"> : 체크박스

- <input type="radio"> : 라디오(택일)

- <select> </select> : 선택지

- <option></option> : 각 선택 항목

- <textarea></textarea> : 여러 줄 입력 가능