6. CSS3 레이아웃과 애니메이션

레이아웃의 기초

 블록 요소와 인라인 요소

  HTML요소는 블록 요소이거나 인라인 요소 중의 하나에 속한다. 일반적인 문서의 흐름에서 HTML요소는 블록 요소냐

  인라인 요소냐에 따라서 다음과 같이 화면에 표시된다.

  + 블록 요소: 화면의 한 줄을 전부 차지한다.

  + 인라인 요소: 한 줄에 차례대로 배치된다. 현재 줄에서 필요한 만큼의 너비만을 차지한다.

  블록 요소

  블록 요소는 브라우저의 한 줄을 모두 차지한다. 예를 들어 <h1>, <p>, <ul>, <li> 등이 있다.

  즉 한줄에 하나씩 배치 된다. 

  인라인 요소

  인라인 요소는 정상적으로는 한 줄 안에 차례대로 배치된다. 예를 들어 <a>, <img>, <strong>, <br> 등이 있다.

 블록 요소와 인라인 요소의 혼합

  일반적이 웹 페이지에는 블록 요소와 인라인 요소가 혼합되어 있다. 이 경우에는 블록 요소가 나타날 때까지 인라인

  요소는 같은 줄에 배치된다. 블록 요소가 나타나면 줄이 분리되고 블록 요소는 새로운 줄에 배치된다.

 CSS를 display 속성 변경하기

  비록 HTML 요소가 자동적으로 블록 요소와 인라인 요소로 나누어지지만 이 속성은 얼마든지 CSS 코드를 통하여 변경

  될 수 있다. display를 block으로 설정하면 블록 요소처럼 배치되고 inline으로 설정하면 인라인 요소처럼 배치된다.

div {display; inline;}

  이것은 페이지의 레이아웃을 작성할 때 아주 유용하게 사용된다. 즉 필요에 따라서 요소를 블록요소 또는 인라인

  요소로 만들 수 있는 것이다.

 요소 위치 정하기

  기본적으로 요소의 위치는 top, bottom, left, right 속성으로 지정한다.

#target {top; 100px; left: 200px;}

  CSS에는 기본적으로 4가지의 위치 설정 방법이 존재한다.

  + 정적 위치 설정: 정상적인 흐름에 따른 배치이다.

  + 상대 위치 설정: 정상적인 위치가 기준점이 된다.

  + 절대 위치 설정: 컨테이너의 원점이 기준점이 된다.

  + 고정 위치 설정: 윈도우의 원점이 기준점이 된다.

 정적 위치 설정

  정적 위치 설정이란 블록 요소는 박스처럼 상하로 쌓이게 되고 인라인 요소는 한줄에 차례대로 배치된다.

  정적 위치 설정을 사용하면 요소의 위치는 top, bottom, left, rigth 속성의 영향을 받지 않는다.

 상대 위치 설정

  상대 위치에서 주의할 점은 요소의 정상적인 위치에 대하여 상대적이라는 점이다. 상대 위치로 설정된 요소는

  다른 요소 위에 겹쳐지거나 이동될 수 있다. 하지만 요소를 위해 할당된 정상적인 공간은 없어지지 않는다.

 절대 위치 설정

  절대 위치는 페이지의 시작 위치에서 top, bottom, left, right 만큼 떨어진 위치에 배치된다.

  절대 위치로 설정된 요소는 문서의 정상적인 흐름에서 제거되고 페이지 안의 고정된 위치에 표시된다.

  만약 컨테이너가 있었다면 컨테이너에 상대적으로 배치된다. 즉 컨테이너의 시작 위치로부터 top, bottom, left, right

  만큼 떨어진 위치에 배치된다. 컨테이너는 일반적으로 relative로 선언되어야 한다. static으로 선언되면 안된다.

 고정 위치 설정

  고정 위치란 브라우저 윈도우에 상대적으로 요소의 위치를 잡는것이다. 만약 윈도우가 스크롤된다고 하여도 화면에서

  요소는 움직이지 않는다. 인터넷 서핑중에 페이지를 스트롤하여도 계속해서 같은 위치에서 표시되면서 귀찮게 하는

  쪽지가 바로 고정 위치 설정을 한 것이다.

  절대 위치는 컨테이너에서 고정된 위치에 배치된다. 하지만 고정 위치는 현재 윈도우에서 고정된 위치에 배치된다.

 float 속성

  float 속성은 요소의 위치를 잡을 때, 아주 중요한 역할을 하는 스타일 속성이다.

  이미지를 하면 오른쪽이나 왼쪽에 띄울때 유용한 속성이다. 

  float 속성으로는 요소를 컨테이너의 왼쪽이나 오른쪽으로만 배치 될 수 있다. 위쪽이나 아래쪽으로 할 수는 없다.

 float를 여러번 적용할 경우

  첫번째 요소의 float 속성과 두번째 요소의 float 속성을 둘다 left로 하면 화면에 여유가 있는 경우 이전 요소에 이어서

  두 번째 요소가 왼쪽으로 배치된다.

 float는 어디에 이용되는가?

  float는 웹 페이지의 레이아웃을 잡을 때도 사용할 수 있다.

float 속성을 없애는 방법

 float와 불가분의 관계에 있는 속성이 clear이다. clear는 float의 흐름을 제거하는 속성이다.

#footer {
	clear: both;
}

 z-index

  요소가 정상적인 흐름에서 벗어나서 배치되는 경우에 흔히 겹침이 발생한다. z-index 속성은 요소의 스택 순서를 지정

  한다. 요소는 양수 혹은 음수의 스택 순서를 가질 수 있다. z-index는 요소가 겹쳐지는 순서를 제어할때 사용한다.

  z-index값이 큰 요소가 앞에 놓이게 된다. 여기서 주의해야 할 점은 z-index는 요소의 position속성이 absolute나 fixed

  로 설정 되어 있어야 작동한다는 점이다.

 요소의 크기 설정

  요소의 크기는 width와 height 속성으로 결정된다. 만약 개방자가 요소의 width와 height를 명확하게 설정하지 않으면

  브라우저가 요소 안의 콘텐츠 크기를 계산해서 요소의 크기를 결정한다.

  + width, height: 요소의 크기

  + min-width, min-height: 요소의 최소 크기

  + max-width, max-height: 요소의 최대 크기

 overflow 속성

  overflow 속성은 자식 요소가 부모 요소의 범위를 벗어났을 때, 어떻게 처리할 것인지를 지정한다. overflow속성에는

  hidden, scroll 중의 하나를 지정할 수 있다.

  + hidden: 부모 영역을 벗어나는 부분을 보이지 않게 한다.

  + scroll: 부모 영역을 벗어나는 부분을 스크롤할 수 있도록 한다.

  + auto: 자동으로 스크롤바가 나타난다.

<div> 요소를 이용한 레이아웃

  + <table> 요소를 사용하는 레이아웃: 가장 전통적인 방법이고 편리한 방법이지만 원래 용도와는 어긋난다.

  + <div> 요소를 사용한 레이아웃: <div> 요소를 생성하고 요소의 위치를 지정해서 레이아웃을 만드는 방법이다.

                                             현재 가장 널리 사용되고 있다. <div>는 블록 수준의 요소로서 다른 요소를 그룹핑

                                             하는데 사용된다. CSS를 사용해 요소의 위치를 잡고 배경이나 색상을 지정한다.

  + HTML5의 <nav>, <section>, <aside> 등의 시맨틱 요소를 사용한 레이아웃:

     최근에 HTML에서 추가된 여러 가지 시맨틱 요소를 이용하여 레이아웃을 잡는 방법이 시도되고 있다.

     이것이 근본적으로는 div요소와 유일한 방법이라고 할 수 있다.

  레이아웃 템플레이트를 제공하는 사이트

의미적 요소를 이용한 레이아웃

  의미적 요소는 브라우저에게 요소의 의미나 목적을 명확하게 알려주는 요소이다.

 시멘틱 요소

  W3C는 많은 수의 웹 페이지를 분석해서 개발자가 많이 사용하고 있는 아이디와 클래스 이름을 추출해 이것을 표준

  태그로 만들었다.

  요소에 display:table과 display-cell 속성을 지정하면 화면에 가상 테이블을 작성할 수 있다. 즉 테이블을 사용해

  레이아웃을 작성하는 것이다. 이 방법의 장점은 다음과 같다.

  + 테이블 형태로 레이아웃하는 데 float나 절대 위치 설정이 필요하지 않다.

  + 컬럼의 높이가 달라도 문제가 발생하지 않는다.

  + IE8+ 버전과 FireFox, Crome, Safari, Ofera가 모두 지원한다.

  + CSS코딩이 간결해진다.

  하지만 단점도 존재하는데 가장 큰 단점은 소스에 적힌 순서대로 테이블의 셀이 생성된다는 점이다.

 효과

  CSS3에는 많은 효과가 포함되어 있다. 가장 대표적인 것만을 살펴본다.

 투명도

  opacity 속성을 이용하면 요소의 투명도를 조절할 수 있다. 투명도는 실수 0.0에서 1.0을 사용해서 지정한다.

  0.0이면 완전한 투명한 것이고 1.0이면 불투명한 것이다.

  이미지를 대상으로 사용된다. 

 가시성

  가시성이란 어떤 요소를 보이거나 안 보이게 하는 것이다. 속성으로는 visibility가 사용된다.

  + hidden: 요소를 보이지 않게 한다.

  + visible(기본값): 요소를 보이게 한다.

  비슷한 것으로 display:none; 이 있다. 하지만 display:none으로 설정하면 화면에서 자리도 차지하지 않고 완전히 제외

  된다. 따라서 일시적으로 어떤 요소를 보이지 않게 하려면 visibility 또는 display중에서 하나를 골라서 사요하면 된다.

 전환

  CSS3를 사용하면 하나의 형태에서 다른 형태로 변환하는 효과를 추가할 수 있다. 예전에는 플래시나 자바스크립트를 

  사용해야 얻을수 있었던 효과를 CSS3에서 쉽게 지정이 가능하다. 이것을 전환이라고 한다. 전환은 요소가 하나의

  스타일에서 다른 스타일로 점진적으로 변화되는 것이다.

  전환을 지정하기 위해서는 다음과 같은 2가지를 지정해야 한다.

  + 효과를 추가하고 싶은 CSS속성을 지정한다.

  + 효과의 지속 시간을 지정한다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height: 50px;
                border: 1px solid black;
                background: yellow;
                transition: width 5s; 
                /* <div> 요소의 width가 변경되면 5초에 걸쳐서 서서히 변화도록 전환 효과를 준다.*/
            }
            div:hover {
                width: 200px; /* 마우스가 위에 오면 크기를 200px로 한다.*/
            }
        </style>
    </head>
    <body>
        <div>
            마우스를 올려보세요.
        </div>
    </body>
</html>

  만약 지속 시간이 지정되지 않으면 0으로 간주되기 때문에 전환 효과가 발생되지 않는다.

 다중 전환

  앞에서는 크기만 전환하였지만 뭐든지 전환 효과를 줄 수 있다. 이번에는 너비, 길이, 회전 등의 변환에 전환 효과를

  주어보자.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height: 50px;
                border: 1px solid black;
                background: yellow;
                transition: width 5s border 5s, transform 5s;
                -webkit-transition: width 5s, height 5s, border 5s, -webkit-transform 5s;
                /* 호버링 시에 너비와 높이가 변환하고 회전되는 변환에 전환 효과를 준다.*/
            }
            div:hover {
                width: 200px;
                height: 100px;
                border: 10px solid red;
                transform: rotate(360deg);
                -webkit-transform: rotate(360deg);
            } /*호버링 시에 너비와 높이가 변환하고 회전한다.*/
        </style>
    </head>
    <body>
        <div>
            마우스를 올려보세요.
        </div>
    </body>
</html>

 CSS3 변환

  CSS3 변환 기능을 이용해 우리는 도형을 이동하고, 도형의 크기를 변환하며, 도형을 회전할 수 있다.     

  변환은 요소의 크기나 형태, 위치를 변환하는 효과이다. 요소는 2차원 또는 3차원으로 변환될 수 있다.

  변형함으로 CSS의 transform 속성을 사용하여 좌표 공간을 변형함으로써, 다른 요소에 영향을 미치지 않고 특정

  요소의 위치를 바꿀 수 있다. 여기에는 회전, 비틀기, 학대/ 축소, 평행 이동 등이 있다.

 평행 이동, 회전, 확대/ 축소

  먼저 평행 이동과 크기 변환, 회전하는 코드를 살펴보자.

  + translate(100px, 0px)은 (100, 0)만큼 평행 이동해서 박스를 그린다.

  + scale(1.2, 1.2)는 x방향으로 1.2배 확대, y방향으로 1.2배 확대해서 그린다.

  + rotate(30deg)는 30도만큼 박스를 회전해서 그린다.

  기준 위치는 박스의 정상적이 위치가 된다. 즉 박스가 정상적으로 배치되었을 때의 위치가 기준 위치가 된다.

비틀기 변환

  비틀기 변환은 x방향과 y 방향으로 박스를 비틀어서 그리는 변환이다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 50px;
                height: 50px;
                background-color: yellow;
                border: 1px solid black;
                test-align: center;
            }
                div#box2 {
                    transform: translate(100px, 0px);
                    background-color: blue;
                }
                div#box3 {
                    transform: scale(1.2, 1.2);
                    background-color: red;
                }
                div#box4 {
                    transform: rotate(30deg);
                    background-color: green;
                }
                div#box5 {
                    transform: skew(30deg, 20deg);
                    background-color: lightgreen;
                }
        </style>
    </head>
    <body>
        <div id = "box1"> box1</div>
        <div id = "box2"> box2</div>
        <div id = "box3"> box3</div>
        <div id = "box4"> box4</div>
        <div id = "box5"> box5</div>
    </body>
</html>

 복합 변환

  하나의 요소에 여러 가지 변환이 차례대로 적용될 수도 있다. 예를 들면 다음과 같이 자정할 수 있다.

div {
	heigh: 100px; width: 100px;
	transform: translate(80px, 80px) csale(1.5, 1.5) rotate(45deg);
}

 matrix()

  matrix() 메서드는 모든 2차원 변환을 하나로 결합한다. matrix() 메서드는 6개의 매개 변수를 가진다. 이는 rotate,

  scale, translate, skew를 나타낸다. 2D 변환을 값 6개로 이루어진 변환 행렬에 저장한다.

  matrix(a,b,c,d,e,f)는 변환 행렬 [a,b,c,d,e,f]에 해당한다.

div#box2 {
	transform: matrix(0.9, 0.5, -0.5, 0.9, 0, 0);
	background-color: blue;
}

CSS3 3차원 변환

  CSS3에는 3차원 변환 효과를 줄 수 있는 여러 가지 속성들과 메서드를 제공한다.

  3차원 변환은 이해하기 쉽지 않다. 이곳을 누르면 파라미터를 조절하면서 CSS소스를 동적으로 생성할 수 있다.

  익스플로러에서만 실행되며, 다른 브라우저에서 실행하려면 앞에 -moz-와 같은 벤더 접두사를 붙여야 한다.

CSS3 애니메이션

  CSS3 변환을 이용하면 어느 정도 애니메이션의 효과를 낼 수 있다. 하지만 변환에서는 개발자가 중간 단계의

  프레임에 대해서는 제어를 할 수 없다. 여기서는 정의된 애니메이션을 소개한다. 이 기능을 사용하면 개발자가

  키프레임을 이용해 CSS특성값의 변화를 지정할 수 있다. 키프렝미이란 애니메이션 중간 중간에 객체의 위치와 크기를

  지정해주는 프레임이다.

 @keyframes

  먼저 @keyframes를 이용해 키프레임을 지정한다. 키프레임의 위치는 퍼센트로 지정하며 각 키프레임에서 속성의 값을

  지정하면 된다.

  @keyframes 규칙 안에서 CSS 스타일을 지정하면 애니메이션은 현재의 스타일에서 새로운 스타일로 점진적으로 변화

  하게 된다. 스타일의 개수는 원하는 만큼 변경할 수 있고 또 횟수도 지정할 수 있다.

  키프레임은 퍼센트 단위로 지정한다. 아니면 "from"과 "to" 를 사용할 수도 있다. 0%는 "from"과 같고 100%는 "to"와 

  같다. 0%는 애니메이션으 시작이고 100%는 애니메이션의 종료점이다.

<!DOCTYPE html>
<html>
    <head>
        <style>
            div {
                width: 100px;
                height: 100px;
                background: red;
                position: relative;
                animation: 1s myanim;
                animation-iteration-count: 10;
            }
        @keyframes myanim
        {
            0% {left: 0px; top: 0px;}
            25% {left: 100px; top: 0px;}
            50% {left: 200px; top: 0px;}
            75%  {left: 100px; top: 0px;}
            100% {left: 0px; top: 0px;}
        }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

 튀어오르는 공 애니메이션

  CSS3를 사용하면 요소에 애니메이션을 적용할때, 속도 효과를 지정할 수 있다. 

  + ease-out: 움직임이 멈출 때 끝에 이르러 변화의 정도가 서서히 감소하는것

  + ease-in: 천천히 시작하는 것

  자바스크립트를 사용하면 아주 쉽게 그릴 수 있지만 여기서는 CSS만을 이용해 보자.

<!DOCTYPE html>
<html>
    <head>
        <style>
            @-webkit-keyframes bounce{
                from, to {
                    bottom: 0px;
                    -webkit-animation-timing-function: ease-out;
                } /*ease-out은 움직임이 멈출 때 끝에 이르러 변화의 정도가 서서히 감소하는 것이다.
                     공의 위치는 바닥이 된다.*/
                50% {
                    bottom: 200px;
                    -webkit-animation-timing-function: ease-in;
                } /* ease-in은 천천히 시작하는 것
                     동의 위치는 바닥에서 200px이 된다.*/
            }
            #ball {
                position: absolute;
                width: 20px;
                height: 20px;
                background: red;
                border-radius: 10px;
                /*원처럼 보이게끔 경계선을 둥글게 한다.*/
                -webkit-animation-name: bounce;
                -webkit-animation-iteration-count: infinite;
                -webkit-animation-duration: 5s;
            }
        </style>
    </head>
    <body>
        <div id= "ball"> </div>
    </body>
</html>