1) 학습한 내용
웹 개발에 필요한 크롬 확장 프로그램 (카피캣 시 도움이 됨)
web developer chrome extension
(https://wpastra.com/chrome-developer-extensions/)
1. Wappalyzer - 특정 웹사이트에 접속을 하고 그 웹사이트가 어떤 기술로 만들어졌는지 확인하고 싶을 때
-
CSS Viewer - 특정 웹사이트의 css요소를 검사할 때 일일이 검사를 안 하고도 알 수 있게 해주는 프로그램
-
WhatFont - 특정 웹사이트에서 사용된 폰트 확인
-
Lorem Ipsum Gentrator - 임의의 문장을 만들어줌, 커스텀도 가능
-
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에 검색창과 메인 메뉴를 만들어주었다.
#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에는 왼쪽, 오른쪽으로 나눈 후 왼쪽 먼저 작업을 하였다.
뉴스스탠드
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) 학습소감
수행하랴 강의들으랴 너무 바쁘네요
