# HTML _ basic

티스토리 뷰

HMLT&CSS&JS/HTML

# HTML _ basic

turfrain 2012. 9. 25. 17:49

1. 시맨틱마크업 html5 테그

<header> 머리말 (섹션해더)

<article> 본문 (독립섹션)
문서에서 독립적인 하나의 콘텐트를 구분하는데 사용한다.
뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수있는 독립된 영역을 지정한다.

<aside> (보조섹션)
문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다.
광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다

<section> 글 영역
사전적 의미 그대로 웹 문서의 한 부분, 한장을 구분하는데 사용한다 문서 내영역의 범위를 한정하며 문서의 아웃라인을 구성한다.

<nav> 네비게이션(탬색 링크의 섹션 정의)

<menu> 메뉴(도구모음 및 목록 양식 컨트롤, 명령)

<hgroup> 문서의 제목을 그룹화 하는데 사용한다. 예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 <h1>요소와 <h2> 요소로 제목, 부제목을 정의하며 이들 제목들은 <hgroup>로 그룹화 된다. 이렇게 하여 여러개의 제목을 묶어 하나의 제목으로 취급할 수 있다

<address> 문서를 제공하는 필자의 연락처 정보 등의 부가 정보를 표현한다

<time> 문서를 제작한 시점, 공개한 시점을 지정하는데 사용한다

<blockquote> 문서에서 인용부분을 정의하는데 사용한다

<footer> 꼬리말(섹션푸터)

1.1 물리적,논리적 스타일테그

<b> 진하게(볼드체) <strong> 강조하는 특정 부분표시

<i> 이탤릭체로 표시 <cite> 참고자료 표시(이텔릭체)

<ins> 삽입된 텍스트 (밑줄) <em> 강조하는 내용표시(이텔릭체)

<s> 글자 가운데에 줄을 그어 표시 <del> 삭제된 텍스트 (취소줄)

<u> 밑줄을 그어 표시 <code> 컴퓨터 코드 표시

<tt> 고정폭 (타자기)글골로 표시 <samp> 프로그램 셈플 코드 표시

<sup> 위첨차 <var> 변수표시(이텔릭체)

<sub> 래첨자 <dfn> 용어에 대한 정의 표시

<big> 글자를 더 크게 표시 <abbr> 축약형 표시

<small> 글자를 더작게 표시 <address> 문서와 관련된 연락 정보 표시

<del> 취소줄 <kbd> 키보드롤 입력한 내용임을 표시

<q> 인용한 단어 등을 표시
긴 인용구 <blockquote>

2. 블록레벨 & 인라인

블록레벨 인라인

<div> <span>

<ol><li></li><ol> : 순서 <em>

<ul><li></li><ul> : 순서 없음 <q> = > <blockquote>

<section> <a>

<article> : 독립된주체 <strong>

<form> <cite> : (예:책, 시, 노래, 영화, 그림, 조각 등) 제목

<p> <dfn> : 정의

<fieldset>
<legend></legend>
<label for="fname">First name:</label>
  <input type="text" id="fname" name="me">
</fieldset>:form

<figure>
<img />
<figcaption></figcaption>
</figure>

<details>
<summary>열고닫고</summay>
<div>내용</div>
</details>

<label for="browser">Choose browser</label>
<input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Edge">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
  </datalist>
<input type="submit">
:form

<blockquote> => <q> []

예> html

<ul>

<li>list1</li>

<li>list1</li>

<li>list1</li>

</ul>

<예> css

ul{

list-style:none; // 불릿 감추기

padding-left:0; // 드려쓰기를 하지않음

list-style-image: url(dot.gif); // 불릿 대신 이미지

}

li{
background:url(li_bg.gif) no-repeat 0 50% // no-repeat 1번만표시 , x 위치,y위치
padding-left: 17px;
}

3. 문구 엘리먼트

<b> => <strong> 의미가 담겨있는 구조적인 태그 "strong" 굵게

<i> => <em> 의미가 담겨있는 구조적인 태그 "me" 이텔릭체

<s> => <del> 취소선

<blockquote> 문단단위의 인용구 (블록레벨)

<q> quote 짧은 인용구 (인라인)

<cite> 인용문이나 참조한 문서의 출처

<dfn> 용어 묶음에 대한 정의

<code> 컴퓨터 프로그래밍 코드

<samp> 프로그램이나 스크립트의 결과 샘플

<pre> 공백 줄바꿈이 보존됨다.

<var> 프로그램의 변수(variable)나 인수(argument)

<abbr> 약자 ( WWW, HTTP , URL , MAss.emd )

<acronym> 두문자어 (WAC , radar) => (HTML5 지원안함)

<li> list item 리스트 아이템 (블록레벨)
순서화된 속성
TYPE=a , TYPE=A , TYPE=I , TYPE=i

<ol> ordered list 순서화된 리스트 (블록레벨)
type= "A" , type= "a" , type= "I" , type= "i" , type= "1"
start="1"; 정수로 값을 지정합니다. 이 속성은 li 목록의 시작번호를 지정합니다.
value="1";  정수로 값을 지정합니다.  li 목록의 번호를 임의로 지정합니다.

숫자css {
list-style-type: decimal;}

type=" "; disk, square, circle 값을 지정하면 목록 모양(●, ■, ○)

<ul type="square"> unordered list 순서화되지 않은 리스트(블록레벨)
<ul style="list-style:none;"> : 스타일 지우기
type="circle" , type="square" ,  type="disk"

<dl> definition list 바로 정의 리스트

<dt> definition title 바로 정의 제목

<dd> definition 바로 정의
<dl>
<dt>제목</dt>
<dd>글내용</dd>
<dd>글내용</dd>
</dl>

ul, ol

(1) list-style-type

목록의 형태를 지정합니다. 이 속성에 지정할 수 있는 값으로는 다음과 같습니다.
▶ 순서 있는 목록의 경우 값  ( < ol type="" > )

decimal 목록을 1부터 시작하도록 합니다.

decimal-leading-zero 목록을 0부터 시작하도록 합니다.

lower-roman 목록을 소문자 로마자로 표시합니다.

upper-roman 목록을 대문자 로마자로 표시합니다.

lower-alpha 목록을 소문자 영문자로 표시합니다.

upper-alpha 목록을 대문자 영문자로 표시합니다.

lower-greek 목록을 소문자 그리스문자로 표시합니다.

▶ 순서 없는 목록의 경우 값 ( < ul type="" > )

none 목록에 대한 모양을 만들지 않습니다.

disc 목록을 점으로 표시합니다.

circle 목록을 원으로 표시합니다.

square 목록을 사각형으로 표시합니다.

(2) list-style-image

목록 리스트에 표시할 모양을 이미지로 지정할 수 있습니다. none와 url값을 줄 수 있으며 url의 경우 url('../image/abc.png') 와 같은 형태로 이미지에 대한 해당 경로를 지정합니다.

(3) list-style-position

이 속성에 inside값을 지정하면 들여쓰기를 적용하며 outside를 지정하면 리스트가 목록 제목의 첫글자 위치에서 보이도록 합니다.

4. 홀태그 목록

area base meta img br embed hr

source keygen link input command col param

5. 태그

5.1 <img>

src 이미지주소

alt 이미지설명 (이미지 주소가 깨졌을때 설정)

align 이미지의 옆의 텍스트 정렬 (top, middle, bottom, right, left)

hspace 이미지의 옆에 의 여백 좌우 = 크기

vspace 이미지의 옆에 의 여백 상하 = 크기

usemap = "#이름" 그림 맵의 지정

5.2 <br>

clear ="left" 그림옆에 텍스트 다음이미지 위치로 보내기

5.3 <a>

href 링크주소 페이지이동(href="#page1")

name 문서의 특정 위치 지정 이동될페이지(name="page1")

target 링크가 열릴 프레임 지정 (새창 :_blank , 현재창 : _self )

title 링크에 마우스 올렸을때 보이는 내용지정

5.4

6. table 태그

<table></table> 테이블 시작과 끝을 알림

<tr></tr> 테이블의 한줄(행)을 나타냄

<td></td> 테이블의 한칸(열)을 나타냄

<colgroup></colgroup> 테이블 속성을 공통으로 주기위한 구릅
<colgroup><col width="300"><col width="100"></colgroup>

<col></col> 각 공통으로 들어갈 td, th의 속성 설정을 위한 태그

<thead></thead> 테이블 머리 말 태그 지정 (구릅핑)

<tbody></tbody> 테이블 내용 (구릅핑)

<tfoot></tfoot> 테이블 꼬리말 (구릅핑)

<th></th> td 의 제목 태그 사용

속성

border 테이블 두계

bordercolor 테이블 색

width 테이블 가로 크기

height 테이블 세로 크기

cellspacing td 에사용 tr 과의 거리 (margin 같은 형태)

cellpadding td 에사용 td와 컨텐츠와의 거리

scope - col : 세로 셀이 열(가로)의 머리글로 지정합니다
- row : 가로 셀이 행(세로) 머리글로 지정합니다
- colgroup :세로 셀의 열(가로) 그룹 머리글로 지정합니다
- rowgroup : 가로 셀이 행(세로) 그룹 머리글로 지정합니다

colspan - 가로줄 수치만큼 합침

rowspan - 세로줄 수치만큼 합침

7. textarea

속성

cols="30" 가로 텍스트 수

rows="5" 세로 텍스트 수

name="name" 요소 이름 지정

readonly="readonly" 클릭은 되지만 텍스트를 입력할 수 없음

onclick="this.select()" onfocus="this.select()" // 클릭하변 자동선택

css

overflow,
overflow-y,
overflow-x :hidden 스크롤 숨김

:scroll 스크롤 보임

:auto 내용이 넘치면 스크롤 자동생성

resize:none; 자동크기조절 막기

html

<textarea id="sms_message" cols="30" rows="5" class="sms_message">메세지 입력
</textarea>

css

textarea { overflow-y:scroll; resize:none;} // 세로스크롤만생기며, 자동크기조절 막기

8. button

속성

disabled disabled 버튼을 보이지 않게

name 버튼이름

type button
reset
submit

value 버튼에 출력될 문자

<button type="button"> click </button>

#. id, name 같은 이름을쓸수있는테그

a , applet , form , frame , iframe , img , map

#. link

- 최대크기 799px 까지 "mobile.css" 스타일을 적용

<link href="mobile.css" rel="stylesheet" type="text/css" media="screen and(max-width:799px)">

#. meta

- 화면에따른 스케일조절을 하지 않고 디바이스의 폭을 적용

<meta name="viewport" content="user-scalable=no , width=device-width">

저작자표시 비영리

'HMLT&CSS&JS > HTML' 카테고리의 다른 글

div & span (0)	2013.10.28
# 특수문자 기호표 (0)	2013.07.22
tag >> canvas (0)	2012.09.10
tag >> table (0)	2011.07.22

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

TRstory

티스토리 뷰

# HTML _ basic

'HMLT&CSS&JS > HTML' 카테고리의 다른 글

티스토리툴바

<header>	머리말 (섹션해더)
<article>	본문 (독립섹션) 문서에서 독립적인 하나의 콘텐트를 구분하는데 사용한다. 뉴스 항목, 블로그 본문과 같이 자체적으로 배포될 수있는 독립된 영역을 지정한다.
<aside>	(보조섹션) 문서의 주요 콘텐트와는 별개의 영역을 정의하는데 사용한다. 광고 블럭과 같이 주변의 콘텐트와 별도로 다뤄지는 영역을 지정한다
<section>	글 영역 사전적 의미 그대로 웹 문서의 한 부분, 한장을 구분하는데 사용한다 문서 내영역의 범위를 한정하며 문서의 아웃라인을 구성한다.
<nav>	네비게이션(탬색 링크의 섹션 정의)
<menu>	메뉴(도구모음 및 목록 양식 컨트롤, 명령)
<hgroup>	문서의 제목을 그룹화 하는데 사용한다. 예를 들어 제목과 부제가 동시에 존재하는 문서의 경우 <h1>요소와 <h2> 요소로 제목, 부제목을 정의하며 이들 제목들은 <hgroup>로 그룹화 된다. 이렇게 하여 여러개의 제목을 묶어 하나의 제목으로 취급할 수 있다
<address>	문서를 제공하는 필자의 연락처 정보 등의 부가 정보를 표현한다
<time>	문서를 제작한 시점, 공개한 시점을 지정하는데 사용한다
<blockquote>	문서에서 인용부분을 정의하는데 사용한다
<footer>	꼬리말(섹션푸터)

<b>	진하게(볼드체)	<strong>	강조하는 특정 부분표시
<i>	이탤릭체로 표시	<cite>	참고자료 표시(이텔릭체)
<ins>	삽입된 텍스트 (밑줄)	<em>	강조하는 내용표시(이텔릭체)
<s>	글자 가운데에 줄을 그어 표시	<del>	삭제된 텍스트 (취소줄)
<u>	밑줄을 그어 표시	<code>	컴퓨터 코드 표시
<tt>	고정폭 (타자기)글골로 표시	<samp>	프로그램 셈플 코드 표시
<sup>	위첨차	<var>	변수표시(이텔릭체)
<sub>	래첨자	<dfn>	용어에 대한 정의 표시
<big>	글자를 더 크게 표시	<abbr>	축약형 표시
<small>	글자를 더작게 표시	<address>	문서와 관련된 연락 정보 표시
<del>	취소줄	<kbd>	키보드롤 입력한 내용임을 표시
		<q>	인용한 단어 등을 표시 긴 인용구 <blockquote>

블록레벨	인라인
<div>	<span>
<ol><li></li><ol> : 순서	<em>
<ul><li></li><ul> : 순서 없음	<q> = > <blockquote>
<section>	<a>
<article> : 독립된주체	<strong>
<form>	<cite> : (예:책, 시, 노래, 영화, 그림, 조각 등) 제목
<p>	<dfn> : 정의

<fieldset> <legend></legend> <label for="fname">First name:</label> <input type="text" id="fname" name="me"> </fieldset>:form
<figure> <img /> <figcaption></figcaption> </figure>
<details> <summary>열고닫고</summay> <div>내용</div> </details>
<label for="browser">Choose browser</label> <input list="browsers" name="browser" id="browser"> <datalist id="browsers"> <option value="Edge"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> :form
<blockquote> => <q>	[]

<b> => <strong>	의미가 담겨있는 구조적인 태그 "strong" 굵게
<i> => <em>	의미가 담겨있는 구조적인 태그 "me" 이텔릭체
<s> => <del>	취소선
<blockquote>	문단단위의 인용구 (블록레벨)
<q>	quote 짧은 인용구 (인라인)
<cite>	인용문이나 참조한 문서의 출처
<dfn>	용어 묶음에 대한 정의
<code>	컴퓨터 프로그래밍 코드
<samp>	프로그램이나 스크립트의 결과 샘플
<pre>	공백 줄바꿈이 보존됨다.
<var>	프로그램의 변수(variable)나 인수(argument)
<abbr>	약자 ( WWW, HTTP , URL , MAss.emd )
<acronym>	두문자어 (WAC , radar) => (HTML5 지원안함)
<li>	list item 리스트 아이템 (블록레벨) 순서화된 속성 TYPE=a , TYPE=A , TYPE=I , TYPE=i
<ol>	ordered list 순서화된 리스트 (블록레벨) type= "A" , type= "a" , type= "I" , type= "i" , type= "1" start="1"; 정수로 값을 지정합니다. 이 속성은 li 목록의 시작번호를 지정합니다. value="1"; 정수로 값을 지정합니다. li 목록의 번호를 임의로 지정합니다. 숫자css { list-style-type: decimal;} type=" "; disk, square, circle 값을 지정하면 목록 모양(●, ■, ○)
<ul type="square">	unordered list 순서화되지 않은 리스트(블록레벨) <ul style="list-style:none;"> : 스타일 지우기 type="circle" , type="square" , type="disk"
<dl>	definition list 바로 정의 리스트
<dt>	definition title 바로 정의 제목
<dd>	definition 바로 정의 <dl> <dt>제목</dt> <dd>글내용</dd> <dd>글내용</dd> </dl>

decimal	목록을 1부터 시작하도록 합니다.
decimal-leading-zero	목록을 0부터 시작하도록 합니다.
lower-roman	목록을 소문자 로마자로 표시합니다.
upper-roman	목록을 대문자 로마자로 표시합니다.
lower-alpha	목록을 소문자 영문자로 표시합니다.
upper-alpha	목록을 대문자 영문자로 표시합니다.
lower-greek	목록을 소문자 그리스문자로 표시합니다.

none	목록에 대한 모양을 만들지 않습니다.
disc	목록을 점으로 표시합니다.
circle	목록을 원으로 표시합니다.
square	목록을 사각형으로 표시합니다.

area	base	meta	img	br	embed	hr
source	keygen	link	input	command	col	param

src	이미지주소
alt	이미지설명 (이미지 주소가 깨졌을때 설정)
align	이미지의 옆의 텍스트 정렬 (top, middle, bottom, right, left)
hspace	이미지의 옆에 의 여백 좌우 = 크기
vspace	이미지의 옆에 의 여백 상하 = 크기
usemap = "#이름"	그림 맵의 지정

clear ="left"	그림옆에 텍스트 다음이미지 위치로 보내기

href	링크주소 페이지이동(href="#page1")
name	문서의 특정 위치 지정 이동될페이지(name="page1")
target	링크가 열릴 프레임 지정 (새창 :_blank , 현재창 : _self )
title	링크에 마우스 올렸을때 보이는 내용지정

<table></table>	테이블 시작과 끝을 알림
<tr></tr>	테이블의 한줄(행)을 나타냄
<td></td>	테이블의 한칸(열)을 나타냄
<colgroup></colgroup>	테이블 속성을 공통으로 주기위한 구릅 <colgroup><col width="300"><col width="100"></colgroup>
<col></col>	각 공통으로 들어갈 td, th의 속성 설정을 위한 태그
<thead></thead>	테이블 머리 말 태그 지정 (구릅핑)
<tbody></tbody>	테이블 내용 (구릅핑)
<tfoot></tfoot>	테이블 꼬리말 (구릅핑)
<th></th>	td 의 제목 태그 사용

border	테이블 두계
bordercolor	테이블 색
width	테이블 가로 크기
height	테이블 세로 크기
cellspacing	td 에사용 tr 과의 거리 (margin 같은 형태)
cellpadding	td 에사용 td와 컨텐츠와의 거리
scope	- col : 세로 셀이 열(가로)의 머리글로 지정합니다 - row : 가로 셀이 행(세로) 머리글로 지정합니다 - colgroup :세로 셀의 열(가로) 그룹 머리글로 지정합니다 - rowgroup : 가로 셀이 행(세로) 그룹 머리글로 지정합니다
colspan	- 가로줄 수치만큼 합침
rowspan	- 세로줄 수치만큼 합침

cols="30"	가로 텍스트 수
rows="5"	세로 텍스트 수
name="name"	요소 이름 지정
readonly="readonly"	클릭은 되지만 텍스트를 입력할 수 없음
	onclick="this.select()" onfocus="this.select()" // 클릭하변 자동선택

overflow, overflow-y, overflow-x	:hidden	스크롤 숨김
	:scroll	스크롤 보임
	:auto	내용이 넘치면 스크롤 자동생성
resize:none;		자동크기조절 막기

disabled	disabled	버튼을 보이지 않게
name		버튼이름
type	button reset submit
value		버튼에 출력될 문자