Publishing

HTML Elements

oodada 2020. 11. 11. 11:28
반응형

전역 구조화 Element

<html>

class Attribute 사용은 하지 않는다.XHTML dtd 사용시에는 다음과 같이 XML namespace 및 lang attribute를 선언해준다

<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">

<head>

meta, title, link, style, script 순으로 Element 를 선언한다

<meta>

문서의 기본 인코딩 및 뷰포트 등을 선언한다. (뷰포트는 모바일 서비스의 경우에만 선언)<title>현재 페이지의 제목을 선언한다.<link>rel, type, href 순서로 attribute를 선언한다

<link rel="stylesheet" type="text/css" href="common.css">

<style>

type attribute를 선언한다

<style type="text/css">
  body{}
  ...
</style>

하위에 선언이 되는 CSS는 <style> Element보다 1depth 들여쓴다

<script>

type, src 순서로 attribute를 선언한다하위에 선언이 되는 CSS는 <style> Element보다 1depth 들여쓴다.script의 선언 위치는 head내에 선언하는 것을 원칙으로 하되, 성능상의 이슈 및 특별한 경우는 선언위치를 변경한다.

<script type="text/javascript" src="jigu.js"></script>
<script type="text/javascript">
  var d=document;
  ......
</script>

<body>

body Element에는 다른 attribute를 사용하지 않는 것을 원칙으로 한다.

 

제목, 문단, 구분선 Element

Heading

  • 의미 : HTML 구조상 문서 내부의 컨텐츠 제목을 정의한다.
  • 사용 : 각 부분별로 논리적인 규칙에 맞추어 Heading의 계층을 구성한다.

P

  • 의미 : 텍스트의 문단 요소로 사용한다.
  • 사용 : 의미상 문단을 구분하기 위한 용도로 사용하며, 시작 효과를 위해서나 문단으로써 의미가 없는 부분에 사용 하지 않는다.

hr

  • 의미 : 문서 내에 구분선을 표시한다.
  • 사용 : 의미상으로 컨텐츠간의 경계를 표시할때 사용한다.

 

목록 Element

li

  • 의미 : 목록에서 목록 아이템을 표시한다.
  • 사용 : 특별한 경우(중첩 메뉴등)가 아니라면 li 안에 다른 목록 Element 작성을 금한다.

ul

  • 의미 : 순서가 정의되지 않는 목록을 작성한다.
  • 사용 : 자식 element로는 li만 포함이 허용된다.

ol

  • 의미 : 순서가 정의된 목록을 작성한다.
  • 사용 : ul과 마찬가지로 자식 element로는 li만 포함이 허용된다.

 

dl

  • 정의형(사전형)의 목록을 작성한다. 포함하는 아이템으로 dt및 dd만 포함 할 수 있다.

dt

  • 정의형 목록의 타이틀을 뜻한다.

dd

  • 정의형 목록의 설명을 뜻한다.

 

표 Element

표는 다음과 같이 작성한다.

<table cellspacing="0" cellpadding="0" summary="날짜별로 부산국제영화제 롯데시네마 센텀시티점에서 상영하는 영화의 제목과 상영시간, 예매 링크를 안내합니다">
  <caption>롯데시네마 센텀시티점 BIFF 상영시간표</caption>
  <colgroup>
    <col width="113" />
    <col width="232" />
    <col width="261" />
    <col width="63" />
  </colgroup>
  <thead>
  <tr>
    <th scope="col">날짜</th>
    <th scope="col">영화명</th>
    <th scope="col">상영시간</th>
    <th scope="col">예매</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row" rowspan="1">10월6일</th>
      <td>15세 이상 관람가 오직 그대만</td>
      <td>20:00</td>
      <td>예매</td>
    </tr>
  </tbody>
</table>

table

  • 특이한 경우가 아니라면 레이아웃을 표현하기 위해 사용하지 않는다.
  • cellspacing, cellpadding, summary 순서로 attribute를 선언한다.
  • summary는 표의 내용을 요약하여 표기하되, th에 들어가있는 내용들을 전부 포함하여야 한다.

caption

  • 표의 제목을 표현한다.

colgroup

  • td엘리먼트들을 열로 묶어 제어할 때 선언한다.

col

  • 테이블의 각 열의 너비 지정을 위해 선언한다.

thead

  • 항목의 제목을 묶을때 사용한다.
  • thead 자식 element는 th만 와야하며, td가 포함이 되는 경우에는 thead로 묶지 않는다.

tfoot

  • 테이블의 하단을 묶을때 사용한다.
  • thead와 tbody 사이에 위치하여야 하며, 필수항목은 아니다.
  • ※ 테이블을 인쇄할때 테이블이 여러페이지에 걸친 경우, 모든 페이지에 thead와 tfoot이 반복해서 출력된다.
  • tbody테이블의 본문을 묶을때 사용한다.

tr

  • 각 테이블의 행을 표시한다. 자식 element로는 th 또는 td만이 위치할 수 있다.

td

  • 각 테이블의 셀 하나하나를 표시한다.

th

  • 테이블의 제목 셀을 표시한다 scope attribute로 현재의 셀이 어느 셀의 제목인지 범위를 명시해준다.

td, th 공통 attribute

  • rowspan : 수직 방향으로 셀을 결합한다
  • colspan : 수평방향으로 셀을 결합한다

 

링크, 이미지, 이미지맵

a (Anchor)

  • 의미 : 텍스트 및 이미지에 하이퍼텍스트를 설정한다.
  • 사용 : 인라인 요소로, 인라인요소와 텍스트를 포함 할 수 있다.
  • 속성
    • href : 하이퍼링크 주소 지정
    • id, name : 앵커 식별자 지정
    • title : 하이퍼링크의 보충 정보를 표시. 대다수의 브라우저에서 툴팁으로 표시된다
    • target : 하이퍼링크가 열릴 대상을 지정한다. _blank/_liarent/_self/_toli/각 프레임의 name.

img

  • 의미 : 이미지를 삽입한다.
  • 사용 : 인라인 요소이며, 빈 요소로 종료태그가 없는 요소이다.
  • 속성
    • src : 삽입할 이미지의 파일명 혹은 url을 지정한다.
    • alt(Alternative Text) : 이미지의 대체텍스트를 지정한다. IE에서는 툴팁으로 표시가 된다.
    • width, height : 이미지의 가로/세로 크기를 지정한다.
    • 페이지 렌더링시 width, height 속성의 값만큼 영역을 확보하고 그 이외의 부분에 다른 부분을 표시함으로 이미지가 없어서 발생할 수있는 레아아웃 상의 어긋남을 사전에 방지하는 효과를 줄 수 있다.
    • border : 이미지 테두리의 두께를 설정한다. 의미가 없는 표현만을 위한 속성이므로 CSS로 컨트롤 하는 것을 권장한다.
    • longdesc : 이미지에 대한 자세한 설명이 있는 페이지의 경로를 지정한다. alt 속성을 보완하는 용도로 사용한다.
    • align, hspace, vspace : 수평/수직 위치 및 상하/좌우 여백을 지정한다. 의미가 없는 표현만을 위한 속성이므로 CSS로 컨트롤 하는 것을 권장한다.
    • usemap : 이미지맵의 name속성과 매칭시켜 이미지맵을 사용하게한다.

map

  • 의미 : 블록요소로 이미지맵을 정의한다.
  • 주요속성 : name, id속성. img요소의 usemap 속성값과 name속성의 값을 매칭시켜 연관시킴
이미지 맵이란?
이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로 이동하도록 만드는 기법

area

  • 의미 : 이미지맵의 영역을 지정한다.
  • 사용 : 빈 요소로 종료태그가 없다.
  • 속성
    • href : URL을 지정한다.
    • alt : 이미지의 alt속성처럼 해당 하이퍼텍스트에 대한 대체 텍스트를 지정한다.
    • shape : 영역의 형태를 지정 (default / rect / circle / poly)
    • coords : 영역의 좌표 (이미지의 좌측 상단을 원점 0,0 으로 기준)를 쉼표로 구분하여 지정한다. shape속성값에 따라 지정방법이 조금씩 다르다.
      • - rect : 사각형의 완쪽 상단 점 x,y좌표, 오른쪽 하단 점 x,y좌표
      • - circle : 원 중심의 x,y좌표, 원의 반지름
      • - poly : 첫번째 각의 x,y좌표, 두번째각의 x,y좌표...

 

텍스트

em

  • 의미 : 일반적인 강조의 의미를 갖는다.
  • 사용 : 특정 텍스트를 강조하는 인라인 요소이다. 보통 이탤릭 스타일을 기본 스타일로 갖는다.

strong

  • 의미 : 강한 강조의 의미를 갖는다.
  • 사용 : 특정 텍스트를 강조하는 인라인 요소이다. 보통 볼드체의 스타일을 기본 스타일로 갖는다.
  •  

그룹

  • 그룹화 (grouping element)요소이다.
  • 주로 id, class속성으로 CSS를 적용하기 위해 사용한다.
  • 무분별한 그룹화 사용은 지양해야한다.

div

  • 의미 : 블록요소로, 요소들을 그룹화할때 사용한다.
  • 사용 : 블록요소 및 인라인요소, 텍스트를 포함한다.

span

  • 의미 : 인라인요소로, 인라인요소들을 그룹화할때 사용한다.
  • 사용 : 인라인 요소와 텍스트를 포함한다.

 

폼

일반적인 폼의 경우 아래와 같이 작성을 한다.

<form action="#">
  <fieldset>
    <legend>검색</legend>
    <label for="tfSearch">키워드 입력</label>
    <input type="text" id="tfSearch" name="tfSearch" alt="검색어 입력창">
    <input type="submit" value="검색">
  </fieldset>
</form>

form

  • 의미 : 폼의 최상위 요소로 폼을 구성한다.
    • action : 폼을 전송할 URL 지정
    • method : 폼의 데이터를 전송하는 방법
      • get : 간단한 데이터 전송시 사용하며, url에 파라미터 값을 붙여 전송한다. 데이터가 URL에 그대로 노출되어 보안유지가 안된다
      • post : http헤더에 포함되어 서버로 전송이 되며, 일정크기 이상의 데이터 전송시 사용한다. 데이터가 URL에 노출되는 get 방식에 비해서 보안유지에 그나마 유리하다

fieldset, legend

  • 의미 : 여러 폼 컨트롤을 폼 안에서 그룹화 하는 요소.
  • 주요속성
    • fieldset 요소로 그룹화 하는 범위를 정의한 후 legend 요소로 그룹화한 범위의 제목을 표시
    • legend요소는 fieldset 요소의 바로 뒤에 한번만 사용 가능하다

label

  • 의미 : 폼 컨트롤에 레이블을 정의하는 요소.
  • 사용
    • label요소에 특정 텍스트를 레이블로 정의 함으로써 컨트롤과 관련시킬 수 있으며 동기화가 가능하다 (레이블과 체크박스 중 어느쪽을 선택해도 체크박스가 선택됨)
    • 명시적 레이블 부여
      - label 요소의 for 속성에 해당 컨트롤의 id속성과 같은 값을 지정
      - 하나의 컨트롤에 복수의 레이블을 지정 가능하다
      - label 요소와 컨트롤은 인접 할 필요가 없다
      • <label for="male">남자</label> <input type="radio" name="sex" id="male" value="m">
      • <label for="female">여자</label> <input type="radio" name="sex" id="female" value="f">

input

  • 의미 : 인라인 요소이며 빈요소로, 폼 안에 기본적인 컨트롤을 생성한다.
  • type 속성
    • text : 일반 텍스트 입력필드
    • password
      - 비밀번호 입력필드
      - 대부분의 브라우저에서 입력한 텍스트를 "*" 등으로 감추어(masking) 표시한다
      - 일반 텍스트로 전송되기 떄문에 실제 데이터 전송시에는 해당 부분에 대한 암호화가 필요하다
    • checkbox : 복수 선택 가능한 체크박스
    • radio : 한개만 선택 가능한 라디오버튼
    • submit : 폼 송신 버튼
    • reset : 폼 리셋 버튼 (입력 내용 전부를 초기화함)
    • button : 범용 버튼
    • image : 송신 이미지버튼 (src 속성과 alt 속성을 지정해야함)
    • file : 송신파일 선택 필드
    • hidden : 숨겨진 필드 (화면에는 표시되지 않으나, 서버로 전송할 데이터를 지정)
  • 속성
    • name : 해당 컨트롤의 이름 (서버에서 처리할 데이터의 컨트롤에는 name 속성이 반드시 필요)
    • value : 해당 컨트롤의 값
    • size : text, password 컨트롤의 가로크기
      - 미 지정시 컨트롤의 폭은 브라우저에 따라 달라짐
      - 지정을 하여도 브라우저의 설정 혹은 글꼴 크기에 따라 달라질 수 있다
    • maxlength : text, password 컨트롤의 최대 입력 문자수를 지정
    • checked : 체크박스, 라디오버튼의 초기 선택 상태를 지정
    • disabled : 해당 컨트롤을 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터를 서버로 전송하지 않게함
    • readonly : 컨트롤의 내용을 변경되지 않게 하지만 데이터는 전송한다.
  • 예시
<input type="submit" name="submit1" value="전송하기">
<input type="password" name="password1" size="10" maxlength="10">
<input type="radio" name="radio1" value="radio_value1" checked="checked">

select

  • 의미 : 셀렉트 메뉴 전체를 정의하는 요소
  • 주요 속성
  • name : 셀렉트메뉴의 이름 지정
  • size : 표시 줄 수 지정을 하고 목록을 박스로 표시. 지정된 size를 넘는 항목의 선택을 위해 스크롤바가 자동으로 표시됨.

option

  • 의미 : 셀렉트메뉴의 항목을 정의하는 요소. select요소에는 한 개 이상의 option요소가 포함되어야한다
  • 주요속성
    • selected : 해당 항목이 선택된 상태 (선택된 option요소가 없을 경우 첫번째 option요소가 기본으로 선택)
    • value : 선택된 항목의 값

textarea

  • 의미 : 여러 줄로 된 텍스트 필드를 생성하는 인라인 요소.
  • 속성
    • name, disabled, readonly : input 요소의 속성 설명과 동일
    • rows : 표시 줄수를 지정 (입력 가능한 줄이 아닌, 브라우저에서 보여지는 줄의 수)
    • cols : 표시 폭을 문자수로 지정

button

  • 의미 : 버튼을 생성하는 인라인요소.
    기능적으로는 input요소로 생성하는 버튼과 같지만, 이미지나 텍스트 등을 포함 할 수 있어 유연한 디자인이 가능함.
  • 속성
    • type (기본값이 브라우저에 따라 다를 수 있어, type을 기입해준다)
      • submit : 송신버튼
      • reset : 리셋버튼
      • button : 범용버튼

예시

<button type="button">이미지 혹은 텍스트</button>
반응형
저작자표시 비영리 동일조건

'Publishing' 카테고리의 다른 글

Naming Guide  (0) 2020.11.11
IR 기법  (0) 2020.11.11
CSS Convention  (0) 2020.11.11
HTML Grammar  (0) 2020.11.11
HTML Convention  (0) 2020.11.11

'Publishing'의 다른글

  • 현재글HTML Elements

관련글

티스토리 친구하기

티스토리툴바