□ 사이트 카피캣 – 네이버 메인 1/2
★ 작성코드
1. 유용한 크롬 확장 프로그램
① web developer chrome extension → https://wpastra.com/chrome-developer-extensions/
② Wappalyzer - 특정 웹사이트 접속 시, 사이트의 기술 스펙으로 확인하는 확장 프로그램
- 모든 웹사이트의 기술 스펙을 볼 수는 없음, 기술 스펙을 알려 주지 않는 곳도 있음
③ CSS Viewer : 웹 사이트의 css 속성과 속성값을 쉽게 알 수 있게 해주는 확장 프로그램
④ Whatfont : 웹 사이트의 font 속성을 알 수 있음
⑤ Lorem Ipsum Generator : 임의의 문장을 만들 때 활용되는 확장 프로그램
⑥ ColorZilla : 웹 사이트에서 사용된 색을 확인하는 확장 프로그램
2. 네이버 상단 영역
■ 검색바 영역
● 초기화 작업
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
a {
text-decoration: none;
color: #000000;
}
img {
vertical-align: middle;
}
.clearfix {
clear: both;
}● 검색바 작업 : input 태그, button 태그 사용
● 검색 바 가운데 정렬(flex 활용)
※ 참고 사이트 : flexbox.help
#main_header .search_area {
display: flex;
justify-content: center;
align-items: center;
}※ 코드 작성에 있어서 작성 영역에 일관성 및 통일성이 있어야 함 → 유지보수에도 도움이 됨
예시) css 상단 - 차원과 관련된 영역, 중단 – 공간과 관련된 영역, 하단 – 텍스트와 관련된 영역
● button 태그는 기본적으로 border 값을 가지고 있음 → 초기화 필요
button {
border: none;
}● width: calc() - 계산식을 넣어 범위를 지정할 수 있음(※ 띄어쓰기가 중요함)
width: 100%상태
{ width: calc(100% - 52px); }상태
● 위의 스크린샷과 같이 button이 검색창 밖에 나와있는데, 이는 inline 요소 사이에는 미세한 공백이 있기 때문
→ space-between을 사용하면, flex 사용 시 inline 사이에 있었던 공백이 사라짐
● input 영역 클릭 시 생기는 테두리 제거 → 가상선택자(:focus – 마우스 선택 시)를 사용, outline에 none 적용
※ default 값으로 자주 사용함
#main_header .search_wrap input:focus {
outline: none;
}■ navbar 영역
● #navbar { }에 네이버 사이트와 같이 box-shadow(어떠한 공간에 그림자 효과 지정) 속성 작성
※box-shadow 참고 사이트 - https://cssgenerator.org/box-shadow-css-generator.html
#main_header #navbar {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}● 결과 스크린샷
3. 네이버 왼쪽 영역
● 먼저 큰 틀로서, main 내에 main-left와 main-right 영역을 설정함
● main-left에는 ‘광고(banner)’와 ‘뉴스(news)’, ‘오늘 읽을만한 글’ 영역을 설정함
■ 광고(banner) 영역 및 뉴스(news) 영역
● 광고(banner) 영역
main #banner-wrap {
width: 750px;
height: 135px;
background-color: #000000;
margin-bottom: 12px;
}● 결과 스크린샷
■ 오늘 읽을만한 글 영역
※ 공간의 높이값이 있는 경우, line-height에 높이값과 동일한 값을 넣게되면 y축 가운데 정렬이 됨
● 결과 스크린샷
□ 어려웠던 점
오늘 강의 내용이 많아, 긴 시간을 집중해서 정확하게 코드를 작성해야한다는 점이 어려웠습니다. 코드들은 기존의 내용의 반복되는 점이 많아서 큰 어려움은 없었습니다.
□ 해결방법
강사님께서 알려주신 참고 사이트를 이용하여 flex를 이용한 정렬하는 코드를 쉽게 작성할 수 있었습니다.
□ 학습 소감
아직까지도 코로나로 인해 강의를 듣고 코드 작성을 하는 것이 반복되다보니, 아무래도 다른 사람들과도 의견을 물어가며 수업을 하고 싶다는 생각이 많이 들었습니다. 아직까지도 배운 것들을 약간만 변형되어도 코드가 원하는 결과를 내지 못하는 경우가 많기 때문입니다.
