본문 바로가기

웹개발

각종 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를 쓰면 된다

'웹개발' 카테고리의 다른 글

맥 디스크 용량 정리 쉽게 하기!(무료)  (4) 2020.02.19
폰트 스타일  (2) 2020.01.03
css 기초  (0) 2020.01.03
각종 html 요소 알아보기  (0) 2020.01.03
자바스크립트 클로저(javascript closures)  (2) 2020.01.02
자바스크립트 비동기(Call Back & Promise)  (0) 2020.01.02