-
HTML 태그 정리Front-End 2018. 3. 28. 10:28
HTML 태그 정리
명칭 구성 내용 html <html>...</html> head <head>...</head> 머리말 meta <meta... /> 정보에 대한 정보를 알려줌. 빈태그, self close title <title>...</title> 문서 제목 body <body>...</body> 본문 p <p>...</p> Paragraph의 P : 단락, 문단, 절 h1 ~ h6 <h1>...</h1> 제목, 글자 크기, 요즘은 중요도 우선순. h1은 화사 로고에 많이 표시 hr <hr> 단락 구분. 문서의 구분선 주석태그 <!-- --> 주석 br <br /> break, 줄바꿈을 해줄때 div <div>...</div> division의 약자. HTML 문서 영역이나 섹션의 분할을 정의한다. span <span>...</span> inline요소, 줄바꿈이 안되고, 폭 , 높이 적용도 안됨. 인라인요소들을 그룹화 하는데 사용되며, 브라우저에 레이아웃 변경은 되지 않는다. table <table>...</table> 표, border, cellpadding, cellspacing, width, summary의 속성값이 있음. 세로정렬이 자동. 게시판에 많이 이용 - border - 테이블의 선 두께
- cellpadding - 셀 안쪽 여백
- cellspacing - 셀과 셀 사이 간격
- width - 테이블의 넓이
- summary - 요약, 잘 사용하지 않음
caption <caption>...</caption> summary 역할. css에서 안보이게 함. 스크린리더기에 활용 colgroup <colgroup>...</colgroup> 열 그룹. 구조적인 그룹화를 위해 사용됨 col <col...> 빈태그 이지만 유일하게 self colse가 없다. 열의속성값과 스타일을 지정 thead <thead>...</thead> 테이블 헤더 행 그룹 tbody <tbody>...</tbody> 테이블 내용 행 그룹 tfoot <tfoot>...</tfoot> 테이블 푸터행 그룹. 계산시 합계 부분에 많이 이용, tbody 위에 올 수 있다. 화면상에서는 아래에 위치 th <th>...</th> 셀 제목으로 지정하여 강조되게 표시하는 태그. table header, inline요소 tr <tr>...</tr> 테이블 내의 한 행을 정의하는 태그. tabel row td <td>...</td> 각 행에 포함된 셀을 만들때 사용되는 태그. table data, td의 개수는 th의 개수와 일치 해야한다. inline요소 - colspan - 가로 행을 합쳐준다.
- rowspan - 세로 열을 합쳐준다.
- * 합쳐준 개수만큼 td 항목을 없애줘야 한다.
ol <ol>...</ol> ordered list. 순서가 있다. 앞에 넘버링이 붙는다. ul <ul>...</ul> unordered list. 순서가 없다. 앞에 기호가 붙는다. li <li>...</li> list. ol과 ul의 세부 항목. ol과 ul의 자식으로 li만 올 수 있다. dl <dl>...</dl> definition list(정의 목록) dt <dt>...</dt> 항목 definition term dd <dd>...</dd> 설명 definition description a <a href="" target="">daum</a> anchor. 링크 연결. inline요소
a 태그의 속성- href - 목적지, url
- target - 보여질 위치 * target의 속성
- _blank - 새창
- _self - 이동
- _parent - 먼저 띄워진 창
- _top - 현재 띄워진 가장 최상단에 위치한 창
- name - a태그의 이름 지정(북마크 역할)
- title -링크에 대한 설명
- href - 목적지, url
- a:link - 방문 안한 곳, 파란색
- a:visit - 방문 한 곳, 보라색
- a:hover - 마우스 올렸을 때
- a:active - 활성화 된 링크, 빨간색
링크 속성 ":"는 가상 클래스img <img src="" alt="" /> 이미지 가져오기, inline요소
이미지 속성- src - 경로 지정, 필수 입력
- alt - 이미지를 위한 대체텍스트를 정의
- title - 거의 사용하지 않음.
form <form>name="numberJoin" action="aa.html"method="post"</form> 입력을 받음. 게시판, 설문조사, 회원등록 등 폼 속성 - name - 전송될 데이터의 이름. value는 text. 해당 입력양식이 어느 폼에서 만들어졌는지 식별
- action - 입력된 데이터가 전송될 페이지를 지정. value는 url. 개발자가 주로 정함.
- method - 입력데이터가 처리될 방식. value는 get(소량) / post(대량). get이 default. 사용은 post로
fieldset <fieldset>...</fieldset> form 안에 논리적으로 묶인 구성요소를 그룹으로 묶을 때. 사각형 모양으로 표시
fieldset 요소의 제목은 legend 태그를 사용legend <legend>...</legend> fieldset에 대한 설명. 여기서의 legend는 설명(caption), 범례의 의미와 가깝다. label <label>...</label> 리더기가 읽어주는 부분(웹접근성)에서 중요한 요소, 다양한 폼 서식의 설명.
for 속성 - 라벨에 표시되는 양식폼 요소의 이름을 지정.input <input.../input> 입력 상자. 속성에 type, name, value, checked, maxlength, readonly, disabled - name - 필수 입력. 이름지정
- value - 입력 구성요소의 값을 지정
- checked - 'checked', 'radio' 일 경우 체크된 상태로 표시하게 함. checked 사용시 name값이 동일해야 함
- maxlength - 타입 속성이 text, password 일 경우 입력 가능한 최대 문자수를 지정
- readonly - 타입 속성이 text, password 일 경우, 요소의 값을 수정할 수 없는 읽기 전용으로 지정, 데이터 전송이 가능
- disabled - 페이지가 로드될 때 폼 구성요소를 선택할 수 없게 한다. 수정 불가능, 데이터 전송 불가능
- type - 입력 구성 요소의 종류를 지정 * type 속성 종류
- text - 텍스트
- password - 비밀번호창
- email - 이메일입력
- radio - 하나만 선택
- checkbox - 원하는 만큼 선택
- file - 파일첨부
- submit - 폼의 액션페이지로 전송
- reset - 초기화
- button - 이벤트 발생, 자바스크립트가 붙는다
- hidden - 개발자가 이용
textarea <textarea="say" cols="50" rows="5">하고픈 말을 적으세요 </textarea> 긴 글 작성시 사용. 여러 줄의 텍스트를 입력할 수 있는 상자를 만듦. select / option <select name="email"> <option value="1">naver </option>
<option value="2'">daum</option>
<option value="3'">google</option> </select>선택메뉴(드롭다운 리스트), select 요소 내의 태그에 목록에 있는 사용 가능한 옵션을 정의한다. button <button> </button> 버튼생성, submit, reset, button. 유일하게 css값을 가지고 있는 태그, css초기화필요 'Front-End' 카테고리의 다른 글
React vs Angular vs Vue (0) 2019.01.16 Rappid / JointJS 프로젝트 완료 (0) 2018.12.21 Intellij 코드 자동정렬 Ctrl + Shift + F (1) 2018.11.06 JointJS 필요부분 정리 (0) 2018.11.02 동적 CP 추가관련 참고 API (0) 2018.11.01 CSS 공부 추천 (0) 2018.04.24 CSS position 속성 (0) 2018.03.28 댓글