210719 개발일지
1) 학습한 내용
국내외 사이트 카피캣 (네이버 메인 1편)
github
'web developer chrome extension' 검색
(https://wpastra.com/chrome-developer-extensions/)
Wappalyzer-기술스펙을 보여줌(제한은 있음)
CSS Viewer-커서올리면 css 화면 에 표기
WhatFont-사용한 폰트 알려줌
Lorem Ipsum Generator-임의의 문장 만들어줌. 컨텐츠들 채울 때 사용
ColorZilla-사이트에서 어떤 색상사용 했는지 알려줌.
button {
border: none;
} button의 태생적인 테두리 없애줌
input에도 테두리 들어가므로 border: none; 입력input태그, button태그 inline-block 요소 가지고 있음 -> inline 연달아 기입하면 미세한 공백이 생길 수밖에 없음.
width: calc(100% - 52px);
ex) 100%에서 52px 뺀 값이 input의 크기.
#main-header .search_wrap input {
width: calc(100% - 52px);공백까지 간격으로 인식되버림. -> 이럴 때 flex (flex help사이트 복붙)
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;XXX:focus { outline: none; }
focus는 마우스로 선택했을 때 테두리에 생성된 아웃라인 제거할 때 사용 되는 가상선택자
#main-header .search_wrap input:focus(입력칸이 있을 때 입력 할 때 포커싱이 됨)
{
outline: none; 테두리는 아웃라인 속성에 영향받음 (textarea태그도 동일)
}https://html-css-js.com/css/generator/box-shadow/ (박스 쉐도우 구현)
inline-block; 기본적으로 공백을 가지고 있음. 공백을 없애고 싶으면 flex를 사용해도 됨.
https://icons8.com/icons free icon
main
{
overflow: hidden;
} 부모의 높이값을 잡아주기위해 사용.
메인태그 안에 float-left/right 사용하더라도 자식의 높이값이 부모에게 영향 줄수 있음.- button태그는 type을 설정해주지않으면 기본적으로button타입으로 적용됨
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;
} 대신
main #news_wrap .news_lists .news_list:nth-child(6n) {
border-right: none;
} 써도됨 6번째 마다 값 적용 됨- 중앙정렬 꼭 기억
top: 50%;
transform: translateY(-50%);
- 우리가 만든 높이 값이 있는 경우 자식요소에 line-height로 그 높이 값 수치와 동일한 값을 넣게 되면 y축 중앙정렬 효과를 가지게 됨
main #blog_wrap .blog_media_wrap ul
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
} x축으로 같은 공백을 갖는 형태로 정렬됨2) 학습내용 중 어려웠던 점
학습의 시간이 길어 조금 힘들었다. 전반적인 내용의 어려움은 없으나 부분부분 태그의 정의가 헷갈리는 것들이 있었다. 또한 css의 범위를 계속 만들어 내고 늘어나니 그 안에 필요한 속성을 넣으려니 헷갈리는 것이 많았다.
3) 해결방법
태그의 정의는 검색을 통해 해결하였다.
크롬의 검사를 통해 만들고 있는 부분을 하나씩 짚어가며 확인하였다.
4) 학습소감
한번 layout을 만들고 나면 복사 붙여넣기를 통해 늘일 수 있는 장점이 있지만 그전에 꼼꼼하게 확인하고 만들어내야 하는 것의 중요성을 다시 한번 확인함
