각종 html 요소 알아보기

각종 html 요소 알아보기

문자 실제 참조와 수치 문자 참조 적용

문자를 풀어서 쓰는 여러가지 방법이 있다.

xml, XHTML에서는 문자 참조를 엄격하게 다뤘지만 HTML에서는 유연해졌다.

<,>는 태그로 인식하기 때문에 화면에 텍스트가 나타나지 않는다. < >로 표현한다.

xhtml에서는 숫자 문자 참조를 더 권장한다.

구문을 강조하거나 하이라이팅 지정하기

strong, em, mark

em은 주관적인 강조이다.

strong은 객관적인 강조이다.

mark는 주위를 환기하는 강조이다. 어떤 내용을 설명하기 전에 그것에 대한 결론을 먼저 이야기 할 때 사용한다. 형광펜 느낌!

단의어 정의와 약어, 작품의 제목 표현

dfn, abbr, cite

dfn: 단어의 정의, 뜻

abbr: 약어

cite: 작품 제목

small: 저작권이나 side comment를 설명할 때 사용한다.

모두 인라인 태그이다.

루비 주석과 시간의 표현

ruby, time

ruby: 글자 위에 장식을 하거나 설명을 쓸 때 사용된다. 일본어, 영어, 한자의 경우 뜻을 설명할 때 좋다. rt와 같이 사용한다.

time: datetime이라는 속성으로 날짜를 표현할 수 있다. 화면에 날짜가 나타나지는 않지만 컴퓨터는 읽을 수 있다.

제목, 문단, 연락처, 인용문

h1~h6, p, address, blockquote, hr, pre

h1~h6: 제목

p: 문단, 단락

address: 주소, 연락처

blockquote: 인용문이며, p 태그(블록 태그)를 포함할 수 있다. 너무 길면 듣기 힘든데 title속성을 추가해서 요약된 내용만 들을 수 있다. html5에서는 footer 태그에 사용하기도 한다.

hr: 가로 구분선이며 이전 내용과 다른 내용이 나타날 것이라는 것을 말한다.

pre: 실제 코드에서 작성한 공백만큼 텍스트가 보인다.

태그를 용도에 맞게 쓰는 것이 semantic이며 웹 표준에선 굉장히 중요한 부분이다.

목록 작성하기

ul, ol, li, dl, dt, dd

ul: 자식 요소로 li만 올 수 있다. 순서가 없는 목록(unorder list)

ol: 자식 요소로 li만 올 수 있다. 순서가 있는 목록. type으로 숫자를 변경할 수도 있다.

li: 내부에 어떤 태그든 올 수 있다. p, h, address 등...

dl: 정의형 목록, dt가 하나인데 dd가 여러가지 인것은 큰 문제가 되지 않지만 dt가 여러개이고 dd가 적은 것은 문제가 있다. 꼭 dt를 설명하는 dd가 있어야 한다. dd는 꼭 dt를 설명해야 한다.

dt: 용어 이름, 제목, dt안에는 inline 태그만 있어야 한다.

dd: 용어 설명, 내용, dd안에는 어떠한 블록 태그가 와도 된다.

목록을 만들 때는 ul을 더 선호한다. 용어 설명 같은 경우에는 dl이 더 효과적이다.

테이블 작성하기

웹 표준에서는 table을 통해 layout을 짜면 안된다. div나 section을 사용하는게 좋다.

caption: 테이블 제목

thead: 제목이라고 볼 수 있다.

tbody: 본문, 필수이다.

tfoot: 결과?

th: scope를 지정해야 한다.(scope= col | row | colgroup | rowgroup)

colspan, rowspan은 cell을 합친다.

colgroup으로 테이블의 크기 비율을 정할 수 있다. 적어도 한 칸은 비워두는게 좋다.

a요소 알아보기

anchore: title, target 속성을 사용하는 경우가 있다.

img 경로를 설정하고 download 속성을 적으면 다운로드 된다.

'mailto:'를 사용해서 이메일을 설정할 수도 있다.

파일로 이동할 수도 있다.

tabindex, accesskey

accesskey: 특정 링크를 단축키로 접근할 수 있다. alt + 해당 문자(크롬) alt + 해당 문자 + enter(IE)

tabindex: a, input, button, select, textarea, ... 가 속하며, 순서를 조정할 수 있다.

img요소 알아보기

alt는 대부분의 경우 사용해야 한다(접근성) ⇒ 그림의 내용을 그대로 적으면 된다.약도같은 경우에는 필요한 목적지만 적으면 된다.

필요없는 부분은 값만 비운 상태로 놔둔다.

londesc의 속성은 data가 담겨진 파일의 정보를 불러와서 텍스트를 소리로 들을 수 있다. 요즘에는 css로 background 이미지와 text-indent를 사용해서 나타낸다.

이미지맵 만들기

img 태그 안에 usemap 속성을 추가한다.

map 태그를 추가하고 내부에 area 태그를 추가한다.

area는 shape, coords, href, alt의 속성이 있다

shape: 모양

coords: shape에 따른 좌표값(rect: 시작점 끝점, circle: 중심점의 x,y , 반지름, poly: x,y 를 계속 반복해서 적으면 된다. )

href: 링크

alt: 설명

아이프레임 알아보기

iframe 태그를 통해서 원하는 파일에 접근할 수 있다.

src, frameborder 속성이 있다.

width, height를 사용한다.

접근성의 입장에서 좋은건 아니다.

title을 사용해서 어떤 내용인지 알려주는 것이 좋다.

iframe이 접근되지 않는 경우도 있다.

이때는 sandbox 속성을 추가한다.(script 코드가 실행되지 않아도 될 때)

폼 컨트롤 알아보기

form 태그

action 속성이 있다. → submit에 의해 데이터가 전송되는 경로

method 속성 → get, post ...

회원가입, 로그인 경우에는 post

search같은 경우에는 get도 괜찮다.

textarea는 공백 없이 붙여 써야 한다.

radio같은 경우에는 같은 name을 적어야 한다. 같은 name 값 중에서 하나만 선택한다.

button관련 해서 input보다 button이 디자인에서 더 좋다. 성능은 같다.

html5에서 추가 된 폼 콘트롤과 속성들

type email

form 태그에 novalidate 속성을 추가하면 문법 검증하지 않는다.

type num 는 min, max 속성을 추가하여 제한할 수 있다.

type range도 min, max 속성을 줄 수 있고 step을 사용할 수도 있다.

type date는 아직 이르다. min max 속성도 가능 ⇒ 시작일, 마지막일 정할 수 있다.

type tel 은 전화번호이며 큰 변화는 없지만 자판이 최적화되어 바뀐다

disabled 속성을 사용하면 입력이 안된다.

openfocus를 사용하면 처음 커서가 깜빡이는 위치를 정할 수 있다.

required는 필수 입력 항목을 설정한다.

autocomplete는 자동완성이다. 기본은 on 인데 쓰고 싶지 않은 경우 off를 쓰면 된다