IT/HTML

-HTML중급-

인러너 2018. 6. 18. 11:40

참고: 본문은 http://webberstudy.com  내용의 글을 정리한 것입니다. 


1. 웹표준


웹 표준은 웹에 관한 표준 규격임.

과거에는 표준에 대한 정의가 부족했고, 절대적인 점유율을 가진 IE가 표준을 준수하지 않아 표준에 대한 인식이 낮았음.

현재 나오고 있는 최신 브라우저들은 대부분 웹 표준을 준수.

때문에 웹 표준을 준수하는 것은 소스의 지속성을 길게하고, 보다 견고하고 쉬운 유지보수를 제공.

웹 표준의 기본은 내용(HTML)과 외형(CSS), 동작(JS)의 분리.

HTML의 표준은 인라인 요소와 블럭 요소를 잘 구분하여 사용하면 대부분 준수. 여기에 몇 가지 태그(p, ul, ol, dl 등)만 주의하면 웹 표준은 거의 준수.

HTML 마크 업의 표준 검증은 W3C 마크업 검증 서비스를 이용하면 편리.


2. doctype(독타입)


웹 표준을 준수하는데 가장 먼저 해야할 일은 문서 맨 상단에 !doctype을 선언하는 것.

HTML은 태그 사용에 좀 더 유연한 반면, XHTML은 태그 사용에 매우 엄격함.

하지만 XHTML같은 엄격한 표준은 작성자에게 보다 좋은 습관을 들이게하며, 추후 유지보수 수정이 더 쉬워짐.

HTML 4.01의 strict는 엄격한 규격. 표현에 관련된 태그는 사용 불가

tranditional은 과도기적인 규격

frameset은 과거 프레임을 나눠 레이아웃을 제작하던 방식의 규격. 현재는 사용하지 않음.

비표준 문서로 렌더링 시, 기존 표준 문서와는 다른 형태로 렌더링 될 수 있음.

웹 페이지의 크로스 브라우징을 위해선 꼭 표준을 지켜야 하며, 표준을 위해 꼭 올바른 독타입(doctype)을 선언해야 함.


3. 사용하지 말아야할 요소들


외형적인 역할을 담은 font, center 같은 태그는 CSS로 처리해야 함.

blink, marquee 같은 태그는 페이지를 산만하게 만들고 강박장애 등을 일으킬 수 있으므로, 절대 사용 금지.

iframe으로 페이지를 넣을 경우, 검색엔진이나 스크린리더의 접근이 어려울 수 있으므로, 부득이한 경우가 아니면 지양할 것.

big과 small은 외형적인 태그. CSS 처리 권장

i, b, s는 보다 의미있는 em, strong, del 요소로 사용 권장


4. 문구 요소들2


abbr 요소는 축약어를 나타내는 요소.

abbr은 알파벳을 따로 읽는 축약어, acronym은 알파벳을 붙여서 읽는 축약어.

address 요소는 페이지 저자의 연락처를 나타냄 (저자가 아닌 사람들의 주소를 나타내선 안됨).

dfn 개념 정의 요소.

code는 프로그래밍 소스를 표현.

samp는 화면에 출력되는 텍스트.


5. 테이블 요소의 기본 구조


테이블 요소들은 레이아웃이 아닌 도표의 의미가 필요할 때에만 사용.

테이블 요소들은 table 요소안에 포함.

tr은 행, td는 셀.

tr이 먼저 만들어지고, 그 안에 td가 들어가는 방식.

헤더, 제목이 되는 셀은 th 사용.

colspan 속성은 열 병합, rowspan 속성은 행 병합.

셀 병합을 할 경우, 병합된 개수 만큼의 셀은 뺄 것.


6. 테이블 요소의 의미적 작성


caption는 표의 제목을 나타내며, 무조건 table의 첫번째 자식으로 와야함.

summary 속성은 시각 장애인, 스크린 리더로 접근하는 분들에게 테이블을 어떻게 접근해야하는 지 안내.

colgroup 요소는 열(수직방향)들을 그룹화.

thead, tbody, tfoot 요소는 행(가로방향)들을 그룹화.

thead 요소는 테이블의 제목 그룹화. 한 번만 선언 가능하며, tbody나 tfoot 보다 먼저 위치.

tbody 요소는 테이블 본문을 그룹화. 여러번 선언 가능함.

tfoot 요소는 테이블의 하단 요약부분을 그룹화. 한 번만 선언 가능.

scope 속성은 th가 어느 영역의 제목인지를 명시.

테이블 요소는 접근성이 어려울 수 밖에 없음. 작성 전 꼭 테이블로 작성해야하는지 고민해보고, 작성하더라도 복잡하지 않도록 구성.


7. 테이블 요소와 레이아웃


table 요소를 도표의 의미가 아닌 용도에 쓰는 것, 그리고 Table 레이아웃으로 인해 HTML 문서안에 외형을 담고 있는 것은 웹 표준 위배.

table 요소는 기본적으로 접근성이 떨어짐. 또한 내용이 비 순차적으로 담기면서 접근성이 떨어질 뿐 아니라, 의미적 구조도 깨짐.

소스가 불필요하게 길어질 수 있기 때문에, 추후 소스 수정 등의 유지보수에 어려움.

테이블의 레이아웃은 브라우저마다 미묘하게 다를 수 있기 때문에, 크로스 브라우징이 어려움.

여러 해상도를 지원하는 반응형 웹, 가변적 레이아웃을 적용하기는 사실 상 불가능.