HTML&CSS 본문

(X)HTML Elements

전역 구조화 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 : 폼의 데이터를 전송하는 방법
    1. get : 간단한 데이터 전송시 사용하며, url에 파라미터 값을 붙여 전송한다. 데이터가 URL에 그대로 노출되어 보안유지가 안된다
    2. 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">
  • 암묵적 레이블 부여
    - label 요소의 범위에 텍스트와 컨트롤을 포함하는 방법
    - 하나의 컨트롤에 복수의 레이블 지정이 불가능하다
    - 텍스트와 컨트롤은 반트시 label요소에 포함되어야 한다
    <label>남자 <input type="radio" name="sex" id="male" value="m"></label>
    <label>여자 <input type="radio" name="sex" id="female" value="f"></label>
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>