7/19 국내외 사이트 카피캣 (네이버메인1편)

💡 학습한내용

github 링크

✅ 유용한 크롬 확장 프로그램

◾️ cssviewer : 사용된 css 언어를 한눈에 볼 수 있음.
◾️ wappalyzer : 웹 서비스, CMS 유형, 분석 도구, 플러그인, JavaScript 라이브러리 및 기타 앱 전체를 알 수 있음.
◾️ WhatFont : 사용된 폰트가 무엇인지 알 수 있음.
◾️ colorzilla : 특정 영역에 해당하는 색깔 값들을 화면에 노출시켜 줌.

✅ 네이버 소개

✔️ css defalt 값

* {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

ol, ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: black;
}

img {
    vertical-align: middle;
}

button {
    border: none;
}

.clearfix {
    clear: both;
}

.container {
    width: 1130px;
    margin: 0 auto;
}

✅ 네이버 상단

❕ 나중에 유지,보수를 보다 쉽게 하기 위해서 코드를 작성할 때는 나만의 규칙을 만들어 통일성있게 작성하는 것이 좋다.

✔️ width: clac()

• 속성의 값을 계산을 해주는 함수
• + - * / 사칙연산을 지원한다.
• + 또는 -를 해줄 때 +와 - 양 옆에 띄어쓰기를 해줘야한다. 붙여서 쓰면 작동하지 않는다.

ex)
#main-header .search_wrap input {
    width: calc(100% - 52px);

✔️ 마우스로 선택을 했을 때 테두리의 아웃라인을 제거할 때 사용되는 가상선택자 (input, textarea에 사용)

#main-header .search_wrap input:focus {
    outline: none;
}

✔️ box-shadow 사이트
https://cssgenerator.org/box-shadow-css-generator.html

✅ 네이버 왼쪽

※ [네이버메인-네이버쇼핑-네이버웹툰] 해당소스를 이용하여 실습하세요

✔️

main #news_wrap .news_lists .news_list:nth-child(6),
main #news_wrap .news_lists .news_list:nth-child(12),
main #news_wrap .news_lists .news_list:nth-child(18),
main #news_wrap .news_lists .news_list:nth-child(24) {
    border-right: none;
}

▼ 위와 같은 형태를 아래와 같이 6n로 간단하게 입력해도 된다.

main #news_wrap .news_lists .news_list:nth-child(6n) {
    border-right: none;
}

🙅🏻‍♂️ 학습한 내용 중 어려웠던 점/ 해결방법

이번 실습에서의 어려운 점은 있지 않았다.

🙋‍♀️ 학습소감

내가 매일 사용하는 네이버 웹페이지를 만드는 거라 흥미로웠다. 특히 나는 네이버 상징색인 초록색이 아닌 핑크색의 네이버를 만들어 볼 수 있어서 좋았다.
오늘은 크롬 확장 프로그램들도 다양하게 알 수 있었으며 width:calc()값에 대한 새로운 정보도 알 수 있었다. 그리고 dispaly:flex를 사용할 때 flex.help 웹사이트를 사용하니 매우 편리했으며 자주 사용해야겠다는 생각이 들었다.