html, css-(8)

MinGeo·2022년 7월 9일

html,css

목록 보기

8/9

오늘의 주제

오늘은 반응형 레이아웃 만들기와 css에서 구현할 수 있는 간단한 애니메이션을 구현해 보자.

반응형 레이아웃 만들기

데스크탑 컴퓨터로만 웹페이지에 접속하는 옛 시대와 다르게, 요새는 스마트폰 태블릿등 다양한 기기로 웹페이지를 이용한다. 그럼 화면 크기에 따라 웹사이트의 크기나 스타일도 달라져야 한다. 오늘은 css에서 화면 크기에 따라 style을 다르게 적용하 는 방법에 대해서 알아보겠다.

반응형 웹을 만들 때 head 태그에 추가해야 할 것

반응형 웹을 만들려면, head 태그에 다음과 같이 추가해주어야한다. vsc에서 제공하는 기본 html 틀에는 들어가 있지만, 혹시 없다면 반드시 추가해 주자.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

앞서 head 태그에 들어가는 메타 정보에서 언급했던 내용이다.

media query

이제 반응형 레이아웃을 만들어 볼텐데, 일단 코드를 보면서 얘기해보도록 하자.

@media screen and (max-width: 768px) {
    .box {
        text-align: center;
        margin: 10px;
        width: 100%;
    }
}

이 query를 css파일 가장 아래에 작성해주어야 한다.
코드를 말로 풀어서 얘기해보자면 브라우저 폭이 768px보다 작으면 box class의 html 요소의 글자를 가운데 정렬하고, margin은 10px 주고 width는 100%로 한다는 뜻이다. 768px보다 작아질때 달라지는 style을 안에다가 작성해 주면 된다. 이 query를 가장 아래에 작성해주는 이유는, 기존 상태에서 사이즈가 달라진 경우 class를 하나 추가해주는 개념이라 위에 작성한다면 기존 상태의 css style이 적용되지 않을 것이다.

breakpoint

기본적으로 우리는 컴퓨터, 태블릿, 모바일 이렇게 3개의 기기에서 볼텐데 가장 대표적으로 사용하는 사이즈는
1200px/992px/768px/576px이다.

간단한 애니메이션 구현하기

여기서는 정말 간단하게 one-way 애니메이션에 대해서만 다뤄볼 것이다. 만드는 과정은 다음과 같다.

시작스타일 정하기

최종스타일 정하기

언제 최종스타일로 변할지 트리거 주기

transition으로 서서히 동작하게 만들기

일단 시작스타일이란, 애니메이션 발생하기 전의 가장 기본적인 상태를 말한다.
그리고 애니메이션 발생 후 어떤 모습을 하고 있을지를 나타내는 최종스타일을 정한다.
다음으로는 어떤 상황에 최종스타일로 변할지 인데, 버튼 누르기 마우스 올려 두기 등 다양한 것이 존재한다.
마지막으로 시작스타일에서 최종스타일로 변하는 시간과 어떻게 변할지를 transition을 통해 구현해주면 된다.

이번에는 간단하게 신발 아이콘에 마우스를 올리면, 아래에서 가격을 나타내는 회색 창이 반정도 올라오는 애니메이션을 구현해보았다.

html code : homework4.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="css/homework4.css" rel = "stylesheet">
</head>
<body>
    <div class="shop-bg">
        <div class = "shop-container">
            <div class="shop-item">
                <div style="position: relative">
                    <div class="wrap">
                        <div class="overlay">
                            <h1>60$</h1>
                            <p>인기상품</p>
                        </div>
                    </div>
                    <img src="product1.jpeg">
                </div>
            </div>
            <div class="shop-item">
                <div>
                    <img src="product1.jpeg">
                </div>
            </div>
            <div class="shop-item">
                <div>
                    <img src="product1.jpeg">
                </div>
            </div>
        </div>
    </div>
    
</body>
</html>

css code: homework4.css

.shop-bg {
    background-color: #eee;
    padding: 20px;
}
.shop-container {
    display: flex;
    width: 90%;
    margin: auto;
}
.shop-item {
    width: 33%;
    padding: 10px;
    overflow: hidden;
}
.shop-item img {
    width: 100%;
    display:block;
}
.overlay {
    position: absolute;
    width:100%;
    height:100%;
    background-color: black;
    opacity: 0.5;
    top: 500px;
    color:white;
    transition: all 1s;
}
.shop-item:hover .overlay{
    top: 200px;
}

애니메이션 같은 경우 transition 속성 등 정말 다양한 것이 많다. 그래서 필요한 애니메이션이 있다면 그때 그때 찾아보고, 참고할 수 있다면 사용하는 것도 좋은 방법일 것 같다.