web) video 태그를 사용하여 표현한 4계절

완성된 웹페이지의 모습

 

오전에 video 태그에 대해 공부하였고, 해당 태그로 동적이고 아름다운 웹페이지를 만들면 재미있겠다는 생각이 들었다.

현재 계절이 겨울이다보니 주제를 겨울로 정하고 만들어보다가 한 페이지 안에 4계절을 모두 표현하면

아름다울것 같아서 봄, 여름, 가을, 겨울 리스트를 만들어보았다.

리스트는 hover하면 계절에 맞게 색깔이 바뀌는 링크인데,

봄은 빨간색/여름은 초록색/가을은 노란색/겨울은 파란색으로 변경된다.

하지만 생각보다 자연스럽지 않고 디자인적인 부분이 뭔가 아쉬웠다.

 

웹페이지는

header / main / footer로 상,중,하를 나누었다.

header에는 동그란 썸네일이 들어가도록 했고,

아래에 간단한 문구와 리스트가 나온다.

main에는 column-count를 3을 줘서

아홉가지의 영상이미지가 3행 3열로 나열되도록 하였다.

footer는 뭔가를 작성할수도 있을것 같아서 일단 남겨두었다.

 

header

video 태그

    <header class="header">
        <div id="thumbnail">
            <video muted autoplay loop>
                <source src="winter-main.mp4" type="video/mp4">
            </video>

header의 첫번째에 위치하는 video태그이다.

autoplay로 자동재생되게 만들었고, loop로 해당 영상이 끝나도 처음으로 돌아가 반복된다.

영상은 모두 저작권이 없는 pixabay의 이미지를 가져왔다.

https://pixabay.com/ko/

비디오는 css를 사용하여 동그랗게 만들었다.

border-radius를 100%로 주고

width와 height 값을 둘다 500px로 하여 가로와 세로의 길이가 똑같은 동그란 모양을 만들었고,

video를 포함하고 있는 겉부분인 thumbnail의 테두리 부분도 동그랗게 만들고 10px의 굵기를 주었다.

여기서 display를 inline-block으로 해야 video를 감싸는 형태가 된다.

        .header #thumbnail {
            border: 10px solid rgba(255, 255, 255, 0.8);
            border-radius: 100%;
            display: inline-block;
        }
        .header #thumbnail video {
            background-color: black;
            width: 500px;
            height: 500px;
            border-radius: 100%;
        }

텍스트와 리스트

썸네일의 아래에 위치하는 텍스트를 만들어보았다.

h1태그는 font-weight로 굵기를 얇게 만들었으며, font-size는 3rem으로 크기를 키웠다.

각 계절에 해당하는 텍스트는 strong으로 지정하여 해당 텍스트에 마우스를 hover하면 크기가 4rem이 되도록 하였고

border-bottom으로 밑줄을 dotted 형식으로 그어 디자인적인 요소를 추가하였다.

글꼴은 구글 폰트의 font-family: 'Island Moments', cursive; 를 사용하였다.

        .header h1 {
            color: rgba(255, 255, 255, 0.8);
            font-weight: 200;
            font-size: 3rem;
        }
        .header h1 strong {
            color: rgba(255, 255, 255, 0.8);
            font-weight: 200;
            border-bottom: 1px dotted rgba(255, 255, 255, 0.8);
        }
        .header h1 strong:hover {
            color: white;
            font-size: 4rem;
        }

 

헤더의 마지막에는 리스트가 온다.

봄,여름,가을,겨울을 나타내는 페이지를 리스트로 만들어 ul 태그로 묶고,

리스트 안에는 a태그를 포함하여 페이지를 클릭하면 연결되도록 링크로 구성하였다.

리스트는 display를 inline-block으로 하여 가로로 나열되게 만들고

width와 height를 100px씩 줘서 리스트간 간격을 띄우도록 했다.

이런식으로 간격을 만들었다.

a태그는 border-radius를 100%로 주고 width와 height를 20px로 설정하여 작은 동그라미로 만들었으며,

마우스를 hover하면 각 계절에 맞는 색으로 변경되도록 하였다.

        /* list  */
        .header ul {
            padding-top: 30px;
            /* display: inline-block; */
        }
        .header li {
            display: inline-block;
            width: 100px;
            height: 100px;
        }
        .header a {
            display: block;
            width: 20px;
            height: 20px;
            text-decoration: none;
            border-radius: 100%;
            background-color: rgba(255, 255, 255, 0.8);
        }

        .header #spring:hover {
            background-color: rgba(255, 0, 0, 0.5);
        }
        .header #summer:hover {
            background-color: rgba(0, 255, 0, 0.5);
        }
        .header #fall:hover {
            background-color: rgba(255, 255, 0, 0.5);
        }
        .header #winter:hover {
            background-color: rgba(0, 0, 255, 0.5);
        }​

이렇게 헤더부분을 완성하였다.

 

main

main 부분에는 video 태그를 사용한 3가지 영상을 3행 3열 총 9개로 표현하였다.
column-count를 3으로 줘서 3행으로 영상들이 위치하게 만들고
video 태그에는 width를 100%로 하여 영상이 잘리는 부분 없이 웹페이지에 드러날 수 있도록 하였다.
완전 직사각형의 간격이 없는 모양도 잘 정돈된 느낌이라 예쁘지만
border-radius를 20px주고 column-gap을 10px 줘서 약간 떨어진 각이 없는 모양으로 만들었다.

        .main #columns{
            column-count: 3;
            column-gap: 10px;
        }
        .main #columns video {
            border-radius: 20px;
            width: 100%;
        }​

 

 

개발을 하면서 디자인적인 요소에 대해 많은 생각을 해보게 되었다.

열심히 만들고 싶어 잡다한 기능들을 추가하면 오히려 페이지의 아름다움이 훼손되었고

깔끔하고 단순하게 만든 것이 더 아름답게 느껴졌다.

그래서 디자인이라는 것은 추가하는 것이 아닌 조화가 중요하다는 것을 깨달았다.