0727 개발일지
학습내용
네이버 블로그 challenge 페이지, 네이버 뉴스 메인 header
github소스코드
네이버 블로그 challenge
- hot topic 메뉴에서 실제 페이지를 보니 세 항목이 동등하고 선택된 항목이 효과 들어간 식이라서 임의로 구조를 좀 바꾸어 주었다.
<ul>
<li class="on"><a href="#">HOT TOPIC 도전</a></li>
<li><a href="#">블로거, 영화를 말하다</a></li>
<li><a href="#">목표달성! 미션위젯</a></li>
</ul>
#blog-main-detail #program-nav ul li.on a {
color: #000;
font-weight: 600;
}
#blog-main-detail #program-nav ul li:hover a {
text-decoration: underline;
}
- hover로 버튼 배경색 바꿀 때 글자색에 영향 주지 않게 하기 위해
opacity
대신rgba()
사용
#blog-main-detail #program-info .program-msg-box a {
display: block;
width: 179px;
height: 40px;
background-color: rgba(125, 85, 200, 1);
font-size: 14px;
color: #ffffff;
line-height: 40px;
text-align: center;
}
#blog-main-detail #program-info .program-msg-box a:hover {
background-color: rgba(125, 85, 200, 0.8);
}
네이버 뉴스
header
- 자주 사용하는 기능 css 클래스 미리 만들기: 이번엔 flex 기능을 위한 클래스를 따로 만들었는데 확실히 코드가 줄고 간편해졌다.
.news-flex-between {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.news-flex-start {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.news-flex-end {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
<article>
태그 사용할 땐 반드시 제목 h 필요하다.- 검색창 버튼에 따로 이미지를 background로 넣어주었다.
#news-header .sub-nav .news-search-wrap .btn-search {
width: 30px;
height: 100%;
background-image: url(../img/search.png);
background-size: 24px 24px;
background-repeat: no-repeat;
background-position: center;
}
크롬에서 javascript 기능 끄기
웹사이트를 따라만들 때 자바스크립트 기능으로 인해 레이아웃 요소들이 자꾸 변하는 경우가 있는데 크롬 브라우저에서 웹사이트의 자바스크립트를 제어하는 방법을 알게 되었다.
어려웠던 점
해결방법
소감
소감
크롬에서 자바스크립트 기능을 제어할 수 있다는 걸 새로 알았다. 도대체 크롬에서 도대체 못하는게 뭘까..
Author And Source
이 문제에 관하여(0727 개발일지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lee_yesol421/0727-개발일지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)