[DEVELUP] 빌보드차트 만들기

19/10/14 html과 css로 만들어보는 빌보드차트

유튜브 링크 환경은 구름IDE 를 사용했습니다.

https://github.com/develup-official/css-ep2-billie-board

해당 레파지토리를 클론하고 html과 css파일을 수정하였습니다.

빌보드차트 완성 모습입니다.

---

1. 레이아웃

가장 먼저 신경써야 하는 부분은 전체적인 레이아웃입니다.

초심자일 때 일 수록 작은 부분에 집착하게 되는데 전체적으로 몇 개의 덩어리로 이루어져있는지가 중요합니다.

완성된 빌보드차트를 참고해보면 바디 안에 한 덩어리로 이루어져 있습니다. 한 덩어리는 div 태그로 나타내고 class 를 달아주는데 보통 wrapper 라고 하기도 하고 container라고 하기도 합니다.

index.html

<div class="wrapper">
            ...
</div>

잘 들어갔는지 확인을 할 때는 Open Preview를 누르면 간단하게 확인이 가능합니다.(구름 IDE) vscode 에서는 extensions 에서 open in browser 를 설치하시고 Alt + B를 누릅니다.

많은 분들이 html markup을 다 하기 전에는 css를 거의 하지 않으려하는 경향이 있지만 html markup을 최소한으로 가져가고 css를 최소한의 마크업 기준에서 작성하는 방법이 전체적인 틀을 잡는 것과 같아 더 안정적이라고 합니다.

style.css

body{
        background-color: #333;
}
​
.wrapper{
        background-color: #999;
        width: 800px; // 너비
        margin: 0 auto; // 가로기준 가운데 정렬(상하단 0, 좌우 auto)
}

여기까지 하고 안에 마크업을 더 합니다. 이 방법은 템포가 느릴 수 있지만 의도적인 것으로 안정성을 우선시합니다.

2. 마크업

제목을 작성합니다.

<div class="wrapper">
    <h1>
        BILLIEBOARD
    </h1>
</div>

차트의 항목들은 1, 2, 3, 4, ... 숫자가 앞에 붙어있습니다. 그렇다는 것은 순차가 있는 리스트라는 뜻으로 비슷한 것은 네이버 실시간 검색 순위가 있습니다. 순차적 리스트일 때는 <ol>태그를 많이 씁니다. 리스트를 만들고 class를 chart와 chart-item 으로 달아줍니다.

<div class="wrapper">
    <h1 class="title">BILLIEBOARD</h1>
    <ol class="chart">
        <li class="chart-item">Rank1</li>
        <li class="chart-item">Rank2</li>
        <li class="chart-item">Rank3</li>
    </ol>
</div>

여기까지 오면 의도적으로 디자인되지 않은 여백들이 보이게 되는데 그 이유는 브라우저가 태그에 따른 기본 스타일을 이미 가지고 있기 때문입니다.

이 문제를 해결하기 위해서 새창 아이콘을 클릭하게 되면 프리뷰가 새 창에서 나타나게 되는데 이 때 검사를 누르면 개발자 도구가 뜨면서 어디서 문제가 있는지 쉽게 찾을 수 있습니다. Ctrl + Shift + I 나 F12를 눌러도 가능합니다.

실제로 확인해보면 마진을 설정해놓지 않았는데도 마진이 있는것을 확인할 수 있습니다. 이는 몇 개의 태그에 기본으로 셋팅을 해주는 user agent stylesheet라고 합니다. 이런 부분들은 없애는게 좋습니다.

3-1. CSS : 전체적인 틀

제목과 리스트에 margin과 padding을 없애고, list에 붙여진 숫자들을 지웁니다. 완성모습에는 숫자가 있지만 list-style-type으로 똑같이 만들기 힘든 부분이므로 기본으로 제공해주는 리스트 스타일은 없애도록 합니다.

ol, h1 {
        margin: 0;
        padding: 0;
}
​
li {
        list-style-type: none;
}

구역확인용으로 작성했던 wrapper에 background-color도 지우고 body의 전경색을 밝은 회색으로 지정합니다.

.title {
        text-align: center;
        color: deeppink;
        font-size: 80px;
        letter-spacing: 0.2em;
    text-indent: 0.2em;
    padding: 50px 0;
}

letter-spacing 속성으로 글자간의 간격도 조절할 수 있습니다. em 이란 폰트 사이즈를 기준으로 비례하는 크기를 뜻하는데요, 위의 코드에서는 글자 크기인 80px을 기준으로 20%에 해당하는 크기만큼 letter spacing을 하겠다는 뜻 입니다.(글자간 간격을 줍니다.)

그냥 letter-spacing 까지만 하면 마지막 글자까지도 letter-spacing이 적용되기 때문에 앞단에 들여쓰기(test-indent)속성을 추가하여 가운데 정렬이 유지되는 것 처럼 보이도록 합니다.

그리고 상하단 padding 까지 주도록 하겠습니다.

3-1. CSS : ordered list | 마진겹침현상

이제부터 중요한 부분입니다.

.chart {
        background-color: #aaa; 
}
.chart-item {
        background-color: white;
    margin: 60px;
}

아까부터 background-color 를 처음에 주는 부분은 차트가 얼마만큼의 공간을 차지하고 있는지 확인하는게 중요하기 때문입니다.

그리고 차트에 간격들을 주기위해서 margin을 줍니다.

그러면 위와 같은 모습을 보게 되는데 이는 우리의 의도와 다른 방향입니다. css를 많이 해본 사람은 빨리 알 수 있지만 초심자라면 모르는... 여기에서 기초 지식하나를 꼭 짚고 가야합니다.

흰 부분들은 list로 block level element입니다. 이들끼리는 상하단 마진이 겹친다. 또는 병합됩니다. 이러한 현상을 마진겹침현상이라고 합니다. 사실 마진겹침현상은 자연스러운 디자인인데 지금은 chart와 chart-item 이라는 부모 자식 관계에서 마진겹침현상이 일어나고 있으므로 이를 해결하고자 합니다.

그림과 함께 설명해주는 상세설명은 위의 유튜브 링크 동영상 35분 부터 확인하시면 됩니다. 간략히 요약을 하자면 아래와 같습니다.

사실 블록과 블록사이의 상하단 마진이 겹치게끔 하는건 개발자의 의도된 바이다. 자연스러운 디자인. 합리적이다. 
​
그런데 맨 위와 아래도 겹친다는게 문제인것이다. wrapper와 box 즉 부모와 자식간의 관계에서 마진겹친현상이 일어나게된다. 컴퓨터는 단순히 조건에 의해서 움직이는 것이다. wrapper은 부모이면서 block-level-element, box도 block-level-element. 인접해있는 상단 마진, 인접해있는 하단 마진. 그래서 부모와 자식간에도 상하단 마진겹침현상이 일어난다.

해결방법

• border: 부모와 자식 사이에 border라는 공간을 차지하고 있는 경계면이 생기니까 마진겹침현상이 해결된다.

• padding: 또는 패딩을 1px만 줘도 해결이 된다. 이것도 마찬가지로 부모와 자식 사이에 공간이 생기기 때문에 상하단 마진겹침현상이 일어나지 않는다.

• overflow: 하지만 보더나 패딩은 시각적으로 보일수 있기 때문에 overflow: hidden;을 사용한다. 시각적으로 보여지지 않고 마진겹침현상을 해결할 수 있다. (이전 에피소드 참고: 유튜브 이전 강의)

따라서 코드를 고치면 아래와 같이 쓸 수 있고 문제가 해결됩니다.

style.css

.chart {
      background-color: #aaa;
      overflow: hidden;
}

또 다른 방법은 아래와 같습니다.

style.css

.chart {
      background-color: #aaa;
      padding: 60px;
}
​
.chart-item {
      background-color: white;
      margin-bottom: 60px;
}
.chart-item:last-child {
      margin-bottom: 0;
}

둘 다 같은 결과를 볼 수 있습니다.

3-2: CSS : mouse over | 포지션 속성

완성본을 다시 보면 마우스 오버했을 때 요소들이 커지는 것을 볼 수 있습니다. 그런데 그냥 커지는 게 아니고 안에 있는 내용은 가만히 있고 전체 틀이 커지고 있습니다.

이런 애니메이션적인 부분들 해결하기 위해서는 한 가지 기본 지식이 필요한데 그 지식이 바로 position 속성입니다.

자세하게 강의가 필요하신 분들은 유튜브 영상 47분 30초 부터 시청하세요.

주위환경에 영향을 끼치지 않고 위치를 움직일 수 있게 하는 속성이 position relative 속성입니다. 단독으로 relative만 쓰는 경우는 많지 않다고 합니다.

우리가 집중적으로 쓰는 속성은 position absolute로 전체 창을 기준으로 움직이게 됩니다.

부모 속성을 realative로 하면 '상대적인 속성안에서 절대적으로 가라.' 가 되어 상대적인 절대위치를 지정할 수 있게 됩니다. 굉장히 기본적인 패턴이면서 많이 쓰므로 잘 알아두면 좋겠습니다. relative가 조상에 여러개라면 바로 위의 부모를 기준으로 움직이게 됩니다.

02-position/02-position.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>02 Position</title>
        <link rel="stylesheet" href="02-position.css">
        <style>
            body {
                background-color: #ddd;
            }
            .grand-father {
                background-color: #eee;
                width: 800px;
                margin: 0 auto;
                padding: 1px;
            }
            .father {
                background-color: white;
                width: 300px;
                height: 200px;
                margin: 50px auto;
                               position: relative;
            }
            .pos {
                background-color: orange;
                                position: absolute;
                                left: 0;
                                right: 0;
                                top: 0;
                                bottom: 0;
                                margin: 0;
                                transition: margin .5s;
            }
                    .pos:hover {
                            margin: -30px;
                      }
        </style>
    </head>
    <body>
​
        <div class="grand-father">
            <div class="father">
                <div class="pos">
                    POS                 
                </div>
            </div>
        </div>
       
    </body>
</html>
​

자식의 포지션이 absolute이고 left:0; right:0; 이면 양쪽으로 늘어난다. 그리고 top과 bottom도 0이라면 부모의 크기만큼 늘어나게 된다. 이 때 마진을 negative마진을 주게되면 확장되는데 이 원리를 따라서 hover될 때 네거티브 마진이 되게끔 하면 안에 컨텐츠는 가만히 있고 틀만 커지게 된다. 여기서 애니메이션 효과를 transition: margin .5s; 이렇게 주면 0.5초동안 마진 속성안에서 중간치값을 계산하겠다는 뜻이 된다.

02-position/02-position.html

.pos {
    background-color: orange;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: 0;
    transition: all .5s;
    padding: 50px;
    border: 0px solid red;
​
}
.pos:hover {
    margin: -30px;
    border-radius: 20px;
    border: 10px solid red;
}

이렇게 바꾸면 모든 속성들에 대해서 애니메이션이 적용됩니다.

원래 프로젝트로 돌아가서...

그래서 정리하자면 부모인 chart-item을 position relative로 지정해두고 chart-item 안에 들어갈 album에 대해서 position absolute를 지정해두어 hover 됐을 때 margin에 마이너스값을 주게 되면 전체 틀이 커지게 됩니다.

album을 div로 만들었습니다.

index.html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>BillieBoard</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        
        <div class="wrapper">
            <h1 class="title">BILLIEBOARD</h1>
            <ol class="chart">
                <li class="chart-item">
                    <div class="album">
                        Album01
                    </div>
                </li>
                
            </ol>
        </div>
        
        <script> </script>
    </body>
</html>

style.css

.chart-item {
    background-color: white;
    margin-bottom: 60px;
    position: relative;
}
​
.album {
    background-color: #999;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all .5s;
}
​
.album:hover {
    background-color: white;
    margin: -30px;
}

4. 본격적인 차트 꾸미기

1,2,3,4,5 는 일단.. 생략하고! 가장 큰 레이아웃이라고 할 수 있는 커버이미지와 콘텐츠를 먼저 넣어보도록 합니다.

index.html

<div class="album">
    <img class="album-cover" src="images/cover01.jpg">
    <div class="album-contents">
        ...
    </div>
</div>

이미지가 상단에 있고 내용들이 뒤따라오는 모습입니다.

그리고 이미지위치를 오른쪽으로 움직이기 위해서 3-1에서 배운내용을 적용시켜보겠습니다.

이미지는 오른쪽에, 앨범 컨텐츠는 왼쪽에 위치하도록 합니다.

style.css

.album-cover {
      float: right;
      height: 100%; /*부모 크기의 100%*/
}
​
.album-contents {
      border: 5px solid red;
}

이렇게 보면 border가 이미지와 겹치는것을 볼 수 있는데, 이를 완전히 분리시키기 위해서 overflow 속성을 이용합니다.

style.css

.album-contents {
      border: 5px solid red;
      overflow: hidden;
      padding: 10px;
}

이제 패딩까지 넣으면 컨텐츠와 커버가 명확하게 나눠지면서도 독립적으로 유지가 됩니다.

전체적인 틀을 갖췄으니 세부적인 마크업에 들어가도록 하겠습니다.

---

세부적인 마크업

readme.md 에 작성되어있는 더미데이터를 이용하여 html을 마저 작성합니다.

그러면 이런 모습을 볼 수 있는데요, 높이가 굉장히 큽니다. 이런 모습은 초반에 언급했던 user agent stylesheet 로 h2와 p태그에 기본적으로 적용된 상하단마진이 있기 때문입니다. 이를 없애주기 위해서 스타일을 추가합니다.

style.css

ol, h1, h2, p {
      margin: 0;
      padding: 0;
}

이렇게만 해주면 의도대로 되는것을 볼 수 있습니다.

그리고 border를 없애고

style.css

.album-contents {
  overflow: hidden;
  padding: 10px;
}

index.html에서 <li> 부터를 5번 더 붙여넣어 줍니다.

5. sudo-element 가상 요소

타이틀아래에 밑줄을 긋는 표현을 해보겠습니다.

타이틀에 상대적인 position속성을 주고 가상요소인 after을 이용하여 공백을 주고 left, right 를 0 으로 하여 밑줄처럼 만든 후 마진으로 높이를 조절할 수 있습니다.

++ left: 0; right:0; top: 0; bottom: 0; 대신 width 100%, height 100%로 하는 건 왜 안되냐면, 그 땐 마진으로 조절할 수 없기 때문에 일일이 0으로 설정한다고 합니다.

style.css

.title {
        text-align: center;
        color: deeppink;
        font-size: 80px;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
        padding: 50px 0;
        position: relative;
}
​
.title:after {
        content: ' ';
        background-color: bisque;
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 70px;
        bottom: 60px;
        border-radius: 10px;
        opacity: 0.2;
        height: 30px;
}

위에서 한 것 처럼 앨범에 붙는 숫자들도 가상요소로 나타낼 수 있습니다.

앨범과, 앨범 컨텐츠 둘 중 어느 곳에서 가상요소를 추가하든 상관없지만, 앨범에 추가했습니다.

style.css

.album:before {
        content: '1';
        font-size: 50px;
        padding: 5px;
        margin: 0 10px;
        width: 1em;
        text-align: right;
        font-weight: bold;
        font-style: italic;
        float: left;
}

float 는 'float를 주면 뒤 따라오는(여기서는 앨범 컨텐츠)와 섞인다.' 는 개념입니다.

숫자가 증가되게끔 하려면 가상요소중 신박한 방법을 사용하면 됩니다.

부모인 chart가 <ol>, 자식인 chat-item 이 <li> 이죠 이 때, chart-item에게 counter-increment라는 속성이 있습니다. 임의의 텍스트로 이름을 지정해두고, 필요한 곳(여기서는 album:before)에 같은 이름을 쓰게 되면 적용됩니다.

style.css

.chart-item {
        background-color: white;
        margin: 60px;
        height: 80px;
        position: relative;
        counter-increment: rank;
}
​
.album:before {
        content: counter(rank);
        font-size: 50px;
        padding: 5px;
        margin: 0 10px;
        width: 1em;
        text-align: right;
        font-weight: bold;
        font-style: italic;
        float: left;
}

이런 것들이 정확하게 <ol> 태그 안에서만 돌아가게 하기 위하여 chart에도 counter-reset 을 지정해주었습니다. counter-reset을 지정함으로써 다른 곳에서 counter 속성을 썼을 때 1부터 다시 시작할 수 있습니다.

style.css

.chart {
        background-color: #aaa;
        overflow: hidden;
        counter-reset: rank;
}

마지막! CD 돌아가는 부분

cd 이미지를 앨범사진 뒤에 넣어보겠습니다.

<img class="album-cover" src="images/cover01.png">
                        <img class="albumm-disc" src="images/disc.png">
<div class="album-contents">
                                <h2>Truth Hurts</h2>
                                <p>Risso</p>
                        </div>

ㅋㅋㅋ!! cd가 굉장히 큽니다. 이제 옮길건데 이건 float로 할 수 없습니다. 왜냐하면 이미지와 시디는 같은 선상에 겹치게끔 두는게 목표이므로..! 어쩔 수 없이 무조건 앱솔루트로 지정해야합니다.

style.css

.album-disc {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
}

이렇게하면 cd의 크기가 작아지는 것을 확인할 수 있습니다.

이제 돌아가는 부분 구현해보겠습니다.

먼저 @keyframe 을 활용하여 빙글빙글 돌아가는 애니메이션을 만들고 album-disc에 적용시킵니다.

style.css

@keyframes spin {
        100% {
              transform: rotate(360deg);
        }
}
​
.album-disc {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        animation: spin .5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        transition: right .5s;
}

적용시키는 방법은 간단하게 애니메이션 이름을 지정해주면 됩니다. 그리고 0.5초동안 지속됩니다. 앨범이 계속해서 돌아가게끔 animation-iteration-count 에 무한대 값을 주었고, 돌아가는 속도를 일정하게 맞추기 위해서 animation-timing-function에 linear 라는 값을 줬습니다.

그런데 우리는 디스크와 이러한 애니메이션이 앨범에 마우스를 올렸을 때만 등장하게끔 하고 싶습니다. 그러기 위해서는 앨범이 hover됐을 당시 하위에 있는 album-disc 에게 속성을 추가해야합니다.

style.css

.album-disc {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        animation: spin .5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    transition-delay: 1s;
        transition: right .5s;
}
​
.album:hover .album-disc {
        right: 70px;
}

또한 앨범이 너무 갑자기 등장하니까 천천히 등장하게끔 transition 속성을 album-disc에 추가하고, 마우스 오버되고나서 디스크가 등장했으면 좋겠어서 album-disc에 transition-delay 속성을 추가했습니다.

그런데 이것의 문제는 마우스를 앨범위에 두지 않았을 때, 아웃될 때도 딜레이가 존재한다는 것입니다.

그래서 마우스를 앨범에서부터 떼면 바로 cd가 들어가게끔transition-delay 를 hover됐을 때만 주었습니다.

style.css

.album-disc {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        animation: spin .5s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        transition: right .5s;
}
​
.album:hover .album-disc {
       right: 70px;
    transition-delay: 1s;
}

이제 앨범 설명부분입니다.

앨범 내용을 썼던것과 같이 readme.md 더미데이터에 있는 내용을 복사하여 가수 이름 아래에 p태그로 넣어줍니다.

index.html

<li class="chart-item">
                        <div class="album">
                                <img class="album-cover" src="images/cover01.png">
                                <img class="album-disc" src="images/disc.png">
                                <div class="album-contents">
                                        <h2>Truth Hurts</h2>
                                        <p>Risso</p>
                                        <p class="album-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
                                </div>
                        </div>
                </li>

앨범 내용은 마우스가 hover됐을 때만 보여야 합니다. 방법은 두 가지가 있습니다.

• 앨범에 overflow: hidden속성으로 넘치는 내용을 안보이도록 하고 margin-top을 줘서 내용을 내려 가리는 방법

• 확실하게 opacity 를 0으로 했다가 앨범에 hover가 됐을 당시의 album-description opacity를 1로 바꾼다. 이 때 자연스럽게 하기위해서 transition을 준다.

이 두 가지 방법을 다 써봤습니다.

style.css

.album-description {
        margin-top: 10px;
        opacity: 0;
        transition: opacity .5s;
}
​
.album:hover .album-description {
        transition-delay: .5s;
        opacity: 1;
}

disc가 1초 뒤에 나타나고, 설명이 0.5초 뒤에 나타나게 album-description에도 transition-delay를 주었습니다.

추가로 앨범이 hover됐을 당시 숫자의 색깔이 변했으면 좋겠다.

그러면 아래와 같이 작성할 수 있다. 앨범이 hover 됐을 당시 가상클래스(:before)의 색상이 변경된다.

style.css

.album:hover:before {
        color: pink;
}

또한 앨범이 커질 때 그림자를 넣어준다.

style.css

.album:hover {
        background-color: white;
        margin: -30px;
        box-shadow: 0 0 40px rgba(0,0,0,0.4);
}

이렇게 모두 작성하고나면 맨 위에 있던 완성본과 같이 멋있게 움직이게 됩니다.

유튜브에 이전에 올라왔던 영상을 참고하여 그리드 같은 것들을 적용시킬 수도 있다고 합니다. 배워보겠습니다..!