[패스트캠퍼스] 프론트엔드 부트캠프 HTML/CSS 클론코딩 과제 후기✨(3주차)

 

2023년이 시작되었습니다. 다들 새해 복 많이 받으세요!✨

 

약 2주동안 원하는 페이지를 HTML/CSS 만으로 클론코딩하는 과제를 했다.

과제 요구사항 중 한 가지는, 자바스크립트로 구현한 기능 중 HTML/CSS로 대체하는 것을 시도해 보는 것이였다.

 

 

나는 동아제약 공식몰 랜딩 페이지를 클론코딩 했다!

 

동아제약 공식몰 ➡️ https://dmall.co.kr/

동아제약 공식 브랜드몰 디몰 :Dmall

 

 

클론코딩 결과물 ➡️ https://warm-cupcake-dc13ac.netlify.app/

동아제약 공식몰_디몰

 

 

클론코딩 하면서 든 생각 :
CSS가 자바스크립트로 구현한 기능을 똑같이 구현할 수 있다고 가정할 때, 자바스크립트를 사용하는게 좋을까 아니면 CSS를 사용하는게 좋을까?

 

 

지금부터 자바스크립트 대신 CSS로 구현한 기능을 소개하고, 이에 대해서 평가하고자 한다.

 

---

position:sticky 구현하기

 

mainNav를 잘 보세요

 

공식몰 사이트를 보면 스크롤을 내리다가, 일정 위치에 다다르면 mainNav에 ftfixed 라는 클래스를 부여하고, ftfixed의 div는 display:fixed 처리되는 것을 볼 수 있다! 스크롤을 다시 위로 올리면 해당 클래스 명은 사라진다.

 

이것을 CSS에서 position:sticky 속성을 대체할 수 있을 것 같다!

 

⬇️ sticky에 대한 포스팅은 아래 링크를 참조! ⬇️

https://charmming5.tistory.com/58

[CSS] position : sticky 란?

 

 

 

 

 

main Section(빨간색), main(왼), aside(오)

 

.main section 안에 main 태그(왼쪽)와 aside 태그(오른쪽)를 넣고, main과 aside를 나란히 정렬하기 위해서 이들의 부모 요소인 .main에 display : flex;를 부여했다. (최대한 레거시 코드 자제!)

 

.mainCont와 .mainNav는 내용에 따라 height가 자동으로 설정되도록 했다.

.main은 자식 요소의 크기에 따라 높이가 결정되므로 height가 더 높은 .mainCont의 height를 따라가게 된다.

 

이 때 문득 생기는 의문점, .mainCont보다 .mainNav의 내용이 확연히 적은데, sticky를 구현하려면 .mainNav도 .mainCont만큼의 height를 가져야 하는데 따로 설정을 해야하나?

 

답변은 "아니"다.

Flex에서 container의 height가 items의 height보다 클 경우, container의 align-items는 기본값이 stretch이므로 item들이 container의 height에 맞게 늘어난다.

 

mainCont의 height

mainNav의 height

 

실제로 브라우저에서 확인해봤을 때, 두 요소 모두 별도의 height 속성을 입력하지 않았음에도 불구하고 mainNav의 height가 mainCont의 height를 따라가는 것을 볼 수 있다.

 

이제 남은 것은 mainNav 내의 mainNav__bottom에 sticky 속성 지정!

 

mainNav__bottom에 postiion:sticky 속성 적용

 

요소에 position:sticky 속성을 지정해줄 때는 top, bottom, left, right 중 반드시 하나는 설정해야 하기 때문에 스크롤이 mainNav__bottom 영역에 다다르면 mainNav 영역이 끝날 때까지 mainNav의 최상단 위치에 position:fixed 처럼 고정시키겠다는 의미로 top:0을 지정해준다.

 

이제 잘 동작하는지 확인하는 일만 남았다!

 

내가 구현한 기능

 

아주 잘 작동하는 것을 확인할 수 있다.

 

만약 mainNav의 height가 mainCont의 height를 따라가지 않는다면 mainNav에 align-self : stretch나 flex : 1 처럼 item 자체에 height를 부여하는 시도를 할 수 있겠다.

 

---

 

방금 구현한 내용에선 자바스크립트를 통해 스크롤 이벤트 시 해당 div에 클래스 부여하는 것보다, CSS 속성인 position:sticky로 구현한 것이 훨씬 코드도 적고 쉽게 구현할 수 있었다.

아마 sticky가 비교적 최근에 나온 속성이기도 하고, IE 같은 구형 브라우저에서는 지원이 안되기 때문에 크로스 브라우징을 위해 자바스크립트로 구현을 하신 것 같다.

그런데 이제는 IE에 대한 지원이 종료되어서 sticky를 사용하는 게 더 좋을 것 같다는 생각이 든다.

 

이번에는 좋지 않은 예시를 소개해보자 한다.

 

 

---

 

 

일반 요소에 tabindex로 포커싱 잡히게 하기

 

 

동아제약 공식몰 사이트

 

패밀리 사이트를 누르면 패밀리 사이트 리스트가 등장하는 것을 볼 수 있다.

원래는 자바스크립트를 통해 클릭 이벤트 발생 시 family-site li에 class="clicked"를 부여하고, 해당 클래스가 있는 li의 family-site-sub div를 등장시키는 방식으로 동작시켜야 하지만, HTML,CSS만 사용하는 과제이므로 어떻게 대체를 할 수 있을까를 생각하다 li에 focus를 주면 family-site-sub div가 등장하도록 할 수 있지 않을까? 하는 생각이 들었다.

 

근데 문제는.. li는 포커스를 가질 수가 없다. 웹은 사용자와 상호작용한 요소만 포커스가 잡힐 수 있도록 되어있기 때문이다. (input, select, button, a...)

 

만약에 상호작용하지 않는 <div>나 <span>과 같은 요소에도 키보드 포커스가 잡히게 하고 싶을 경우에는 어떻게 해야 할까?

 

HTML에서 해당 요소의 tabindex 속성을 설정해주면 마치 상호작용이 가능한 요소처럼 해당 요소로 포커스가 이동하게 된다.

 

 

 

브라우저에서 실행한 결과 잘 동작하는 것을 확인할 수 있었다.

 

 

 

---

 

지금 생각해보니 tabindex="0"으로 해도 포커싱이 잘 잡힐거라서 굳이 1로 할 이유는 없다고 생각한다.

tabindex="1"로 하면 tab키를 누르면 패밀리 사이트에 가장 먼저 포커싱이 되기 때문에 포커스가 중구난방으로 이동해서 스크린리더 사용자에게 큰 혼란을 야기할 수 있기 때문이다. 사용자를 신경쓰지 않는 프론트엔드 개발자라니 너무 끔찍하다!

이런 바보...★

 

그리고 tabindex를 이용해서 포커스를 주는 걸 안 좋은 예시라고 생각이 든게.. 스크린리더 사용자에게는 포커스를 통해 웹 페이지의 구조를 이해하는데, 패밀리 사이트에 포커스를 주는 것이 필요한가? 라는 의문 때문이였다.

 

 tabindex로 페이지 탐색에 논리적 순서를 부여하여 사용자가 자연스럽게 페이지를 탐색할 수 있도록 하기 때문에, 섣불리 tabindex를 부여하는 것은 좋은 판단이 아니라고 생각이 든다.

 

따라서 정말 포커스가 필요한 경우에만 tabindex를 사용하고, 이렇게 숨겨진 div를 보여주기 위한 기능을 만드는 것은 자바스크립트로 addClass/removeClass 함수를 사용하는 것이 옳다는 생각이 들었다.

 

 

 

---

 

 

프론트엔드 개발자라는 직업을 선택하면서 내가 꿈꿨던 것은,
나를 통해 모든 사람들이 더 나은 삶을 사는 것이다.

 

 

사람들이 원하는 정보를 쉽게 얻을 수 있도록, 약자들도 편리하게 페이지를 이용할 수 있도록 사용자 편의를 제공하는 개발자가 되고 싶다는 마음가짐으로 시작했다.

 

근데 막상 코드를 작성하다보니, 무엇이 중요한지를 잊은 채 당장 기능 구현에 급급한 나의 모습을 볼 수 있었다.

당장 위의 예시에서 tabindex="0"을 줘도 충분한데, 내가 빠르게 확인할 수 있도록 1을 주고 확인한 뒤 코드를 수정하지도 않고 마감기한에 쫓겨 그 상태로 과제를 제출해버렸다.

 

사람이 목적과 방향성을 잃는 것이 얼마나 무서운 것인지를 알기에, 리뷰를 하면서 이런 내 모습에 자괴감을 느끼기도 했다.

내 몸에 박혀있는 빨리빨리라는 습성을 내버려야 한다. 빠르게 일을 진행하는 것보다 코드 한줄 한줄 작성할 때마다 이게 무슨 의미인지를 정확히 알아야 한다. 

 

부트캠프 시작점에서 알아차려서 다행이지, 더 늦게 깨달았으면 돌이키는데 더 많은 시간이 필요했을 것이다.

1월부터는 새로운 과제가 시작되는데, 깨달은 바를 바탕으로 더 나은 코드를 작성하는 내가 되길!

 

2023년도 아자아자 화이팅이다! ( ᐛ )و

 

이야아아아압!!