🐣 주니어 개발일지 - 네이버 블로그 카피캣 #2

📘 오늘 배운 것

---

네이버 블로그 카피캣

( 새롭게 배운 내용 또는, 기억해야할 것들만 기록 )

main 영역 작업

• i태그 없이 이미지로 아이콘 삽입 (i태그보다 이게 더 편할 수 있기때문에)
  • 구글에서 free icon 검색
  • check box가 필요하다면, free checkbox icon 으로 검색
  • 추천 사이트 : https://www.flaticon.com/
  • img 폴더 만들고 .png파일로 저장하기
    
  • url로 연결 시켜주기!
    • repeat 효과 꺼주기
      
  • 약간의 트릭..🙂 ( 개발자마다 다르게 적용하니 참고만 ! )
    • a태그 부분에 padding: left; 값을 적용하면 폰트만 움직인다.
    • 공백의 영향은 글자만 받는다는 것 ! checkbox.png는 영향이 없다.
      👇 padding값 적용 👇
  • 아이콘 사이즈 변경
    • background-size 태그 사용

footer 영역 작업

• 막대기 작업
  • 선택자 :before 설정
  • content: ''; 컨텐츠는 비워두기
    
  • 첫번째 부분 막대기 없애기
    
  • 결과
    

챌린지 프로그램 페이지 작업

• 마우스 올렸을 때 투명해지는 버튼 작업
  
  • rgba 코드를 사용하면 글자가 투명해지는 것을 방지 할 수 있다.
  • hex converter rgba 사이트를 활용해 rgba로 변환

❔ 궁금했던 것

---

• p span div 차이점

💡 해결 방법!

---

• 참고 사이트를 보면서 이해도를 높임
  • 참고 사이트 https://miaow-miaow.tistory.com/94

🌱 공부를 마무리하며,

---

이제는 강의 먼저 보기보다 먼저 설계도를 해보고 있는데, 강의와 비슷하게 흘러가고있었다.
전체적인 흐름은 잘 이해하고 있지만 아직 정확하게 언제 어떻게 구현해야할지에 대해서는 고민이 많아져 카피캣을 많이해보면서 그 이유를 찾아야겠다 !