2장. HTML과 CSS
2.1. HTML
-
HTML은 Hyper Text Markup Language 의 약어로 마크업 구성에 가장 많이 사용되는 언어이다.
-
현재 HTML의 표준은 W3C와 WHATWG가 주도적으로 작성한다.
"W3C와의 기술 표준화 주도권 싸움에서 WHATWG 승리"W3C는 1989년 이후 웹의 발전 흐름에 따라 필요해진 표준 개발을 맡기 위해 1994년 설립됐다. 초기 미국, 프랑스, 일본의 연구소를 주관기관으로 추가하며 대륙별 활동을 확대하고 2002년이래로 현재까지 세계 각지 기술 기업과 관련 공공기관 등 440여곳을 회원으로 두고 있다.
WHATWG은 지난 2004년 결성된 브라우저 개발업체의 연합이다. 결성 초기 브라우저 개발업체들은 W3C의 보수적인 표준화 방식에 답답함을 느끼고, 그들끼리 현대적인 HTML 표준과 관련 신기술의 실험적 시도, 빠른 개발 및 표준화에 초점을 맞춰 활동하기 위해 뭉쳤다.
2.1.2.2. 콘텐츠 모델 (Contents Model)
- HTML5에서는 요소가 어떤 콘텐츠를 표현할 수 있는지, 어떤 하위 요소를 가지는지에 따라 Contents Model로 분류한다.
Contents Model ?
2.1.3. HTML 문서 골격 만들기
2.1.3.1. DOCTYPE
- DOCTYPE을 html로 지정하면 HTML5로 작성된 문서임을 나타낸다.
<!DOCTYPE html>2.1.3.3. head
- head태그는 문서의 제목과 문자의 인코딩 형식 등을 지정한다.
- meta: meta태그에서는 메타 데이터를 다룬다, 주로 기계가 읽고 이해하는 정보이다. 인코딩 방식, 뷰포트 지정 등 많은 작업을 수행할 수 있다.
- charset: 문서의 인코딩 방식을 지정한다. 지정하지 않으면 문자 깨짐 현상이 발생할 수 있다.
인코딩 이란 ?
<head>
<meta charset="UTF-8" />
</head>- http-equiv: http-equiv와 content 속성을 이용해 IE의 렌더링 사양을 좀 더 세밀하게 조절한다. X-UA-Compatible 값을 IE=Edge로 지정한다면 렌더링 시 최신 Edge모드를 사용한다.
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
</head>2.1.4. 시맨틱(Semantic)
- HTMl구조는 크롤러에 더 구체화한 정보를 제공할 수 있다.
<main>태그는 페이지의 콘텐츠 영역을 의미한다. 페이지당 한 번만 사용한다.<section>태그는 페이지의 단일 부분을 그룹화하는 데에 유용한 요소이다
다만, 일반 컨테이너 요소가 아니기 때문에 단순 스타일링을 위한 요소로 사용할 때는<div>를 사용하는 것을 권장한다.
2.2.2 상속
- css의 프로퍼티 중에는 상위 요소에서 적용되었지만, 자식 요소까지 상속되는 프로퍼티들이 있다.
- 반면에 상속되는 프로퍼티지만 HTML 요소의 종류에 따라 상속되지 않기도 한다.
대표적으로<button>요소가 이에 해당한다.- 프로퍼티와 요소의 종류에 영향받지 않고 부모 요소의 프로퍼티를 상속받고 싶다면 명시적으로
inherit값을 지정한다.
- 프로퍼티와 요소의 종류에 영향받지 않고 부모 요소의 프로퍼티를 상속받고 싶다면 명시적으로
2.2.5. 박스 모델과 여백 상쇄
2.2.5.1 박스 모델
- 브라우저의 렌더링 엔진은 각 요소를 나타낼 때 CSS 박스 모델에 맞춰 그린다. 박스 모델은 content, padding, border, margin 영역 4가지이다.
- 브라우저의 디폴트 값은 content-box이다
- border-box : padding, border, content 영역을 합친 영역을 기준으로 계산됨.
- content-box : content 영역만을 기준으로 계산됨.
2.2.5.2 여백 상쇄
- 인접한 같은 레벨의 블록 요소에 상하 여백이 겹치면 여백이 하나로 합쳐지는 현상을 여백 상쇄라고 한다. 이때 여백은 인접한 여백 중 큰 여백으로 상쇄된다.
- 여백 상쇄는 display 프로퍼티 값이 flex, grid 일 때나 position 프로퍼티가 absolute일 때, float인 상태일 때는 적용되지 않는다.
2.2.7. 반응형 웹을 위한 미디어 쿼리
-
미디워 쿼리 작성은 크게 CSS 파일 내부에 작성하거나
<link>나<style>에 media 속성으로 작성하는 방식으로 나뉜다. -
각 스타일은 media속성에 작성된 조건에 해당될 때 적용된다.
<link
rel="stylesheet"
media="screen (min-width: 300px)"
href="main.css" />
<style media="screen (min-width: 300px)">
/*...*/
</style>- 미디어 타입은 모든 장치(all), 인쇄 미디어(print), 화면(screen) 등이 존재한다.
- 모던 브라우저에서는 >, =, < 등의 비교 연산자를 사용하여 min, max를 이용한 조건과 동일하게 작성할 수 있다.
@media (width >= 700px) {
/*...*/
}- 미디어 타입의 기능은
,andnotonly등의 연산자로 이어서 작성한다.
2.3 접근성 (Accessibility, a11y)
- 웹 접근성은 모든 신체적 한계, 환경적 한계를 고려해 개발하는 것
- 장애가 있거나 노령으로 인한 신체 변화, 여러 기기 환경을 사용하는 모든 사람이 웹 사이트와 도구 등을 사용할 수 있도록 개발하는 것
2.3.1 웹 접근성 지침
- W3C에서 설립한 WAI(Web Accessibility Initiative)에서 전문적으로 연구하며 가이드라인 제공
2.3.1.3 키보드 동작을 제공하자
<button><input><select>요소 등을 사용하지 않고<div>와 CSS를 이용해 비슷하게 구현해 사용할 때도 있다.- 이때 기본 요소들이 제공하는 키보드 동작들을 모두 사용하지 못한다.
- 엔터 키나 탭 키를 누를 때 해당 요소로 이동시키는 동작과 같은 상호작용들을 누릴 수 없다.
- 스크린 리더는 해당 요소를 선택해야 하는 요소인지, 이벤트를 발생시키는 요소인지 파악하지 못한다.
role: 해당 요소의 원래 목적을 작성한다.<div>를<button>의 목적으로 사용할 때role=button으로 작성하면 스크린 리더 등 기계에서 해당 요소를 버튼으로 인식한다.tab-index: 해당 요소를 탭 키로 도달하게 하는 속성이다.
<div
tabIndex="0"
role="button"
id="button-id"
className="div-as-button"
>
div로 만든 버튼
</div>2.3.1.4 Focus하는 지점을 명확하게 하자
- 항목에 Focus가 된다면 시력이 있는 사용자를 위해 윤곽선이 나타나야 한다.
2.3.1.5 멀티미디어 요소에 접근성을 부여하자
<img src="coffee.png" alt="컵에 담긴 따듯한 아메리카노" title="아메리카노" />- 해당 이미지가 문서에 특별한 의미가 없다면 background 이미지로 작성하거나 alt 속성에 빈 문자열을 지정하는 것을 권장한다.
꾸준히 새로운 것을 알아가는 것을 좋아합니다.