SW

HTML 태그 정리 (지속추가) 본문

프로그래밍/HTML&CSS

HTML 태그 정리 (지속추가)

LCD 2018. 10. 25. 15:02

태그 정리 18. 10. 25 정리


<h1>~<h6>: 글씨 사이즈. h1이 제일 큼. 순서대로 쓴다.


<p>: 단락을 정의. 같은 블록 포함하지 않음.


<address>: 연락처 정보 넣음. 이태릭체. 블록 포함하지 않음.


<blockquote>: 텍스트나 인라인 포함하지 않음. 인용에 쓰이며 들여쓰기 출력.




시맨틱 인라인 태그 

<mark> 중요한 텍스트임을 표시


<time> 시간 정보임을 표시


<meter> 주어진 범위나 %의 데이터 양을 표시


<progress> 작업의 진행 정도를 그래프로 표시





<li>: 항목의 내용.


<ol>: 순차적 목록. 번호 부여. <li>만 쓸 수 있다. ol안에 또 ol 사용 가능


<ul>: 비순차적 목록. ·부여. <li>만 쓸 수 있다. ul 안에 또 ul 사용 가능




<dl>: 정의형 목록. 앞에 아무것도 안 붙음. <dt>와 <dd>만 쓸 수 있다.


<dd>: <dl> 안에 쓰는 내용. 들여쓰기



<table>: 테이블. border를 통해 표에 경계선을 준다.

<tr>: 행

<td>: 열. <tr>을 열어서 안에 쓴다.

<th>: 행이나 열의 제목. 볼드+중앙정렬

colspan="열 합치기 개수"

rowspan="행 합치기 개수"

scope="스크린 리더를 위한 기능"

<caption>: 테이블 제목

not html5! css 쓰세요) <col>: 테이블의 각 열을 그룹화. col width="100px" 등으로 열의 사이즈 조절 가능

not html5! css 쓰세요) <colgroup>: <col>을 그룹화

<thead>: 머리말

<tbody>: 본문

<tfoot>: 꼬리말. 테이블의 결과값 정리. 본문보다 앞에 쓰는 것이 전체적인 내용 파악에 도움된다


<form>: 온라인 서식에서 작성한 값들을 서버로 전송하는 역할

action="서버 url"

method="get / post": get은 주소창에 노출, 전송 데이터 적음. post는 노출 x, 전송 데이터 많음.


<fieldset>: <form> 안의 요소 그룹화. 박스 처리 해줌.

<legend>: 그룹 제목


<div>: 블록 요소들을 그룹핑


----------------------------------------------------------------------------------------------------------------------------------------------------------


인라인--------------------------------------------------------------------------------------------------------------------------------------------------

<strong>: 볼드 처리


<em>: 이태릭 처리


<a>: 다른 곳으로 정보를 연결해준다

href="링크 연결". #과 id를 이용해 해당 문서내 원하는 위치로 이동할 수도 있다.


<q>: 인용에 쓰이며 ""처리 됨.


<img>: 이미지 불러오기

src="이미지 파일명" / width="가로길이" / height="세로길이" / alt="이미지가 안 뜰 때의 대체 텍스트"


<map>: 하나의 이미지에 여러 개의 링크 적용(교재 p.46 참고)


<dt>: <dl> 안에 쓰는 제목


<input>: 타입에 따라 폼 컨트롤 생성. 타입은 교재 p.69 참고


<textarea>: 텍스트 상자 생성. cols와 rows로 텍스트 상자의 열과 행 지정(텍스트 상자의 사이즈) 


<select>: 선택 목록 상자 생성.

<option>: value를 통해 실제 전송값 설정.

<optgroup>: 관련있는 <option>을 묶어주는 용도. label과 함께 씀.


<span>: 인라인 요소들을 그룹핑


----------------------------------------------------------------------------------------------------------------------------------------------------------


섹셔닝 컨텐츠; 제목과 footer의 범위를 정의하는 컨텐츠 구역 요소들-----------------------------------------------------------------------------


not html5!!)<hgroup>: 제목과 부제목을 묶어주는 요소

outline이란 특성으로 인해 섹션 요소 안에 있는 최상위 제목 요소(ex: <section>)는

가장 인접한 상위 섹션 요소(ex: body) 안의 최상위 제목 요소보다 한단계 낮은 제목 요소로 만들어진다.

그걸 방지하기 위해 <hgroup>으로 제목과 부제목을 묶어 최상위 제목만 출력한다.

(교재 p.86~ 참고)

<section>: 의미가 같은 내용들을 그룹화

<header>: 문서의 머리말

<footer>: 문서의 꼬리말

<article>: 문서에서 독립적인 컨텐츠

<nav>: 메인 네비게이션

<aside>: 사이드바(메인 컨텐츠와 분리된 독립적 요소)


*<body> 등은 섹셔닝 루트

----------------------------------------------------------------------------------------------------------------------------------------------------------


블록과 인라인 혼합-------------------------------------------------------------------------------------------------------------------------------------

<ins>: 밑줄

<del>: 취소선

<sup>: 윗첨자

<sub>: 아래첨자


----------------------------------------------------------------------------------------------------------------------------------------------------------


빈요소---------------------------------------------------------------------------------------------------------------------------------------------------

<br/>: 줄바꿈

<hr>: 가로줄 긋기

----------------------------------------------------------------------------------------------------------------------------------------------------------


지속적인 추가할 예정 참고하여 글 내용은 아래 출처와 같다.


[출처] 간단한 html태그사전|작성자 박재현


저작자표시

'프로그래밍 > HTML&CSS' 카테고리의 다른 글

CSS3 스타일 시트  (0) 2018.10.27
'프로그래밍/HTML&CSS' Related Articles more