네이버메인 - 1

배성현·2021년 9월 16일
0

1) 학습한 내용
웹 개발에 필요한 크롬 확장 프로그램 (카피캣 시 도움이 됨)
web developer chrome extension
(https://wpastra.com/chrome-developer-extensions/)
1. Wappalyzer - 특정 웹사이트에 접속을 하고 그 웹사이트가 어떤 기술로 만들어졌는지 확인하고 싶을 때

  1. CSS Viewer - 특정 웹사이트의 css요소를 검사할 때 일일이 검사를 안 하고도 알 수 있게 해주는 프로그램

  2. WhatFont - 특정 웹사이트에서 사용된 폰트 확인

  3. Lorem Ipsum Gentrator - 임의의 문장을 만들어줌, 커스텀도 가능

  4. ColorZilla - 특정 웹사이트에서 어떤 컬러를 사용했는지 확인 가능

네이버 메인 카피캣
시작 전 css 초기작업

  • {
    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;
}

✔.container { css로 미리 만들어준 후 html에 적용
width: 1130px;
margin: 0 auto;
}

button { 버튼에는 태생적으로 border값이 있기에 없애줌
border: none;
}

input, textarea { input,textarea에는 클릭 시 outline이 생기기에 없애줌
outline: none;
}
#header
header에 검색창과 메인 메뉴를 만들어주었다.

.search_area를 flexbox.help로 copy&paste를 해서 중앙으로 배치

#main_header .search_wrap {
✔display: flex;
flex-wrap: wrap;
justify-content: space-between; (.search_wrap안에는 input과 button을 space-between사용해서 배치해줌)
align-items: center;

position: relative;
width: 582px;
height: 52px;
border: 2px solid #19ce60;

#main_header .search_wrap input {
✔width: calc(100% - 52px);
height: 100%;

padding: 13px 15px;

font-size: 22px;

border: none;

calc - input의 100%에서 button의 width를 뺀 값, inline특성 상 미세한 공백이 있어서 동일선상에 없기 때문에 flexbox.help이용해 배치해줌

#main_header #navbar {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 12%);
}
box-shadow : 어떠한 공간의 그림자 효과, 각 숫자는 그림자의 위치나 속성 등을 나타냄
(box shadow CSS generator 참고)

#main
main에는 왼쪽, 오른쪽으로 나눈 후 왼쪽 먼저 작업을 하였다.

뉴스스탠드

main #news_wrap .news_header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
padding: 22px 0 16px 0;

}
.news_header 안에 h2와 .news_btn_wrap을 flex로 배치해줌

main #news_wrap .news_lists .news_list {
position: relative;

float: left;

width: 16.66%;
height: 65px;

background-color: #ffffff;

border-bottom: solid 1px #e4e8eb;
border-right: solid 1px #e4e8eb;

text-align: center;

}
.news_list들은 float:left;를 해서 왼쪽부터 정렬되게 함, inline요소 이기 때문에 text-align적용 가능


nth-child()적용할 때 (2n)이라고 하면 2의 배수는 다 해당이 된다.
main #news_wrap .news_lists .news_list img {
position: relative;

✔top: 50%;
✔transform: translateY(-50%);

}
.news_list 에 img는 y축 중앙정렬 해준다.

#blog_wrap
< strong>태그는 해당 부분 강조해주는 태그, 글자가 두꺼워짐

main #blog_wrap .blog_nav ul li {
float: left;
width: 12.5%;
height: 49px;

border-right: solid 1px #dae1e6;

}
main #blog_wrap .blog_nav ul li a {
display: block;
width: 100%;
height: 100%;

line-height: 49px;
text-align: center;

}
공간의 높이값이 있는 경우 line-height와 동일한 값을 넣으면 y축 중앙정렬

main #blog_wrap .blog_nav ul li {
float: left;
width: 12.5%;
height: 49px;

border-right: solid 1px #dae1e6;

}
동일선상에 float:left로 배치해준 후 같은 비율로 width를 지정해준다.

#blog_media_wrap

main #blog_wrap .blog_media_wrap ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

padding: 18px 0;
border-bottom: solid 1px #dae1e6;

}
위와 동일하게 .blog_media_wrap에는 동영상이 있는 부분인데 flex로 배치를 해준다
space-between

2) 학습내용 중 어려웠던 점
설계 뭐이리 어려운것이죠?
3) 해결 방법
여태까지 봐왔던 강의와 써왔던 벨로그를 보면서 열심히 복습하고 해야겠다
4) 학습소감
수행하랴 강의들으랴 너무 바쁘네요

0개의 댓글