지금까지 HTML과 CSS를 이용한 페이지 구성은 그저 구글링하면서 시각적으로 원하는 결과를 구현하기만 하면 되는줄 알고있었다. 그러나 이틀간의 수업을 통해 웹접근성과 웹표준의 중요성을 배웠고, 그것들을 고려하여 마크업을 구성하는 것에 얼마나 많은 고민이 필요한지를 알게 되었다.
오늘의 수업은 본격적으로 페이지의 헤더를 구현하였는데, 지금까지 과제나 공부로 만들어왔던 나의 코드들이 그저 스타일에만 집착했다는 것을 알 수 있었다. 개발자로서 페이지를 구현하기까지 얼마나 많은 고민이 필요한지, 그 수 많은 구현 방법 중에 더 나은 차선책이 무엇인지 판단하는 과정을 몸소 느낄 수 있었던 수업이었던 것 같다.
헤더 분석
- 시안을 보고 어떻게 구조화 할 것인지를 먼저 고민한다.
- 독립적인 컨텐츠 블록이 있는가?
- 컨텐츠를 어떻게 그룹핑할 수 있을까?
- 메뉴들에게서 독립적인 컨텐츠인 로고를 분리한다.
- 주메뉴들을 묶고, 우측 위의 링크 모음들을 묶는다.
- 메뉴들이 호버링이나 포커싱 되었을 때 보여지는 서브 메뉴들을 묶는다.
로고
- 의미를 가진 단어로 alt를 작성하여 웹접근성을 확보했다.
- 유저 경험을 고려하여 로고 이미지 클릭 시 홈페이지로 올 수 있도록 a태그를 이용해 작성했다.
- position: absolute를 이용하기 위해 부모 요소에 position: relative를 주었다.
position: absolute - 가장 가까운 부모요소로 부터 position이 static이 아닌 부모를 기준으로 요소를 배치
+ (22.09.01 추가 | 요소의 조상 중 transform / filter / perspective 속성의 값이 하나라도 none이 아닌 것을 기준으로 배치 )
모음 링크
-
모음링크와 메뉴들의 순서를 먼저 고민했다.
회원에게만 보여지는 페이지가 메뉴에 링크되어있다면 로그인과 회원가입이 있는 링크모음을 우선 작성.
-
ul>li로 구현
-
수 많은 방법 중에 어떠한 방법론을 선택할지 고민
- flex
- float
- inline
-
inline을 선택했을 때 고려할 점
구분자 :를 작성할 때 스크린리더 사용자의 경험을 고려한다.
(직접 스크린리더로 들어보니 유저에게 얼마나 부정적인 경험을 주는지 바로 알 수 있었다. 콜론...콜론...콜론...)
<span aria-hidden="true">:</span>네비게이션과 서브 메뉴
- 스타일적 요소만을 고려한 마크업X
로고 다음에 등장하는 요소들이 네비게이션의 목록들이라는 것을 알려주는 마크업을 하여 웹접근성을 향상시켰다.
/*html*/
<h2 class="sr-only">메인 메뉴</h2>
<ul>
.../*CSS*/
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}HTML마크업을 하면서도 스타일적으로 숨기기 위한 방법들에 대해 공부했는데, 내가 예상했던 것과 새로 알게된 것들 그리고 막연히 될 것이라 생각했었지만 절대 하면 안되는 방법들이 있었다.
1. display: none;
요소 자체가 생성되지 않아 스크린리더도 읽어주지 않았다. 마크업으로써의 역할 자체를 할 수 없는 방법이다. 보통 작성하는 코드들 중 페이지에 실제 구현을 시키지 않고 싶을 때 쓴다는 것을 알게되었다.
- position: absolute 후 좌표값을 페이지 상에서 벗어나게 만드는 방법
마크업의 의미도 가지고 스크린리더도 정상 작동하지만 요소들을 포커싱해줄 때 줌이 의도하지 않은 방향으로 튈 수 있기에 접근성을 저해한다.
- size를 0으로 만드는 것
스타일에서 최소 단위가 1px이다. 스크린리더는 아주 작은 커서로 페이지를 훑으면서 읽어주는 것으로 이해하면 된다고 하셨는데, 이 방법은 웹접근성 측면에서 의도한 기능을 전혀 하지 못하는 방법이다.
- visibility: hidden;
- clip-path 사용
.sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}overflow: hidden을 이용하여 벗어나는 컨텐츠들을 가리고, clip-path를 통해 남은 컨텐츠를 가리는 방법이다.
한번 이러한 것들을 공부하고 코드로 적용해 가지고 있으면, 언제든지 원하는 상황에서 코드를 끌어와 사용할 수 있다. 이렇게 배울 때마다 나만의 도구들을 하나씩 소장하게 되는 느낌을 준다.
https://mulder21c.github.io/2019/03/22/screen-hide-text/
컨텐츠를 접근 가능하게 숨기는 방법들을 매우 잘 설명해준 글로 주말에 다시 한번 공부해서 정리해봐야겠다.
-
컨텐츠들을 이해 가능하고 사용 가능하게 구조화
button과 a 태그를 고려해볼 수있는데, 페이지 이동 유무에 따라서 선택하면 된다. navigation의 요소들이 페이지 이동을 요구하지 않는 요소이기에 button태그를 선택했다.
-
논리적인 마크업을 위해 각 메뉴들을 먼저 리스트하고, 각 메뉴들 하위요소로 서브메뉴들을 작성한다.
-
ul / li 사용이 네비게이션같은 리스트화 된 요소들의 목록 수를 알게해주어 웹접근성을 향상시킴.
발생하는 문제점
자식요소가 부모요소의 width에서 벗어나지 못하여 inline속성을 서브메뉴에 주어도 줄바꿈 현상이 일어남.
.container {
background-color: green;
width: 400px;
height: 100px;
}
.content {
color: blue;
}
해결법
- white-space : nowrap
- width : max-content
서브메뉴 숨김
- is-active 클래스를 추가하여 메뉴가 hovering과 focusing되었을 때 그 하위 요소만이 페이지 상에 나타나도록 하였다.
HTML emmet
HTML로 헤더의 네비게이션을 구현할 때 요소의 양이 많아진다면 많은 시간이 소요될 것 같았다. (실제로 쿠팡 네비게이션을 클론코딩 했을 때 엄청나게 힘들었던 기억이 난다.)
그러나 emmet을 통해 생산성을 매우 향상시킬 수 있다는 것을 배웠다.
li.menu-item.is-active>button.menu-button+ul.sub-menu.menu-html>li*3>a[href="/"]
또 반대로 안에서부터 태그를 감싸올리는 방법으로도 작성이 가능했다.
vscode - emmet약어로 래핑 사용
ctl+enter로 코드 중간에서 다음줄로 바로 넘어가는 것을 처음 배웠을 때의 놀라움을 아직도 기억한다. 생산성을 향상시켜주는 emmet을 적극적으로 활용할 수 있도록 틈나는대로 써보려고 해야겠다.
