CSS 기초 - 인터랙티브

Posted on

두 번째 시간…이번에는 trasform, transition 등으로 동적으로 움직이는 기능을 구현해보자. 또 flex라는 것을 이용해 자식 요소의 배치 방법을 지정해보자. 이 글은 Do it! 인터랙티브 웹 페이지 만들기 책을 읽고 공부한 내용입니다.

transform을 배워보자


<body>
<section>
    <article></article>
</section>
<section>
    <article></article>
</section>
<section>
    <article></article>
</section>
<section>
    <article></article>
</section>
</body>

section을 4개 만들고 자식태그로 article을 넣어보자.

section {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 50px;
}

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;
}

section:nth-of-type(1) article {
    transform: scale(1.3);
}

section:nth-of-type(2) article {
    transform: skewX(20deg);
}

section:nth-of-type(3) article {
    transform: translateY(50px);
}

section:nth-of-type(4) article {
    transform: rotate(45deg);
}

0

딱 봐도 효과는 알 수 있다. 각각 확대 또는 축소, 기울기, 이동, 회전이 적용된다.

이젠 사용자 행동에 반응하도록 만들어보자!! transition을 사용하면 된다.

transition - 가장 재미있단다

<body>
<section>
    <article></article>
</section>
</body>

section {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    float: left;
    margin: 50px;
    perspective: 800px;
}
.section::after {
    content: '';
    display: block;
    clear: both;
}

section article {
    width: 100%;
    height: 100%;
    background: blue;
    opacity: 0.3;
    transform: rotateY(10deg);  # 시작 각도 (아무것도 안했을 때)
    transition-property: transform opacity;
    transition-duration: .3s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(.8, -0.1, .58, 1.39);
}
article:hover {
    transform: rotateY(60deg);
    background: red;
}

0

0

마우스를 올려놓으면 0.3초 안에, 딜레이 없이 바로, 10도에서 시작해 60도까지 Y축으로 회전하며, 가속도는 transition-timing-function에 입력한대로 회전한다. perspective를 설정하니 800px만큼 멀리서 보는 것처럼 약간 회전해있다.

cubic-bezier는 쉽게 만들어주는 사이트에서 참고하면 된다고 한다. –> cubic-bezier.com

화면 너비에 따라 웹페이지 디자인 변경하기

미디어 쿼리를 이용하면 웹 브라우저의 너비를 인식하여 css를 다르게 설정할 수 있다. 예를 들어 너비가 1000px일 때 실행할 css는 다음과 같다.

@media screen and (max-width: 1000px){
    실행할 css
}

웹브라우저의 폭이 0~1000px일 때 실행할 css 구문을 우선 적용한다.

예시를 살펴보자.

<body>
    <article></article>
</body>

article{
    width: 200px;
    height: 200px;
    background: pink;
    margin: 100px auto;
}

이 상태에서는 다음과 같이 정가운데에 200 X 200의 핑크 사각형이 위치해있다.

0

이제 미디어 쿼리를 적용해보자. 웹브라우저 너비가 900px 이하일 때 article 요소의 배경색을 orange로 입력해보자.

@media screen and (max-width: 900px){
    article{
        background: orange;
    }
}

이렇게 하면 이전 article이 핑크색이었더라도 미디어 쿼리의 최대 너비인 max-width값을 900px로 지정했으므로 이 구간에서는 핑크를 무시하고 orange를 우선 적용한다.

0

너비를 900 이하로 바꾸니 오랜지색으로 변경되었다. 400 이하일 땐 aqua로 바꿀 수도 있을 것이다.

flex

display - 자식 요소의 배치 방법 지정

원래 float은 레이아웃이 아닌 텍스트와 이미지를 좌우로 배치하기 위해 사용한다. 과거에는 float을 많이 사용했지만 HTML5부터 flex 방식으로 편하게 레이아웃을 배치할 수 있다고 한다.

<body>
    <main>
        <section>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
            <article></article>
        </section>
    </main>
</body>

* {
    margin: 0px;
    padding: 0px;
}
main {
    width: 100%;
    height: 100vh;
    background: lightcyan;
}
section {
    border: 10px solid blue;
}
section article{
    width: 100px;
    height: 100px;
    background: aqua;
    border: 1px solid #000;
}

0

main은 body를 꽉 채우는 영역이 된다. section은 자식을 감싸고 있고, 각 article은 100 X 100의 사각형 영역이 된다. 이제 부모인 section에 flex를 적용해보자.

section {
    border: 10px solid blue;
    display: flex;
}

0

display: flex는 자신의 블록 속성을 유지하면서 자식 요소에 flex 환경을 설정해준다. 자식들인 article이 가로로 배치되었다. 이 때 부모인 section도 그대로 블록 요소 특징을 유지하므로 너빗값이 100%로 유지된다.

이번에는 inline-flex로 바꿔보자.

0

inline-flex는 자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경을 설정한다. 그래서 section이 인라인 속성으로 변경되어 자식 요소의 전체 너빗값만큼 크기가 달라진다.

flex-direction

section {
    border: 10px solid blue;
    display: inline-flex;
    flex-direction: column;
}

0

flex-direction으로 정렬 방향을 설정할 수 있다. 설정하지 않으면 기본 값은 row(가로)로 설정되고 column을 사용하면 세로로 정렬된다.

flex-wrap : 자식에 줄바꿈 적용

float을 사용했을 때는 자식의 너빗값 합이 부모의 너빗값을 넘어가면 자동으로 줄바꿈 됐었다. 하지만 flex는 flex-wrap을 설정해야 줄바꿈을 할 수 있다.

section {
    width: 100%;
    border: 10px solid blue;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
}

0

box-sizing: border-box는 안쪽여백(padding)에서 나왔었는데, 그냥 padding을 쓰면 전체 박스 크기가 커지지만 원래 크기로 유지하고 안쪽 여백을 추가할 때 썼었다.

암튼 이대로 브라우저 창을 줄이면 같은 비율로 줄어든다. flex-wrap을 추가해보자.

section {
    width: 100%;
    border: 10px solid blue;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

0

자식요소인 article의 너빗값이 그대로 유지되면서 줄바꿈된다.

flex-flow : flex-direction, flex-wrap 한꺼번에 적용

flex-flow를 사용하면 flex-direction, flex-wrap 속성을 한번에 적용할 수 있다.

section {
    width: 100%;
    border: 10px solid blue;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
}

자식요소 정렬하기

flex의 핵심 기능은 자식 요소를 어떻게 정렬하는가이다. 자식요소는 justify-content나 align-content, align-items 속성을 사용해 정렬할 수 있다.

justify-content

section {
    width: 100%;
    height: 100%;
    border: 10px solid blue;
    box-sizing: border-box;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

0

flex-start는 justify-content의 기본 값이다. 가장 위쪽 article 탭이 가장 왼쪽부터 시작한다. flex-end로 설정해보자.

0

종료 방향인 오른쪽으로 정렬된다. center로 해보자.

0

가운데로 정렬된다.