[미니 프로젝트] 배달의 민족 네이버 블로그 만들기 with HTML + CSS

이 미니 프로젝트는 별다른 기능이 없고 HTML과 CSS를 익히기 위해 외형만 copy하였습니다!!

가장 신경 쓴 부분

1. 외형을 최대한 비슷하게 할 것
2. 작은 포인트들은 구현해 볼 것
3. lighthouse로 검사했을 때 최대한 100점에 가깝게 만들 것구현 과정일단 첫 번째 목표인 외형을 비슷하게 만들기 위해 구조, 텍스트 속성(색, 굵기 등), margin과 크기를 고려하여 코드를 작성했다.
   

   

   
   

   

   
   위가 원래 배민 블로그고 밑이 내가 만든 블로그이다.

이 부분에서 어려웠던 점

• 문제 : 화면은 넓지만 실질적인 내용이 있는 부분은 한정되어있고 가운데에 있어야했다.

  /* body의 width를 제한하고 가운데로 오게함 */
  body {
    margin: 0 auto;
    flex-wrap: wrap;
    width: 966px;
  }

• 문제 : 부모 요소에 크기를 맞추고 싶었다.

  /* 부모요소에 100퍼센트 크기를 맞춤 */
  width: 100%;

  다음으로 작은 포인트(커서를 가져다대면 밑줄이 그어지고 유튜브 버튼을 누르면 유튜브로 넘어가게 하였다.

  /* 커서 가져다대면 밑줄 */
  td button:hover{
    text-decoration: underline;
  }
  /* 유튜브 버튼 누르면 유튜브로 연결 */
  <button type="button" onClick="window.open('https://www.youtube.com/channel/UC_q3OgvzbVrHhII7N9Uetfw')" style="margin-left: 5px; margin-top: 20px; border: 0px;"><img src="youtube.png" alt="배달의 민족 유튜브" width="180px"></button>

  마지막 lighthouse 검사를 했을 때 meta data가 덜 추가 됐다고 하였고 input 태그에 무엇인가가 부족하다고 나왔다.(정확히 어떤 오류였는지 기억이 나질 않는다ㅠ)

  /* meta 정보 추가 */
  <meta name="description" content="배달의민족 공식블로그입니다. 배민의 다양한 소식을 알려드려요!">
  /* input 태그에 aria-label="Search" 이 부분을 추가해줌 */
  <input type="text" aria-label="Search" style="width: 140px; margin-left: 5px;">

  팀프로젝트였기 때문에 다른 팀원들의 코드도 보니까 몰랐던 부분을 알게 되어서 좋았다.

깃허브 : https://github.com/minsungChung/MAP-group2