네이버 쇼핑 실습 🐤
1. header
- 강의 영상에서는 한가지 배경 컬러로 지정했지만, 나는 네이버 쇼핑 사이트를 참고하여 그라데이션 이미지를 적용해보았다.
- header_top에는 1px rgba(0, 0, 0, 0.1)값의 border를 넣고 white_line이라는 rgba(255, 255, 255, 0.1)값의 border를 넣었더니 예시와 같이 입체감을 주는 결과물이 나왔다.
- 홈 ~ 아트윈도 네비게이션바의 li는 flex를 사용하여 x축 정렬하였다.
2. main
- 전체적인 div구조는 flex를 이용하여 정렬하게하였다.
- 첫번째 category div는 왼쪽과 오른쪽으로 나눈후에 세부적인 디자인 설정을 하였다.
- 'category' 제목 부분에 햄버거 메뉴를 span을 사용하여 만들어보았다. span을 감싸고있는 div에 크기를 지정하고 span 공통 class에는 width값과 height값을 적용, 각각의 다른 class에는 위치값을 지정하였다.
- category의 오른쪽부분은 text-align : center로 하위 요소들이 중앙 정렬하도록 하였다.
- 추천태그 영역의 tag들은 dispaly : inline-block 으로 지정하고, width값은 auto로 지정하여 글자크기만큼 늘어나도록 하게 하였다.
학습소감
header부분에서 실습한것과 같이 이미지를 만들때, 포토샵이나 일러스트 툴을 이용하여 이미지에 직접 효과를 적용하여 만들 수도 있지만, html에서 라인 하나로 입체감을 주는 방법도 있다는 것을 배웠다. 태그부분에서도 inline성격을 부여하여 나열하면서 자연스러운 느낌을 주는 방법 또한 배울 수 있었다. 언뜻보기에는 복잡하고 어려워보이는 것들이지만, html과 css만으로도 충분히 멋진 레이아웃과 효과들을 구현할 수 있다는 것을 배운 시간이었다.
프론트엔드개발자 지망생