ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 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

    댓글

COPYRIGHT 2010 EpoNg. ALL RIGHTS RESERVED.