0811 개발일지

Yesol Lee·2021년 8월 11일

대구AI스쿨

AI스쿨_개발일지

목록 보기

33/57

학습내용

트위치 content, footer, css 추가설명
github소스코드
twitch-content, footer

content 영역 default 클래스

content 내부 요소들은 중앙정렬되어야 함으로 content-container라는 클래스를 만들어서 넣어주었다.

.content-container {
    width: 1240px;
    margin: 0 auto;
}

각 영역의 제목 및 태그는 모든 영역 동일한 디자인이라 통일해주었다.

.content-container .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 5px;
}
.content-container .tag-wrap .tag {
    background-color: #202024;
    border-radius: 8px;
    padding: 3px 5px 2px;
    margin-right: 5px;

    font-size: 12px;
    color: #fff;
}
.content-container .tag-wrap .tag:last-child {
    margin-right: 0;
}
.content-container .txt-wrap h3 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    font-size: 16px;
}

content 안 내부 영역은 video-section 타입과 category-section 타입, footer 3가지로 이루어져 있어 css 코드를 많이 줄일 수 있었다.

video-section

hover 효과 적용을 위해 img-wrap-hover라는 클래스로 img-wrap안의 사진, span 태그들을 한 번 더 감싸주고 img-wrap에 보라색 배경색을 넣어주었다. 강의에서는 img에 hover효과를 적용해 span태그들이 같이 움직이지 않았지만 나는 img-wrap-hover를 움직여서 모든 요소들이 같이 움직이게 해 주었다.

<div class="img-wrap">
  <div class="img-wrap-hover">
    <img src="https://via.placeholder.com/333x186" alt="">                                       
    <span class="mark">생방송</span>
    <span class="viewer">시청자 4.8만명</span>
  </div>
</div>

.video-section .video-wrap .img-wrap {
    width: 300px;
    height: 186px;
    background-color: #9147ff;
}
.video-section .video-wrap .img-wrap .img-wrap-hover {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all 0.1s linear;
}
.video-section .video-wrap .img-wrap:hover .img-wrap-hover {
    transform: translate(5px, -5px);
}

section의 더보기버튼을 만들 때, 어렵게 생각할 필요 없이 button의 배경색을 content의 배경색과 동일하게 만들어주니 마치 border가 중간에 끊긴 듯한 모습이 되었다.

.video-section .btn-more {
    position: absolute;
    width: 100px;
    height: 30px;
    background-color: #0e0e10;

    text-align: center;
    line-height: 30px;

    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
}

category-section

video-section에서 약간만 수정해서 사용했다. 원래 고생했던 hover효과는 img에만 적용하면 되서 쉽게 해결했다.

ul태그 중앙정렬하기 위해 감싸는 태그 하나 만들고 flex로 내부 요소 1개인 경우 정렬

footer .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;

    margin-top: 20px;
}

ul 및 li 사이 세로줄은 left-area에 있던 부분을 활용했다.

css 추가설명

css 변수 사용법

트위치 사이트에선 css 변수를 적극 활용했다. css 변수 기능은 익스플로러에서는 거의 지원하지 않기 때문에 사용 시 주의가 필요하다.

/* :root
어떤 영역에서든 가져다 쓸 수 있는 변수값 */
:root {
    --black: #18181a;
    --brand-color: #9147ff;
    --font-size-40: 40px;
}
h1 {
    color: var(--brand-color);
    background-color: var(--black);
    font-size: var(--font-size-40);
}
/* 특정 영역 안에 선언하면 해당 영역에서만 사용할 수 있음 */
#intro {
    --font-color: blue;
    --font-size: 50px
}
#intro p,
#footer p {
    font-size: var(--font-size);
    color: var(--font-color);
}

reset.css와 normalize.css

reset.css

기존 html태그의 모든 속성을 초기화하는 코드이다. 모든 태그가 기본적으로 가지고 있는 속성값들은 브라우저마다 값이 조금씩 다른데, reset.css 파일을 사용하면 html태그들이 가지고 있는 속성값을 전부 없애준다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>CSS 추가설명</title> -->
    <!-- <link rel="stylesheet" href="css/normalize.css"> -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Hello World</h1>
    <h2>Hello World</h2>
    <h3>Hello World</h3>
    <h4>Hello World</h4>
    <h5>Hello World</h5>
    <h6>Hello World</h6>
</body>
</html>

reset.css

normalize.css

html 태그에 기본적으로 들어가는 css 속성값은 각 브라우저마다 조금씩 다르다. normalize는 브라우저 간 차이를 줄이는 방향으로 디자인값을 재정의해준다.
normalize.css

어려웠던 점

video-section에 hover효과를 만들 때 실제 페이지처럼 img-wrap안의 이미지와 '생방송', '시청자수' 태그들이 함께 움직이게 만들고 싶었는데 여러 가지 시행착오를 겪었다.
처음엔 img-wrap 안에 overlay 영역을 만들고 z-index로 내부 요소 순서를 정리한 후 img-wrap에 hover효과를 주었는데 overlay영역도 같이 이동하다 보니 원하는 효과를 얻지 못했다. 그래서 overlay를 img-wrap 밖으로 빼는 것도 생각해봤는데, 네이버 게임 페이지 상단을 만들 때처럼 각 li 태그마다 overlay가 그 밑에 겹치도록 위치를 하나씩 잡아주어야 한다는 번거로움이 있어서 이번엔 다르게 만들기로 했다.
두번째로 내부 이미지와 span을 top, right를 이용해 이동시키는 방법을 생각했다. 그런데 이미지는 괜찮으나 span의 경우 이미 top, left로 위치가 조정되어 있는 상태라서 속성값이 겹치는 문제가 있었다.

해결방법

결국 img-wrap 안에 img와 span태그들을 전부 감싸는 img-wrap-hover 영역을 하나 더 만들어서 여기에 hover효과를 적용했다.
영상을 보니 transform: translate()를 사용했다. 이 방법을 사용하면 원래 위치에서 이동하니 이미 위치가 이동되어있는 span태그들도 쉽게 움직일 수 있었다. 나는 왜 이 방법을 생각 못했을까?ㅠ

소감

오늘은 hover 효과때문에 시행착오가 있었다. 사실 hover효과를 강의에서 다루지 않는 줄 알고 뒷부분 보기도 전에 한 거라 translate()라는 적절한 기능을 바로 사용하지 못했다. 하지만 네이버 게임에서 비슷한 효과를 만들 때보다 더 효율적인 코드를 짠 것 같아서 기분이 좋았다.(그때는 각 li의 그림자 위치를 하나씩 개별조정했다.)