학습내용

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

header

• 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;
}

여러 줄 말줄임

1. overflow:hidden
2. max-height
3. webkit-line-clamp: 말줄임 시작할 줄, -webkit-box-orient 말줄임 방향
4. 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 작성규칙

1. overflow, float, display, position 관련
2. 공간 만들기
3. 배치
4. 폰트 속성

어려웠던 점

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

해결방법

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

소감

개인적으로 오늘 새로운 팁을 많이 배워서 재미있었다. 특히 linear-gradient 속성을 처음으로 찾아서 사용했다. 내가 모르는 css 속성들이 엄청 많을테니 다 알기는 힘들지만, 있다는 것만 알아둬도 검색해서 사용하는 데 도움될 것 같다.