07.16 Helbak 웹사이트 실습

Helbak 웹사이트 실습✍️

실습 코드 깃허브 링크

---

https://helbak.com/
helbak 사이트를 참고하여 레이아웃 코딩 실습을 했다.
이 실습에서는 모바일 버전을 먼저 만들고 모바일 레이아웃 기준으로 pc버전 미디어 쿼리를 추가하였다.

---

header 모바일버전

• body의 css를 입력하기 전에 css 디폴트값을 입력하였다. (처음 /모든html적용/ 부분)
• 노란 배경 밑에 (x축으로 정렬되어있는)세개의 버튼 목록은 buttons이라는 class명의 nav이다. buttons의 높이값은 없으므로 전체를 감싸고있는 header가 nav까지 높이 인식하게 하기 위하여 nav에 overflow:hidden;을 주면서 높이를 부여하였다.
• nav 태그 안에있는 li들의 이미지들이 y축으로 정렬하게 하기 위해서 position 속성을 relative로 설정한 뒤 top 값으로 50%를 주고, transform: translateY(-50%); 코드를 사용하였다.

---

header / PC버전 미디어쿼리

• PC버전 미디어 쿼리는 코드펜 0.25x 화면에서 확인 가능하다.
• PC버전에서는 스크롤을 내려도 header부분은 고정되어있다.
  👉 position을 fixed로 수정 & z-index를 제일 높게 설정
• 모바일버전에서는 사용자의 편의성을 고려하여 a태그 (.menu_button) 에 display : block 값으로 터치하기 쉽게 설정하였다면, PC버전에서는 클릭 범위를 줄여서 의도치 않은 클릭을 방지하였다.
• header의 h1과 .buttons를 x축으로 정렬시키기 위하여 width값을 각각 50%로 잡고, .buttons의 포지션을 absolute로 설정 👉 left : 50% / top값은 0%로 지정해서 직접 위치를 잡았다.

---

main 모바일 버전

• 이미지와 텍스트를 감싸고 있는 .product_group li .product_group_link 부분은 높이값이 따로 없기때문에 자식의 높이를 인식할 수 있도록 overflow: hidden을 입력한다.
• 텍스트는 이미지와 겹치도록 위치 지정하기위해 position : absolute로 설정 한뒤 위치값을 지정해 주었다.
• 모바일버전에서 각각의 li들은 bolck 성격이기때문에 y축으로 쌓여있는 형태이다.

---

main pc 버전

• pc버전은 코드펜 0.5x ~ 0.25x 화면에서 확인가능.
• pc버전에서 스크롤 내리기 전 화면에서는 fixed가 3차원이기때문에 main의 일부분이 fixed뒤로 가려져 버린다. 👉 main에 padding-top값을 header의 높이값과 동일하게 설정하면 main부분이 내려가서 가려지는 현상 해결할 수 있다.
• pc버전에서는 li들이 x축으로 두개씩 정렬되어 있다. width값을 50%씩 주고, 감싸고 있는 .main_content에는 overflow:hidden을 설정하여 높이값을 정해주는 동시에 내용물이 흘러넘치지 않게 한다. li는 float: left로 x축정렬하게 하고 높이값도 설정해준다.

---

footer 모바일 버전

• 텍스트들은 display 기본속성인 block이므로 쌓여있는구조이다.
• .right_methods의 li들은 x축으로 정렬시키기 위하여 inline-block 속성값을 이용하였다.
  🦄잠깐 꿀팁
  • css에 선택자 입력할 시 띄어쓰기 주의
  • payment_icon .one : payment_icon가 부모 one은 자식으로 인식한다.
  • .payment_icon.one : payment_icon중에서 one이라는 클래스명 갖고있음으로 인식한다.

     <span class="payment_icon one"></span>

---

footer pc 버전

• pc버전은 코드펜 0.25x 화면에서 확인가능.
• .left_nav와 .right_methods를 x축으로 정렬하기 위해 각각 width값은 50%로 지정하고 float: left/right를 입력한다.
• right_methods의 텍스트와 아이콘들은 inline-block속성을 부여하여 x축으로 정렬 시킨뒤 vertical-align : center로 가운데축 정렬하도록 맞춰주었다.
• footer 부분은 따로 높이값이 지정되어있지 않고 padding-bottom값만 66px로 지정되어있다. pc버전이 되면서 .left_nav와 .right_methods는 좌우로 배치되고 높이는 자연스럽게 66px값만 남게되고 .to_top_button이라는 초록색 버튼은 가운데를 유지하고, footer를 기준으로 자리를 잡게된 모습이다.

---

학습소감

요소들을 x축으로 정렬하기위하여 float : left를 입력하고, 부모요소에는 overflow:hidden을 입력하거나 width값을 50%로 잡고 absolute속성을 부여한뒤 위치값으로 정렬할 수도 있다는 것을 배웠다. 그리고 footer에서 실습한것과 같이 굳이 높이값을 부여하지않아도 자식들이 어떻게 배치하는가에 따라서 유연하게 바뀔 수 있다는 것도 배웠다.
레이아웃을 배치할 때 일일이 크기와 위치를 지정해줄 수도 있지만, float와 각각의 position 속성을 응용하여 유연하고 쉽게 구조를 잡을 수 있다는 것이다. 익숙해질 수 있도록 주말동안 다른 레이아웃들도 연습해보는 시간을 가져야할 것 같다.
그리고 말줄임표css 코드와 같이 자주 쓰이는 코드는 따로 클래스를 설정하여 미리 코드를 짜두고 클래스명을 추가하는 방식으로 코드량을 줄이면서 효율적으로 코딩하는 방법도 배웠다. 또한 css에 클래스명을 두개 이상 나열해서 쓸 때 주의해야할 점도 새로 배웠는데, 붙여쓸때는 같은 선택자에 다른 클래스명을 여러개 쓴다고 인식하고, 띄어쓰기를 하면 부모와 자식관계로 인식한다는 것이다.
겉으로는 간단해 보이는 helbak사이트이지만 그 속을 잘 들여다보면 각각의 의미가 있는 속성값들과 구조들로 짜여져 있는 것들이었다.