[Web] Apple Homepage Benchmarking Project

 

 

학교 과제로 수행한 웹 프로젝트 벤치마킹 프로젝트이다.

애플 사의 홈페이지를 벤치마킹하여 자기소개 페이지로 수정하였다.

 

벤치마킹이 끝나고 나서 애플 홈페이지가 일부 바뀌었기 때문에 비교가 불가능한 점 양해 바란다.

 

상단부의 이미지에 들어갈만한 항목을 생각하지 못하여서 애플 사의 이미지를 그대로 적용하였다.

 

 

상단 메뉴 바의 코드이다.

position: fixed를 주어 고정되도록 하였다.

hover속성을 주어 text의 천천히 색이 바뀌어지도록 했다.

div#menuBar {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.8);
  width:100%;
  padding-top: 9px;
  padding-bottom : 13px;
}

ul.menuBarList{
  margin: 0;
  text-align: center;
  list-style-type: none;
  font-family: sans-serif;
  font-size: 13.5px;
  word-spacing: 74px;
}

li.menuBarList {
  display: inline;
  color: white;
}

li.menuBarList:hover {
  transition: color 0.5s;
  color: gray;
  cursor: pointer;
}

 

과제를 끝낸다는 것에 급급해서, 당장 따라 하기에만 집중했었던 것 같다.

때문에 코드가 상당히 정리되지 않았다.

당시에 내가 이 프로젝트를 할 수 있을까 하는 의구심도 들었다.

그래도 엉망이지만 해내고 나니 뿌듯한 감정을 느낄 수 있었다.

이 프로젝트를 경험 삼아, 앞으로는 과제를 하더라도 더 꼼꼼하고 깔끔하게 할 수 있도록 해야겠다.

 

개발 기간 : 2018.11.12 ~ 2018.11.14

github Link : https://github.com/gurdlwl/Web_Benchmarking

gurdlwl/Web_Benchmarking