[TIL] 01. Google 홈페이지 클론 프로젝트 (4) - css #footer, Wrap-up

해당 프로젝트 관련 마지막 포스팅. #footer 설정 방식 및 전체적으로 느낀점을 정리했습니다.

5. #footer 설정

결과물

• Footer grid 설정 (2행, 행별로 각각 열 설정)
• background-color 및 border 추가, color 조정
  
  

소스코드

/* Footer */

#footer {
    border: 1px solid rgb(213, 218, 223);
}

.footer1 {
    display: grid;
    height: 40px;
    grid-template-areas: "korea";
    background-color: rgb(231, 231, 231);
    border-bottom: 1px solid rgb(213, 218, 223);
}

.footer2 {
    display: grid;
    height: 40px;
    grid-template-columns: 60px 60px 100px 100px 1fr 140px 60px 60px;
    grid-template-areas
      :"advert business info search-work . privacy terms setting";
    background-color: rgb(231, 231, 231);
}

.korea {
    grid-area: korea;
    justify-self: start;
    align-self: center;
    margin-left: 25px;
    color: rgb(116, 116, 116);
}

.advert {
    grid-area: advert;
    justify-self: center;
    align-self: center;
    margin-left: 12px;
    color: rgb(116, 116, 116);
}

.business {
    grid-area: business;
    justify-self: center;
    align-self: center;
    color: rgb(116, 116, 116);
}

.info {
    grid-area: info;
    justify-self: center;
    align-self: center;
    color: rgb(116, 116, 116);
}

.search-work {
    grid-area: search-work;
    justify-self: center;
    align-self: center;
    color: rgb(116, 116, 116);
}

.privacy {
    grid-area: privacy;
    justify-self: center;
    align-self: center;
    color: rgb(116, 116, 116);
}

.terms {
    grid-area: terms;
    justify-self: center;
    align-self: center;
    color: rgb(116, 116, 116);
}

.setting {
    grid-area: setting;
    justify-self: center;
    align-self: center;
    margin-right: 12px;
    color: rgb(116, 116, 116);
}

배운 점

• footer 2개 행에 각각 테두리가 들어가도록 설정하는게 어려웠다. 결국 #footer 내부를 .footer1, .footer2로 나누어 #footer 전체에 테두리를 넣고 .footer1에 border-bottom을 넣는 방식으로 해결했다.

질문

• 크롬 개발자 모드에서 특정 색깔 추출하는 방법?
• ID, class 및 a 간 우선순위는? (왜 ID 단위 색상 변경해도 해당 ID 하단 a에 변화 없는지?) → 우선순위의 문제가 아닌가? !important 적용해도 변화 없음, 반대로 각각 class에 색상 변경 넣으니 변동사항 적용됨
  
  

Wrap-up

이틀에 걸쳐 첫번째 클론 프로젝트를 완성했다. 전체적인 페이지 구성을 짜는 순서를 익혔다는 점이 가장 큰 수확이다. 하지만 아쉬운 점 역시 많다. 특히 몇 가지 정리하면,

• 스크롤하더라도 footer가 최하단에 있도록 유지하는 방법
• position, min-height 개념 익히기 (현재 페이지가 왜 페이지 크기 변화시킬 경우 거기에 맞춰서 이동하는지 이해 불가)
• flexbox와 grid의 차이점? (flexbox는 grid-area같은 기능이 없나?)

등을 추가로 보완해야겠다.
우선 이번 프로젝트는 이 정도 선에서 마무리하고, 위코드 사전스터디 과제인 '자기소개 페이지' 작성하면서 보다 심화학습할 예정이다.

End.