flex에 한참 빠져있던 나.
팀원과 토의 중 아래와 같은 문제에 봉착했다.
flex를 이용해서
- 뷰포트의 정 중앙에 로고이미지가 있고
- 같은 수평선 라인 오른쪽 끝에 버튼 하나
는 어떻게 구현할 수 있을까?
음...
- justify-content 속성을 center로 주고 버튼만 밀어낼 수는 없다. 왜냐면 로고가 아닌 저 두 컨텐츠의 사이가 center가 되니까.
- justify-end속성을 주고 마진을 이용해 로고이미지를 마진으로 밀어내는방법? 하지만 마진계산을 어떻게 하느냐에 따라 반응형 웹 구현에 방해받을 수 있다.
같은 수평선 안에서 로고나 텍스트를 정렬해야하는 상황은 항상 있고 그 때마다 난관에 봉착하지만 또 어찌어찌 하다보면 되서 되는대로 넘어가게 되는 이런 악순환을 끊기 위해 멘토님께 질문을 드렸다.
그리고 돌아온 답변은 그냥 냅다 붙일 수는 없으니 정리해서 적어보자면..
- flex를 사용하면 버튼이 공간을 차지하기 때문에 로고가 부모요소를 기준으로 가운데 정렬이 안되어 불편할 것 같다.
- 굳이 flex로 영역을 가지게 한다면 로고에 마진을 주는 투박한 방법이 있을 수 있겠다.
+ 덧붙여 아주 개인적인 의견으로
- 위와같이 되면 유지보수(반응형 등)뿐만 아니라 닫기버튼이 웹 접근성 측면에서 불편함을 만들 수 있다.
- 그 이유는 스크린리더에서 로고->닫기버튼->컨텐츠 순으로 읽게되기 때문이다.
- 때문에 본인이라면 닫기버튼을 컨텐츠 다음에 읽도록 배치하고 -> absolute로 포지셔닝 하는 방식을 택하겠다.
라고 말씀해주셨다.
And it literally blew my mind ...!!!
다른사람이 보기엔 당연한거고 그렇게 큰 문제가 아닐 수 있지만
웹 접근성을 그냥 어깨너머 말로만 들어온 나는 이렇게 내 머리를 탁 치는 깨달음이 아닐 수가 없었다.
일단 실제로 스크린리더 사용자들의 경험을 고려하여 HTML부터 구조화를 '실제로'한다는게 이런거구나, 깨달았고
그냥 우리가 편하자고 레이아웃을 짜는(가장 심플하고 쉬운 방법을 찾아 헤메던...) 그런 습관에 대해서 반성하게 되었다.
사실 난 이제 막 코딩을 시작한 코린이라서 습관같은게 있지는 않다. 좋은 시야를 가지게 되어서 감사하다.
닫기버튼의 경우 맨 오른쪽 상단에 위치하고 싶다면, HTML상에서 배치는 컨텐츠들이 끝난 이후로 하고 positioning을 absolute로 따로 끌어올리는 방식을 차용하면 된다.
교훈: 생각하고, 이유있는 코드를 짜자
'Front-End Developer > HTML' 카테고리의 다른 글
5살에게 가르치는 안헷갈리는 HTML table (8) | 2022.04.05 |
---|---|
점진적 향상기법이란? / 이미지 포맷의 종류 (0) | 2022.04.02 |
srcset attribute를 이용해서 반응형 이미지 만들기 (0) | 2022.04.02 |
Grouping Content (0) | 2022.04.02 |
What is HTML Living Standard? (0) | 2022.04.02 |