0804 개발일지

Yesol Lee·2021년 8월 4일

AI스쿨_개발일지

목록 보기

28/57

학습내용

네이버 e스포츠 header, main-left
github소스코드
naver-esport-header-main-left

position:fixed의 위치 이동은 브라우저를 기준으로 함. left, top을 이용해 스크롤 내려도 왼쪽 상단 같은 위치에 고정되게 만듦. z-index를 이용해 항상 모든 개체의 위에 있도록 함.

#esport-header {
    position: fixed;
    width: 100%;
    background-color: #151618;
    left: 0;
    top: 0;
    border-bottom: solid 1px lightgray;
    z-index: 999;
}

flex를 사용한 영역에 고정 높이값을 정해주면 align-item:center로 인해 자동 y축 중앙정렬됨.

<div class="nav-wrap flex-between"></div>

#esport-header #esport-nav .nav-wrap {
    height: 60px;
}

로그인 버튼 옆 메뉴 버튼에 아이콘 넣어 줌.

#esport-header #esport-nav .right .btn-menu {
    width: 40px;
    height: 40px;
    margin: 22px 0 0 5px;
    background: url(../img/menu-white.png) no-repeat;
    background-size: 20px 20px;
}

timeline-wrap

display:none으로 요소 숨기기: 강의에선 다루지 않았지만 리스트마다 세부 요소들이 조금씩 달라서 조건에 따라 보여주고 숨기는 식으로 만들어 보았다. 뭔가 더 좋은 방법이 있을 것 같은데 일단 길게 적었다.

<li>
  <a href="#">
    <span class="date">오늘 (08. 04)</span>
    <h2>2021 LCK 서머 정규시즌 2R</h2>

    <div class="match-wrap">
      <span>프레딧</span>
      <span>담원 기아</span>
    </div>

    <div class="status-wrap on flex-between">
      <span class="time">19:00</span>
      <span class="live">LIVE</span>
      <span class="status">진행 중</span>
    </div>
  </a>
</li>

#esport-main-top .timeline-wrap li a .status-wrap.on .time,
#esport-main-top .timeline-wrap li a .status-wrap .live,
#esport-main-top .timeline-wrap li a .status-wrap .status {
    display: none;
}
#esport-main-top .timeline-wrap li a .status-wrap .time,
#esport-main-top .timeline-wrap li a .status-wrap.on .live,
#esport-main-top .timeline-wrap li a .status-wrap.on .status {
    display: initial;
}

live-wrap

display-block과 display:flex는 같이 적용할 수 없다.

/* display:block을 하니 display:flex가 안먹히는듯 */
#esport-main-top .live-wrap li a {
    /* display: block; */
    width: 100%;
    height: 100%;
    align-items: flex-start;
}

img-wrap 사용해 img, 라이브 표시 및 시청자수 겹쳐서 넣어줌

#esport-main-top .live-wrap .img-wrap {
    position: relative;
    width: 442px;
    height: 250px;
    overflow: hidden;
}
#esport-main-top .live-wrap .img-wrap img {
    position: absolute;
    width: 100%;
    height: 100%;
}
#esport-main-top .live-wrap .img-wrap .status {
    position: absolute;
    left: 0;
    top: 0;
    padding: 14px 14px 0;
    font-size: 12px;
}

사진에 마우스 올리면 커지는 효과 구현

#esport-main-top .live-wrap .img-wrap:hover img {
    transform: scale(1.1);
    transition: transform 0.1s linear;
}

main-article

선형 그라데이션 overlay 넣기

강의에서 다루진 않았지만 사진 위에 검은색 그라데이션으로 overlay가 들어있는 것 같아서 만들어보았다. 높이를 전체의 반으로 하고 linear-gradient(direction, start-color, end-color)속성을 이용해 background를 채워준 후, position:absolute로 위치를 고정해 주었다.

#esport-main-article .article .overlay {
    position: absolute;
    width: 100%;
    height: 50%;
    background: linear-gradient( to top, #000000, transparent);

    left: 0;
    bottom: 0;
}

여러 줄 말줄임

overflow:hidden
max-height
webkit-line-clamp: 말줄임 시작할 줄, -webkit-box-orient 말줄임 방향
display: -webkit-box;: 말줄임 표시 나타남

한 줄 말줄임에 사용되는 white-space: nowrap은 한 줄로 길게 이어지게 하는 기능이므로 사용하지 않음

#esport-main-article .article .txt-wrap p {
    display: -webkit-box;

    overflow: hidden;
    text-overflow: ellipsis;

    max-height: 57px;

    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    margin-top: 5px;

    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
}

esport-section default css

title-wrap에 after로 화살표 이미지 넣기

.esport-section .title-wrap h2::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../img/next.png) no-repeat;
    background-size: 12px;
    background-position: center;
    vertical-align: -3px;
}

esport-replay

css 작성규칙

overflow, float, display, position 관련
공간 만들기
배치
폰트 속성

어려웠던 점

timeline-wrap에서 status-wrap 부분 위치 지정하기
header에서 flex가 사용된 a태그의 영역을 넓히기 위해 display:flex를 사용하니 flex가 적용되지 않았다. 그래서 처음엔 넓이 100%를 했는데 적용이 안 되서(아마 block도 안 먹힌듯)부모의 부모까지 거슬러 올라가며 값을 적용했다.

해결방법

margin으로 위치 잡긴 했는데 리스트 내용에 따라 margin의 시작 기준점 바뀔 것이므로 결국 absolute로 위치 지정해야 한다고 생각한다.
아마 display를 중복으로 적용하는 게 안 되서 일어난 문제인 것 같다. flex를 사용한 영역의 크기를 넓히려면 그냥 고정 크기값을 주면 된다.