🐣 주니어 개발일지 - 네이버 쇼핑 카피캣 #1

📘 오늘 배운 것

---

쇼핑 카피캣

• shop.html 연결하기
  

• 중앙을 기준으로 페이지가 설정되어있기 때문에 container 크게 하나 지정해주기

• 상단바에 검색바를 넣고 싶다면 작은 container 하나 또 넣어야함!

  • 가운데 쏠려있기 때문에.

• nav 부분 설계
  

• mian 부분 설계

  • 다른 영역과 겹치지 않게 id값을 주었다.
    
  • 네이버에서는 자바스크립트를 활용했지만, 실습에서는 CSS를 사용하므로 div태그로 정리해보기
  • 이전 CSS 파일을 공유하고 있기때문에, padding-top 값을 가지고 있다.
    
  • width, height 값 미리 지정하기
    
  • rgba에서 a는 투명도를 나타냄
  • a태그에 inline: block;요소를 넣은 후 padding값 주기

• 까다로운 추천태그 부분 설계

  • 글자에 width값을 auto로 준 경우, 글자 크기대로 공간이 늘어난다.
    이를 방지하기 위해서, max-width값을 주어 크기 잡아주기 !
    
  • 안에 속한 tag의 합이 tag를 둘러싼 공간보다 합이 클 경우,
    자동으로 줄바꿈 현상이 일어난다.
    

• 배너 설정

  • list-item에서 banner를 가지고 있는 이미지를 선택
    👇 배너를 설정한 모습 👇

📌 오늘의 Tip

---

• 코드분량을 줄이기 위해서는 center 정렬의 경우, 일괄적으로 부모 영역에 적용해 한번에 배치작업을 하는 것이 좋다.

❔ 어려웠던 것 OR 힘들었던 것

---

1) border 값이 전체적으로 적용되는 것이 아니라 글자 부분만 적용되었는데..

2) 크롬 브라우저에서는 No Matching selector or style 현상이 일어났다. 웨일 브라우저에서는 정상 작동 !

💡 해결 방법!

---

1) 오타가 있었다..!

2) 화면 비율을 100%보다 작게했을 경우, 나타나는 현상이었다. 100%로 맞췄을때 정상 작동했다.

🌱 공부를 마무리하며,

---

비슷한 내용을 학습하고 있다생각했는데, 그럼에도 불구하고 아직 알아가야 할 내용이 많다.
자만하지 않고 꾸준히 연습해야겠다. 웹디자인기능사 공부도 함께하면 더 도움이 될 것같아 실기시험을 등록했다. 화이팅 👊