이 글은 반응형 레이아웃 만들기 과제인 Header, Footer 만들기에 관한 글입니다. 구현방법과 아쉬웠던 점에 대해서 정리하였습니다.
🖌 Header와 Footer 디자인
✅ 구현방법
반응형 웹 디자인은 처음이고 어떻게 해야될지 몰라서 인터넷을 찾아본 후, style.css와 style_small.css로 두개로 나누어 작성하였습니다.
<link rel="stylesheet" media="(max-width: 700px)" href="./css/style_small.css">
<link rel="stylesheet" media="(min-width: 701px)" href="./css/style.css">다음과 같이 max-width에 따라 스타일이 적용되게 하였고 각각의 css를 다 따로 적어주었습니다.
햄버거 메뉴의 경우 html 과 css로 다 할수 없을 것 같아서 jquery를 사용하였습니다.
😢 아쉬웠던 점 & 알게된 점
지금까지 반응형이 아닌 UI의 경우 많이 코드로 작성을 한 경험이 있었는데 반응형은 처음이라 많이 헤맸던 것 같습니다. 또한 시간 내에 디자인된 시안을 만들어야 하기 때문에 마크업을 설계할 때 많이 생각을 안하고 바로 코드를 작성하였던 것이 아쉬웠습니다. 그러다 보니, 지금 껏 배운 웹 접근성을 지키면서 코드를 짜는 방식이 아닌 평소 원래 코드를 작성하던대로 작성하게 되었습니다.
마크업 단계에서 충분한 시간을 가지고 어떤 식으로 구상할 지, 설계를 한 후에 코드를 작성하는 것이 좋다는 것을 직접 경험하면서 알게 되었고, 그와 동시에 웹 접근성을 향상시키기 위해 어느 마크업에 무엇을 써주어야할 지도 고민을 따로 해야겠다는 생각을 하였습니다.
또한 이번에 처음 반응형 디자인을 코드로 작성하면서, 반응형 디자인을 만들 때 왜 모바일 환경의 UI를 먼저 짜는 것이 좋은 지 알게되었고, 마크업의 논리 순서를 지키면서 어떤식으로 CSS를 구성할 것인가에 대해 많이 생각해보는 시간이었습니다.
📝 소스코드
https://github.com/frontend-2nd/JeongMinLee/tree/main/HTML_CSS/FastCampus
권한이 있어야 접근 가능합니다.
