▶ Layout History
▷ 단순 텍스트 나열
- 레이아웃 도구가 없던 시절. 텍스트 정렬만 가능했다.
▷ 테이블로 레이아웃 구성
- table 표를 본 목적과 다르게 배치를 위해 사용했던 시절.
- 의미, 접근성에 대한 개념이 없던 시기.
- 아직도 테이블로 레이아웃 구성을 하는 곳이 있다 → 뉴스레터
why?
- 브라우저가 아닌 다른 프로그램에서는 시맨틱 웹에 대응하지 못하기 때문에 (ex Outlook 등)
▷ 프레임으로 레이아웃 구성
- fram으로 한 페이지에 결합하여 레이아웃을 생성.
▷ div div div div ...
- Box Model, float, position 등을 이용해 레이아웃을 생성.
- 브라우저별 표준이 정의되지 않아 여러 기법이 난무했던 시기.
- 시청 홈페이지는 div를 사용한 다음 class id를 main으로 설정했다. (익스플로러를 대응해야 하기 때문에)
→ can i use 사이트를 이용하면 접근성 체크에 좋다. 버그나 에러를 줄일 수 있는 방법.
▷ 시맨틱 마크업, flex, grid
- 다양한 웹 기술 발전, 검색 엔진 최적화, 접근성, 반응형, 글로벌 웹사이트 제작 등의 이유로 생겨난 레이아웃 기법.
- SEO(검색엔진 최적화), 장애가 있는 사용자가 페이지를 탐색할 때 하나의 푯말 역할, 태그의 가독성 및 유지보수가 용이하다는 장점이 있음.
- 익스플로러 서비스 지원 종료, 대부분 브라우저가 웹 표준을 따르고 있어 시맨틱 마크업을 필수로 사용하는 것이 좋다.
→ 구 브라우저 지원이 필요하거나, 다른 프로그램과 호환을 고려해야 한다면 시맨틱 마크업을 사용하지 않을 수도 있다.
▶ Sections
▷ header
- head 태그와 혼동하지 않아야 한다.
▷ nav(navigation bar)
- 페이지의 주요 탐색 링크를 위한 태그. 문서의 모든 링크가
에 포함될 필요는 없다.- 하나의 웹페이지가 여러 개의 태그를 가질 수 있다. (ex 전체 탐색, 현재 페이지 내 탐색 등)
▷ main
- body의 주요 콘텐츠를 나타낸다. 웹페이지에서 한 번만 사용 가능.
- 사이드바, 사이트 로고 등 반복되는 콘텐츠를 포함해서는 안 된다.
- 검색이 주가 되는 페이지는 검색창을 포함할 수도 있다.
▷ article
- 아티클 영역을 제거해도 페이지는 정상적으로 돌아간다.
- 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행한다.
- 대표적으로 뉴스 홈페이지에서 사용된다.
▷ section
- 제목 요소를 자식으로 포함해야 한다.
- 웹페이지 앞뒤 문맥에 연결성이 필요할 때 사용한다.
- 다른 시맨틱한 요소 중 더 적합한 의미를 가진 요소가 없을 때 사용한다.
- 제목을 넣을 필요 없이 단순 스타일링이 목적이라면 div 요소를 사용한다.
article, section
- 같은 웹페이지를 구성하더라도 레이어 내용을 '매일 변하는 블로그 글'로 인식한다면 article로, '홈페이지를 소개하는 글'로 인식한다면 section으로 코드를 짤 수도 있다. 코드를 짠 이유를 댈 수 있다면 짜는 것에 정답은 없다.
- 마크업은 오류가 나지 않는다! 모르겠다면 처음에는 div로만 구성해도 괜찮다. 접근성 또한 의미를 정리해가며 차차 수정해나가면 된다. 지금은 보이는 것을 완성도록 하자.
▷ aside
- 문서의 주요 흐름을 따라가지 않고 보조적인 역할만 하는 공간.
- 각주, 광고 배너 등에 사용.
▷ hr
- 문단 안에서 주제가 변경되었을 때 사용한다.
- 단락을 구분할 때 사용해
태그 내에서는 쓰지 않는다.
▶ 스타일링을 위해서만 사용하는 Sections
▷ div(division)
- 영역을 구분 짓거나 무리를 짓는 태그, 광범위하게 사용한다.
- 공간 나누기, 정리하기 외에 별다른 기능은 없다.
- 시맨틱한 웹을 위해 마지막 수단으로 사용해야 한다.
▷ span
- 인라인 컨테이너.
- 스타일을 적용하거나 인라인 요소를 묶을 때 사용한다. (줄바꿈 처리 등)
▶ float
- (물 위나 공중에서) 떠가다, (가라앉지 않고 물에) 뜨다
- 한 요소가 보통의 흐름에서 빠지고, 텍스트 및 인라인 요소가 그 주위를 감싸 해당 요소의 좌우측에 배치되게 한다.
- float에서 box-sizing을 안 쓰면 border가 밀려난다.
- 자식 요소가 모두 float 속성을 가지면, 컨테이너 요소의 높이에 자식 요소들의 높이가 포함되지 않음을 주의해야 한다.
→ 해결 방법
▷ overflow: hidden 사용
.container{
overflow:hidden;
}- overflow hideen을 사용하면 넘치는 부분이 보이지 않는 버그가 발생한다.
▷ clear-fix 사용
부모의 가상 요소 ::after를 사용하는 방법
.container::after{
content:'';
display:block;
clear:left;
}▶ 웹 접근성을 고려한 숨김처리
웹페이지의 시각적 탐색이 어렵지 않은 사용자에게는 불필요하지만, 스크린리더와 같은 보조도구를 사용하는 사용자에게는 필요한 정보가 있다. (이 방법에는 여러 의견이 많고, 조금씩 코드의 차이가 있을 수 있음)
▷ display:none; or visibility:hidden;
- 모든 사용자에게 콘텐츠를 숨김.
- 콘텐츠가 페이지의 시각적 흐름에서 아예 제거. 스크린리더기에서 무시됨.
- 모든 사용자에게 숨기고 싶을때만 사용.
▷ width:0px; height:0px;
- HTML/CSS로 정의된 높이나 너비가 없는 요소는 일반적으로 페이지의 흐름에서 제거된다. 대부분의 스크린리더기가 읽지 않음.
- 'font-size:0px; line-height:0px'가 작동할수는 있지만, 화면에 여전히 가로 공간을 차지하게됨
- 악의적인 것으로 해석되어 검색 엔진에 불이익을 줄 수 있음. (검색 엔진에 걸리기 위해 일부러 많은 내용을 본문에 넣고 숨기는 등)
▷ text-indent: -9999px;
- 콘텐츠를 왼쪽으로 밀어내는 방법.
- 링크, 양식 컨트롤 또는 기타 포커스가 가능한 요소에 이 스타일이 지정되면 포커스는 받지만 페이지에 표시되지 않는다.
- 그러나 스크린리더도 해당 텍스트를 읽게되어 시각 장애가 있는 키보드 사용자에게 혼동을 줄 수 있다.
▷ 콘텐츠를 화면 밖으로 보내기
.sr-only {
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
}- position:absolute; 페이지 흐름에서 요소를 제거
- left:-9999px; 콘텐츠를 왼쪽으로 밀어내기
- top:auto; 원래 위치와 동일한 위치에 수직으로 배치
- 'width:1px; height:1px; overflow:hidden;' 요소 크기를 1x1 픽셀로 만들고 해당 픽셀에 맞지 않는 모든 항목을 숨김처리
- 클래스명을 차별적이지 않은 용어로 선택하는 것도 중요하다. (ex .blind 등)
▷ CSS 클립방법 (a11y-hidden)
- clip은 이제 더이상 권장되지 않음. 최신 속성인 clip-path로 대체되었다.
- clip은 구 버전의 브라우저 대응을 위해서, clip-path는 최신 버전의 브라우저를 위해 모두 기입한다.
생각 더하기
+ 웹접근성을 가장 확실하게 확인할 수 있는 건 MDN 사이트. MDN 사이트의 코드를 분석해보는 것도 좋은 공부가 된다.
+ 종이에 박스를 치면서 코드 구상을 하는 것도 좋다. 구상을 끝내고 작업을 시작하면 훨씬 빨라진다.
+책 읽으며 공부하기. 한 권의 책만 보는 것보다 다양한 책에서 내가 이해되는 설명을 찾는 것이 좋다.
+ 순서를 어떻게 짤 것인가도 고민해야 한다. (논리적 마크업 순서, 디자인 배치, flex 등)
+ a 태그만 블록요소를 감쌀 수 있다. inline은 블록 요소를 감쌀 수 없다.
+ a 태그는 블록 요소(block,inline-block)를 줘야 height 값을 줄 수 있다.
+ span은 inline 태그여서 width, height를 줄 수 없다. display:inline-block 해줘야 한다.
+ section, aside는 각각에 float: left, float: right를 주어야 양쪽으로 분리가 되지만, inline 요소인 a 태그는 한 곳에만 float: right를 줘도 양쪽으로 레이아웃이 잡힌다.
