학습내용

네이버 블로그 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 기능 끄기

웹사이트를 따라만들 때 자바스크립트 기능으로 인해 레이아웃 요소들이 자꾸 변하는 경우가 있는데 크롬 브라우저에서 웹사이트의 자바스크립트를 제어하는 방법을 알게 되었다.

어려웠던 점

해결방법

소감

크롬에서 자바스크립트 기능을 제어할 수 있다는 걸 새로 알았다. 도대체 크롬에서 도대체 못하는게 뭘까..