codeahn

반응형 웹 디자인을 구현하는 다른 방법은 '플렉스 박스(flex box)'를 이용한 플렉스 박스 레이아웃입니다. 미디어 쿼리를 사용해 반응형 레이아웃을 만들 때 CSS로 각 요소를 원하는 형태로 배치하려면 생각만큼 쉽지 않습니다.

플렉스 박스 레이아웃과 기본 속성들

플렉스 박스 레이아웃이란?

플렉스 박스 레이아웃(flex obx layout)이란 그리드 레이아웃을 기본으로 해 플렉스 박스를 원하는 위치에 배치하는 것입니다. 이 플렉스 박스를 이용하면 여유 공간에 따라 너비나 높이 위치를 자유롭게 변형할 수 있습니다. 따라서 화면 크기에 따라 레이아웃의 배치나 크기를 조절해야 편리하게 사용할 수 있습니다.

1. 플렉스 컨테이너(flex container) - 웹 문서에 텍스트나 이미지, 표 등 웹 요소들을 유연하게 사용하려면 먼저 플렉스 컨테이너로 묶어 주어야 합니다.

2. 플렉스 항목(flex item) - 플렉스 컨테이너에 담기는 웹 요소입니다. 위의 그림에서 1~6번 항목이 해당합니다.

3. 주축(main axis) - 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향입니다. 기본적으로 주축은 왼쪽에서 오른쪽으로 수평 방향으로 배치합니다. 주축에서 플렉스 항목이 배치되기 시작하는 지점을 '주축 시작점', 배치가 끝나는 지점을 '주축 끝점'이라고 합니다.

4. 교차축(cross axis) - 교차축은 주축과 교차되는 방향입니다. 기본적으로 위에서 아래로 배치합니다. 교차축에서 배치가 시작되는 지점을 '교차축 시작점' 배치가 끝나는 지점을 '교차축 끝점'이라고 합니다.

display 속성 - 플렉스 컨테이너 지정하기

플렉스 박스 레이아웃을 만들려면 먼저 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 합니다. 즉, 배치하려는 웹 요소들이 있다면 그 요소들을 감싸는 부모 요소를 만들고 그 부모요소를 플렉스 컨테이너로 만들어야 합니다. 이때 특정 요소가 플렉스 컨테이너로 동작하려면 display 속성을 이용해 플렉스 박스 형태를 지정해야 합니다.

display속성과 브라우저 접두사

플렉스 박스 레이아웃은 최신 모던 브라우저에서는 모두 지원되고 대부분의 구식 버전에서도 지원됩니다.

(http://caniuse.com/#feat=flexbox참고).

하지만 브라우저마다 플렉스 박스를 지원하는 방법이 달라 브라우저 접두사를 붙여야 합니다.

.wrapper {
    display:-webkit-box; /*iOS6이하, 사파리3.1*/
    display:-moz-box; /*파이어 폭스 19이하*/
    display:-ms-flexbox; /*IE 10*/
    display:-webkit-flex; /*웹킷 구 버전*/
    display: flex; /*표준 스펙*/
}

flex-direction속성 - 플렉스 방향 지정하기

플렉스 컨테이너를 지정했다면 플렉스 항목을 배치할 방향을 알려 주어야 합니다. flex-direction속성을 사용해 플렉스 항목의 주축을 가로(row)로 할지, 세로(column)로 할지 지정합니다. 따로 지정하지 않으면 기본 값인 row로 시작합니다

flex-wrap속성 - 플렉스 항목을 한 줄 또는 여러 줄로 배치하기

flex-flow 속성 - 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정하기

order 속성 - 플렉스 항목 배치 순서 바꾸기

플렉스 항목은 소스 코드에 입력한 순서대로 주축을 따라 배치되지만 order 속성을 이용하면 배치 순서를 바꿀 수 있습니다. 

flex 속성 - 플렉스 항목 크기 조절하기

flex 속성은 플렉스 항목의 너비를 늘이거나 줄일 수 있도록 세 가지 값을 이용해 표시합니다.

첫 번째 숫자는 늘릴 비율, 두 번째 숫자는 줄일 비율, 세 번째 숫자는 기본 값입니다.

flex:1 1 0; /* 늘이거나 줄이지 않음*/
flex:2 2 0; /* 2배 늘이거나 2배 줄임*/

플렉스 박스 항목 배치를 위한 속성들

justify-content 속성 - 주축 기준의 배치 방법 지정하기

플렉스 항목을 주축방향으로 배치할 때의 배치 기준을 지정할 수 있습니다.

align-item 속성 - 교차축 기준의 배치 방법 지정하기

slign-self 속성 - 교차축 기준의 배치 방법 지정하기

플렉스 항목을 개별적으로 배치할 수 있습니다.  플렉스 컨테이너에서 플렉스 항목 전체의 배치 방법을 결정하지만 align-self속성으로 특정 플렉스 항목만 배치 방법을 바꿀 수 있습니다. 따라서 이 속성은 항목 자체의 스타일로 지정합니다.

align-content속성 - 여러 줄일 때의 배치 방법 지정하기

미디어 쿼리란?

미디어 쿼리(Media Queries)는 CSS3모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS스타일을 사용하도록 해 줍니다. 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다.

미디어 쿼리 구문

미디어 쿼리의 기본적인 구문은 다음과 같습니다.

미디어 쿼리 구문에서 사용할 수 있는 연산자는 다음과 같습니다.

미디어 유형의 종류

미디어 쿼리는 미디어별로 적용할 CSS를 따로 작성하기 때문에 @media속성 다음에 미디어 유형을 알려주어야 합니다.

미디어 유형에 들어갈 수 있는 것은 다음과 같습니다.

미디어 쿼리의 조건

미디어 쿼리에서 사용하는 조건에는 주로 화면 크기와 관련된 것들이 많고 특정 조건에 따라 적용할 CSS를 다르게 정의하므로 조건을 어떻게 체크할 것 인지가 중요합니다.

웹 문서의 가로 너비와 세로 높이

실제 웹 문서의 내용이 화면에 보이는 영역을 '뷰포트'라고 하는데 뷰포트의 너비와 높이를 미디어 쿼리의 조건으로 사용할 수 있습니다. 이때 height(높이)값은 미디어에 따라 달라지기 때문에 주의해야 합니다.

미디어 쿼리를 이용하면 max-width 값(브라우저 창의 최대 너비 값)에 따라 문서의 배경 이미지가 달라지도록 미디어 쿼리 구문을 구성할 수 있습니다.

단말기의 가로 너비와 세로 높이

@media all and (min-device-width:320px) and (min-device-height: 480px) {
    ......
}

단말기 크기와 뷰포트 크기를 하나로 통일해 사용하기 위해 뷰포트를 지정할 때 width="device-width"로 높고 사용합니다.

화면 회전

미디어 쿼리를 작성할 경우, orientation속성을 사용하면 화면 방향을 체크할 수 있습니다. orientation속성은 portrait값과 landscape 값을 사용할 수 있는데 풍경화처럼 가로(width 값)가 넓으면 landscape이고 초상화처럼 세로(height 값)가 길면 portrait입니다.

화면 비율, 단말기의 물리적 화면 비율

화면 비율은 뷰포트, 즉 단말기 브라우저 화면의 너비 값(width)을 높이 값(height)으로 나눈것으로 숫자 값이나 게산식을 사용할 수 있습니다. 사용할 수 있는 속성은 다음과 같습니다.

반면, 단말기 화면 비율은 단말기의 너비 값(device-width)과 높이 값(device-height)을 이용해 계산합니다. 사용할 수 있는 속성은 다음과 같습니다.

색상당 비트 수

단말기에서 사용하는 최대 색상 비트 수를 미디어 쿼리 조건으로 사용할 수도 있습니다. color:1이면 최대 2가지 색상을 나타낼 수 있고 color:3이면 8가지를 표현할 수 있습니다.(비트수) 컬러 색상을 지원하지 않는다면 color:0으로 지정합니다.

여기서 미디어 쿼리의 조건에 대한 설명을 볼 수 있다.

https://www.w3.org/TR/css3-mediaqueries/

미디어 쿼리 중단점 만들기

미디어 쿼리를 작성할 때 서로 다른 CSS를 적용할 화면 크기를 중단점(break point)이라고 합니다. 이 중단점을 어떻게 지정하는가에 따라 CSS가 달라지고 화면 레이아웃이 바뀌는데 대부분 기기의 화면 크기를 기준으로 합니다.

하지만 시중의 모든 기기들을 반영할 수는 없기 때문에 모바일 기기와 태블릿, 데스크톱정도로만 구분하는 것이 좋습니다. 그리고 처리 속도나 화면 크기 등에서 다른 기기보다 모바일 기기의 제약 조건이 더 많기 때문에 모바일 기기의 레이아웃을 기본으로해서 CSS를 만듭니다.

CSS 프레임워크인 부트스트랩(Bootstrap)과 쇼핑몰 개발 플랫폼인 마젠토(Magento)에서는 다음과 같은 중단점을 사용합니다.

미디어 쿼리 적용하기

외부 CSS파일 연결하기

외부 스타일시트 파일로 따로 저장한 후 웹 문서에 연결해보겠습니다.

<link>태그 사용하기

@import구문 사용하기

<link>태그와 @import 구문

<link>태그와 @import 구문 모두 외부 CSS 파일을 가져와 사용하는 방법이기 때문에 CSS 파일이 1~2개 밖에 없다면 속도나 처리 면에서 큰 차이가 없습니다. 하지만 실제로 사이트를 만들다 보면 CSS 파일이 상당히 많아지는데 이럴 경우, @import구문보다 <link>태그가 안정적이고 빠르기 때문에 <link>의 사용을 권장합니다.

웹 문서에서 직접 정의하기

실제 사이트에서 미디어 쿼리가 어떻게 사용되는지 확인하기 위해 네이버 개발자 센터(https://developers.naver.com/)로 접속한 후 ctrl + shift + i를 눌러 개발자 도구 창을 엽니다. 그리고 도구 창 왼쪽에 있는 Toggle device toolbar아이콘을 클릭하면 화면 위쪽에 막대가 나타날 것이고 만약 보이지 않는다면 more option아이콘을 누른 후 show media query메뉴를 선택하면 미디어 쿼리에서 지정한 조건을 시각적으로 보여줍니다.

미디어 쿼리를 사용해 웹 문서 만들기

반응형 웹 디자인은 화면 해상도에 따라 화면 요소들을 옮길 수 있어야 하므로 처음부터 레이아웃을 잘 구상하고 옮길 부분을 결정해야 합니다. 이때 주로 모바일 화면부터 시작해 태블릿과 PC화면 순서대로 구상하면 편합니다.

반응형 웹이란 웹 사이트를 디자인할 때 PC나 노트북보다 더 작은 스마트폰에서 웹에 접속하는 경우가 많이 생김으로써 모바일 기기의 특성을 충분히 활용할 수 있도록 크기에 맞게 웹 사이트를 표시하도록 만드는 방법을 말합니다.

반응형 웹의 장점

1. 모든 스마트 기기에서 접속 가능

2. 가로 모드에 맞추어 레이아웃 변경 가능

3. 사이트 유지-관리 용이

모바일 기기를 위해 기본적으로 알아두어야 할 것이 '뷰포트(viewport)'입니다. 뷰포트를 지정하면 접속한 기기 화면에 맞추어 확대하거나 축소해 표시할 수 있습니다. '뷰포트'란 스마트폰 화면에서 실제 내용이 표시되는 영역입니다.

스마트폰 화면에서 내용을 확인하면 페이지의 글자들이 매우 작게 표시되는 것을 보게 되는데, 이것은 웹키트(webkit)기반인 모바일 브라우저들의 기본 뷰포트 너비가 980px이기 때문입니다. 다시 말해 웹 페이지 너비를 스마트폰 용인 320px로 맞추어 제작하더라도 스마트폰의 모바일 브라우저의 기본 뷰포트 너비가 980px이기 때문에 웹 페이지 너비를 무조건 980px로 표시하려고 합니다. 

뷰포트 지정하기

뷰포트를 지정하는 방법으로는 <meta>태그를 이용해 <head>태그와 </head>태그 사이에 작성합니다. 뷰포트를 지정하는 기본적인 형식은 다음과 같습니다.

content속성을 이용해 뷰포트 속성과 속성 값을 지정하는데 content안에서 사용하는 뷰포트 속성은 다음과 같습니다.

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

가장 많이 사용하는 형태는 이런 형태입니다.

가변 그리드 레이아웃

고정 그리드와 가변 그리드

웹 사이트의 레이아웃을 정할 때 자주 사용하는 기준이 '그리드 시스템(grid system)'입니다. 반드시 그리드 시스템을 따를 필요는 없지만 사이트 전체의 디자인이나 일관성을 유지하는데는 그리드 시스템이 편리합니다. 그리드 시스템이란 화면을 몇개의 칼럼(column)으로 나누어 요소들을 배치하는 것으로 필요할  때마다 칼럼들을 묶어 배치할 수 있습니다.

그리드 시스템을 사용하면 화면을 단순하게 만들면서도 규칙적으로 배열하기 때문에 레이아웃을 일관성 있게 유지할 수 있다는 장점이 있어 대부분의 사이트들에서 사용됩니다.

그리드 시스템에서는 화면 너비를 몇 픽셀로 하는가에 따라 960픽셀로 고정하는 '960 그리드 시스템'이나 1200픽셀로 고정하는 '1200 그리드 시스템'으로 나누기도 하고 화면을 몇 개의 칼럼으로 나누는가에 따라 12칼럼 그리드, 16칼럼 그리드, 24칼럼 그리드로도 나누는데 주로 960픽셀의 12칼럼 그리드를 사용합니다.

반면 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 픽셀과 같은 고저 값이 아니라 백분율과 같은 가변 값으로 지정하면 됩니다. 이렇게 사이트의 레이아웃을 백분율로 지정하는 것을 '가변 그리드 레이아웃(fluid grid layout)' 또는 줄여서 '가변 레이아웃(fluid layout)'이라고 합니다.

가변 그리드 레이아웃 만들기

1. 전체를 감싸는 요소

고정 그리드 레이아웃을 만들고 가변 그리드 레이아웃으로 바꿀 수 있습니다.

가변 그리드는 웹 콘텐츠 전체를 감싸는 요소의 너비를 기준으로 각 요소의 너비를 계산합니다. 만약 이런 요소가 없다면 <div id="wrapper">나 <div id="container">과 같은 요소를 직접 추가합니다.  id이름은 무엇으로 해도 괜찮습니다.

#wrapper {
	width:96%;
    margin:0 auto;
}

2. 각 요소의 너비 값 계산하기

기준이 되는 요소를 찾았다면 그 요소의 너비 값으로 각 요소의 너비 값을 계산합니다.

(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100

요소의 너비 값을 %로 지정할 때 소수점 이하 숫자가 많다면 소수점 이하 3~4자리까지 표시합니다. 또한 요소들의 너비와 함께 패딩과 마진도 백분율 값으로 조절하는 것이 자연스럽습니다. 각 요소에 사용한 패딩과 마진 값도 #wrapper 너비 값으로 나눈 후 100을 곱해 계산합니다.

가변 레이아웃과 가변 요소

가변 글꼴

텍스트 크기를 픽셀(px)단위로 지정하면 크기가 고정되기 때문에 화면 크기가 작은 기기에서는 매우 작게 표시됩니다. 따라서 반응형 웹 디자인을 위해 가변 그리드 레이아웃을 사용할때는 글자 크기도 유동적으로 바뀌어야 합니다. 이것을 '가변 글꼴'이라고 하는데요. 가장많이 사용하는 단위는 em과 rem입니다.

EM 단위

부모 요소에서 지정한 폰트의 대문자 m의 너비를 1EM으로 지정한 것으로 1EM은 16PX입니다. 따라서 이미 PX로 표시한 글자의 크기를 16PX로 나누면 EM 값으로 계산할 수 있습니다.

em단위로 작성된 글꼴도 실제로 브라우저 창에 표시될 때는 해당 기기에 맞춘 픽셀크기로 계산되어 표시됩니다.

rem 단위

em 단위는 부모 요소의 글꼴을 기준으로 하기 때문에 중첩된 부모 요소의 글자 크기의 영향을 받습니다. 이런 단점을 없애기 위해 만든 단위가 rem입니다. rem에서 r은 루트(root)를 뜻하며 rem은 처음부터 기본 크기를 지정하기 때문에 중간에 기본값이 바뀌지 않습니다.

가변 이미지

이미지의 경우, 웹 문서에 삽입할 때부터 이미지의 크기가 정해져 있기 때문에 브라우저 창의 크기가 변하더라도 이미지의 너비 값은 바뀌지 않습니다. 그래서 가변 그리드 레이아웃에서 이미지의 너비가 브라우저 화면의 너비보다 클 경우, 브라우저 화면의 너비를 줄이면 이미지의 일부가 가려집니다.

이럴 때 '가변이미지(fluid image)'로 만들면 창의 너비에 따라 이미지 너비도 적절히 조절되도록 만들 수 있습니다.

<img>태그와 srcset속성

이미지 너비 값을 max-width:100%로 지정하면 가변 이미지를 간단히 만들 수 있지만 모든 상황에서 사용할 수 있는 것은 아닙니다. 고해상도 이미지를 크기만 줄여 모바일에 표시하더라도 파일 사이즈가 크기 때문에 모바일에서 다운로드하는 데 시간이 오래 걸립니다. 또한 텍스트가 포함된 이미지일 경우, 모바일 화면에 맞게 줄여 표시하면 텍스트 내용을 알아보기 힘들 수도 있죠. <img> 태그에서 srcset속성을 이용하면 화면 너비 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있습니다.

<img src="images/pencil.jpg" srcset="images/pencil-hd.jpg 2x" alt="색연필 제품 이미지">

<picture>태그와 <source> 태그 - 상황별로 다른 이미지 표시하기

HTML5.1에는 <picture>태그가 표준으로 포함되면서 <picture> 태그와 <source>태그를 함께 사용해 화면 해상도뿐만 아니라 화면 너비에 따라 다른 이미지파일을 표시할 수도 있습니다.

<picture>
	<source srcset="images/shop-large.jpg" media="(min-width:1024px)">
    <source srcset="images/shop-medium.jpg" media="(min-width:768px)">
    <source srcset="images/shop-small.jpg" media="(min-width:320px)">
    <img src"images/shop.jpg" alt="fill with coffee" style="width:100%;">
</picture>

가변 비디오

가변 이미지와 마찬가지로 비디오도 화면의 너비가 달라질 때마다 비디오의 너비가 늘어나거나 줄어들 수 있도록 해야 합니다. HTML5에서 동영상을 삽입할 때는 기본적으로 <video>태그를 사용하므로 CSS를 사용해 max-width 속성을 100%로 지정하면 웹 문서 안에서 크기가 적절히 조절됩니다.

조건
1. 기존 사각형의 속성 중 배경 색을 yellow로 바꿉니다.
2. 배경 색이 천천히 바뀌도록 transition 속성을 사용하는데 적용 속성은 배경이고 진행 시간은 1초로 합니다.

연습문제 1~3

1. 13/quiz-1.html에 있는 사각형에 마우스 포인터를 올렸을 때 다음 조건에 맞게 transition속성을 적용하세요.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  body {
    padding-top:50px;
    padding-left:50px;
  }
  .box {
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
    border-radius: 5px;
  }
</style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  body {
    padding-top:50px;
    padding-left:50px;
  }
  .box {
    width: 100px;
    height: 100px;
    background: green;
    border: 1px solid black;
    border-radius: 5px;
  }
  .box:hover {
    background-color: yellow;
    transition-duration: 1s;
  }
</style>
</head>

<body>
  <div class="box"></div>
</body>
</html>

2. 13/quiz-2.html문서를 열어 보면 이미지 파일이 화면에 삽입되어 있습니다. 이미지 위로 마우스 포인터를 올렸을 때 다음 조건에 맞게 이미지가 변형되도록 소스를 수정하세요.

조건
1. 이미지 20도 회전합니다.
2. 이미지 테두리가 1px짜리 검은 실선으로 바뀝니다.
3. 테두리의 모서리 부분을 10px만큼 둥글게 처리합니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  .container {
    width:500px;
    margin:50px auto;
  }
  .photo {
    border:1px solid #ccc;
  }
</style>
</head>

<body>
  <div class="container">
    <img src="images/coffee.jpg" class="photo">
  </div>
</body>
</html>

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS 애니메이션</title>
<!--[if lt IE 9]>
<script src="html5shiv.js"></scirpt>
<![endif]-->
<style>
  .container {
    width:500px;
    margin:50px auto;
  }
  .photo {
    border:1px solid #ccc;
  }
  .photo:hover {
    border: black solid;
    border-width: 1px;
    border-radius: 10px;
    transition: all;
    transform: rotate(20deg);
  }
</style>
</head>

<body>
  <div class="container">
    <img src="images/coffee.jpg" class="photo">
  </div>
</body>
</html>

3. transition 속성과 transform속성을 이용해 사진 위로 마우스 포인터를 가져갈 때 사진이 확대되는 애니메이션을 만들려고 합니다. 13/quiz-3.html 문서를 가져와 다음 조건에 맞게 수정하세요.

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS3 트랜스폼과 트랜지션</title>
	<style>	
	.photo {	
        margin-top:50px;	
	    margin-left:100px;
	}
	</style>
</head>
<body>
	<img src="images/lamp.jpg" class="photo">	
</body>
</html>

<!doctype html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>CSS3 트랜스폼과 트랜지션</title>
	<style>	
	.photo {	
        margin-top:50px;	
	    margin-left:100px;
	}
	.photo:hover {
		transition: all;
		transition-duration: 1s;
		transform:scale(150%, 150%);
		transform-origin: left top;
		box-shadow: 5px 5px 3px black;
	}
	</style>
</head>
<body>
	<img src="images/lamp.jpg" class="photo">	
</body>
</html>

변형(transform)

2차원 변형과 3차원 변형

'2차원 변형(2D transform)'은 웹 요소를 변형시킬 때 단순히 수평이나 수직으로 이동하고 회전하는 것을 말합니다.

평면상에서 특정 요소를 이동, 회전, 왜곡시키는 것은 그 결과를 쉽게 예측할 수 있다. 2차원 좌표계에서 x축은 오른쪽으로 갈수록 값이 커지고 y축은 아래로 내려갈수록 값이 커집니다.

'3차원 변형(3D transform)'은 x축과 y축에 원근감을 주는 z축을 추가해 변형시키는 것을 말합니다. 3차원 변형에서 z축은 앞뒤로 이동하는데 보는 사람쪽으로 다가올수록 값이 더 커지고 뒤로 갈수록 값이 작아집니다.

transform과 변형 함수

2차원 변형 함수

2차원 변형함수는 최신 브라우저에서는 모두 지원되지만 인터넷 익스플로러 9를 비롯한 이전 브라우저를 위해 -webkit-과 -moz-, -ms-, -o-등의 브라우저 접두사를 붙여야합니다.

3차원 변형 함수

2차원 변형함수에 z축을 추가하면 3차원 변형 함수가 됩니다. 3차원 변형 함수도 최신브라우저에서는 모두 지원되지만 이전 브라우저를 위해-webkit-과 -moz-등의 브라우저 접두사를 붙여야 합니다. 인터넷 익스플로러의 경우, 10 이상에서 3차원 변형 함수를 지원하므로 -ms-접두사를 따로 사용하지 않습니다.

translate 변형함수 - 요소 이동시키기

translate변형 함수는 2차원과 3차원에서 모두 사용 가능한 변형 함수입니다. 요소를 이동시킬 때 사용하는 함수입니다.

scale 변형 함수 - 요소 확대/축소하기

값이 1보다 크면 확대, 작으면 축소됩니다.

rotate 변형 함수 - 요소 회전하기

지정한 각도만큼 웹 요소를 시계 방향이나 시계 반대반향으로 회전시키며 2차원 함수일 때와 3차원 함수일 때의 기본형이 다릅니다. 양수일 경우 시계방향으로 회전하고 음수일 경우 반시계방향으로 회전합니다.

skew 변형 함수 - 요소를 비틀어 왜곡하기

skew변형 함수는 요소를 지정한 각도만큼 비틀어 왜곡합니다. 이때 양쪽 방향이나 한쪽 방향으로만 비틀 수 있습니다.

변형과 관련된 속성들

transform-origin 속성 - 변형 기준점 설정하기

transform-origin의 속성

perspective, perspective-origin 속성 - 원근감 표현하기

perspective 속성은 3차원 변형에서 사용하는 속성으로 원래 위치에서 사용자가 있는 방향이나 반대 방향으로 잡아당기거나 밀어내 원근감을 갖게 합니다. 속성 값은 0보다 커야 하며 값이 클수록 사용자로부터 멀어집니다.

transform-style속성 - 3D 변형 적용하기

여러 가지 변형을 동시에 적용할 때 transform-style속성을 사용하면 부모 요소에 적용한 3D 변형을 하위요소에도 적용할 수 있습니다.

backface-visibility속성 - 요소의 뒷면 표시하기

요소 회전할 때 각도가 90도를 넘으면 뒷면이 보이는데 반대쪽을 표시하거나 표시하지 않을 수 있는 속성이다.

트랜지션

스타일이 바뀌는 시간을 조절해서 애니메이션 효과를 낼 수 있다. 스타일 속성이 바뀌는 것을 말합니다.(배경색 모양 등)

transition-property 속성 - 트랜지션을 적용할 속성 지정하기

트랜지션을 어느 속성에 적용할 것인지 선택하는 것입니다.

transition-duration속성 - 트랜지션 진행 시간 지정하기

transition-property에서 트랜지션 대상을 지정했다면 진행 시간을 지정해야 그 시간 동안, 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있습니다.

transition-timing-function 속성 - 트랜지션 속도 곡선 지정하기

transition-delay속성 - 지연 시간 설정하기

사용할 수 있는 값은 초(seconds)나 밀리초(milliseconds)이며 기본 값은 0s입니다.

transition 속성 - 트랜지션 속성 한꺼번에 표기하기

애니메이션

CSS3의 animation속성을 사용하면 자바스크립트나 플래시를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있습니다. 시작 스타일과 끝 스타일을 지정하면 CSS에서 중간 스타일을 자동으로 추가해 부드럽게 변합니다.

CSS 애니메이션에서 사용하는 속성

CSS 애니메이션을 만들 때 에니메이션이 바뀌는 지점(키프레임)은@keyframes속성을 이용해 정의하고 animation속성과 animation하위 속성을 이용해 애니메이션의 실행 시간이나 반복 여부 등을 지정합니다.

퀴즈1~2

1. 12/quiz-1.html에는 이미지가 삽입되어 있습니다. 다음 조건에 맞게 이미지 위로 마우스 포인터를 올려놓았을 때의 스타일을 정의하세요.

조건
1. 웹 문서에는 여러 이미지가 있을 수 있으므로 이미지에 적용된 class 속성 값을 확인하고
그 이름에 맞는 클래스 선택자 스타일을 작성합니다
2. 이미지 위로 마우스 포인터를 올려놓았을 때 검정색 5px짜리 실선이 표시되도록 합니다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>CSS 선택자</title>  
</head>
<body>
  <p>이미지 위로 마우스 포인터를 올려보세요</p>
  <img src="images/tangerines.jpg" class="top-img">
</body>
</html>

<!DOCTYPE HTML>
<html lang="ko">
  <style>
    [class="top-img"]:hover {
      border: 5px solid black;
    }
  </style>
<head>
  <meta charset="utf-8">
  <title>CSS 선택자</title> 
</head>
<body>
  <p>이미지 위로 마우스 포인터를 올려보세요</p>
  <img src="images/tangerines.jpg" class="top-img">
</body>
</html>

2. 12/quiz-2.html문서에 있는 내비게이션 링크에는 아무 스타일도 적용되어 있지 않기 때문에 파란색 밑줄이 있는 텍스트로 표시됩니다. 가상 클래스 선택자르 ㄹ사용해 다음 조건에 맞게 링크 스타일을 수정하세요

조건
1. 웹 문서에는 내비게이션 링크 외에도 다른 링크가 있을 수 있으므로 내비게이션 요소에 있는 링크에만 적용합니다
(내비게이션의 하위 선택자로 적용해야 합니다.)
2. 링크의 글자 색을 '검정(black)'으로 지정하고 밑줄을 없앱니다.
3. 방문했던 링크의 글자 색을 원래 링크 색상인 '검정(black)'으로 지정합니다.
4. 링크를 클릭하는 순간의 글자 색을 '파랑(blue)'으로 지정합니다.

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>CSS 선택자</title>  
  <style>
    .main-menu {
      margin:50px auto;
      height:60px;
      border:1px solid black;
    }
    .main-menu ul {
      margin:0;
      list-style:none;
    }
    .main-menu ul li{
      display:inline-block;
      padding:10px 30px;      
      line-height:40px;
    }
  </style>
</head>
<body>
  <nav class="main-menu">
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>
   </nav>
</body>
</html>

<!DOCTYPE HTML>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>CSS 선택자</title>  
  <style>
    .main-menu {
      margin:50px auto;
      height:60px;
      border:1px solid black;
    }
    .main-menu ul {
      margin:0;
      list-style:none;
    }
    .main-menu ul li{
      display:inline-block;
      padding:10px 30px;      
      line-height:40px;
    }
    .main-menu ul li :link, :visited, :hover {
      color: black;
      text-decoration: none;
    }
    .main-menu ul li :active {
      color: blue;
    }
  </style>
</head>
<body>
  <nav class="main-menu">
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>
   </nav>
</body>
</html>

앞에서 배웠던 주요 선택자(selector) 외에도 CSS3에는 매우 다양한 선택자들이 있습니다.

연결 선택자

연결 선택자는 '콤비네이션 선택자', '콤비네이션 실렉터(combination selector)'라고도 합니다.

하위 선택자 

지정한 모든 하위 요소에 스타일 적용하기

하위 선택자(descendant selector, 디센던트 셀렉터)는 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 선택자'라고도 합니다. 

자식 선택자

자식 요소에만 스타일 적용하기

하위 요소에 전체 스타일을 적용하는 것이 아니라 자식 요소에만 스타일을 적용할 수도 있습니다. 자식 선택자(child selector)는 자식 요소에 스타일을 적용하는 선택자로 두 요소 사이에 '>(gt)'를 표시해 부모 요소와 자식 요소를 구분합니다. 하위 선택자에서는 자식 요소뿐만 아니라 그 자손까지 적용되는 반면, 자식 선택자에서는 바로 아래 요소, 즉 자식 요소에만 스타일이 적용됩니다.

인접 형제 선택자

가장 가까운 형제 요소에 스타일 적용하기

먼저 나오는 '형 요소', 나중에 나오는 요소를 '동생 요소'라고 합니다. 인접 형제 선택자(adjacent selector)는 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생요소에만 스타일이 적용됩니다.

형제 선택자

형제 요소에 스타일 적용하기

인접 형제 선택자와 달리 모든 형제 요소에 적용됩니다. 첫 번째 요소와 두 번째 요소 사이에 '~(틸드)'를 표시합니다.

속성 선택자

attribute 태그에 붙어있는 추가적인 값이며 J-querry에서도 사용가능하다. 

사용하는 속성들의 값에 따라 스타일을 지정한다. 지정한 속성을 가진 요소를 찾아 스타일을 적용합니다.

[속성 = 값] 선택자

특정 값을 갖는 속성에 스타일 적용하기

[속성 ~= 값] 선택자

여러 값 중 특정 값이 포함된 속성에 스타일 적용하기

하나의 속성 값이 여러 개일 때 특정 속성 값을 찾는데 편리합니다.

[속성 |= 값]

특정 값이 포함된 속성에 스타일 적용하기

[속성 ^= 값]

특정 값으로 시작하는 속성에 스타일 적용하기

[속성 $= 값]

특정 값으로 끝나는 속성에 스타일 적용하기

[속성 *= 값]

값의 일부가 일치하는 속성에 스타일 적용하기

속성 정리

가상 클래스와 가상 요소

클래스 이름 앞에 콜론(;)을 붙여 표시하는 가상 클래스와 클래스 이름 앞에 콜론 두 개(;;)를 붙여 표시하는 가상 요소를 사용합니다.

사용자 동작에 반응하는 가상 클래스

1. :link 가상 클래스 선택자

방문하지 않은 링크 스타일에 적용

사용자가 아직 방문하지 않은 링크에 스타일을 적용합니다. 택스트 링크는 기본적으로 파란색(blue) 글자와 밑줄로 표시되는데 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link선택자를 사용합니다.

2. :visited 가상 클래스 선택자

방문한 링크에 스타일 적용

문서의 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용합니다. 방문한 텍스트 링크는 기본적으로 자주색(purple)으로 표시되는데 사용자가 방문했던 링크도 일반 텍스트 링크와 색상이 달라지지 않게 하려면 :visited선택자를 사용해 조절합니다.

3. :hover 가상 클래스 선택자

웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용

웹 요소 위로 마우스 커서를 올려놓을 때의 스타일을 지정합니다. 이 가상 클래스 선택자를 응용하면 이미지 위로 마우스 커서를 올려놓으면 다른 이미지로 바뀌었다가 마우스 커서를 치우면 원래 이미지로 돌아오는 롤오버 효과(rollover)를 만들 수 있습니다.

4. :active 가상 클래스 선택자

웹 요소를 활성화했을 때의 스타일 적용

링크나 이미지 등 웹 요소를 활성화했을 때(누르고 있을 때)의 스타일을 지정합니다. 예를 들어 링크를 클릭했을 때의 스타일을 지정합니다.

5. :focus 가상 클래스 선택자

웹 요소에 초점이 맞추어 졌을 때의 스타일 적용

웹 요소에 초점이 맞추어졌을 때의 스타일을 지정합니다. 예를 들어 아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 Tab을 눌러 초점을 이동했을 때의 스타일을 지정합니다.

가상 선택자를 링크와 관련해 사용할 때는 선택자 순서에 주의해야 합니다. 앞에서 살펴본 1~4 모두 정의한다면 :link 선택 자부터 정의하고 :visited, :hover, :active 순서대로 정의합니다. 이 순서가 바뀌면 스타일을 정의하더라도 제대로 적용되지 않습니다. 

UI 요소 상태에 따른 가상 클래스

사용자의 동작뿐만 아니라 웹 요소의 상태에 따라 스타일을 지정할 때도 가상 클래스 선택자를 사용합니다. 그중에서도 UI(User Interface) 요소의 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용합니다.

1. :enabled와 :disabled 가상 클래스 선택자

요소를 사용할 수 있을 때와 없을 때의 스타일 지정

해당 요소가 사용 가능한 상태일 때의 스타일을 지정하려면 :enabled클래스를 사용하고 해당 요소가 사용 불가능한 상태일 때의 스타일을 :disabled클래스를 사용합니다. 텍스트 영역 필드(textarea)를 게시판 입력으로 사용할 때는 :enabled, 약관으로 보여줄 때는 :disabled로 사용합니다.

2. :checked가상 클래스 선택자

라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정

라디오 박스나 체크 박스에서 사용자가 해당 항목을 선택했을 때(체크했을 때)의 스타일을 지정합니다.

구조 가상 클래스

웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용하는 가상 클래스 선택자입니다.

1. :root 가상 클래스 선택자

문서 전체에 적용하기

HTML문서에서는 루트 요소가 HTML이므로 HTML요소에 스타일이 적용됩니다.

2. :nth-child(n)와 :nth-last-child(n) 가상 클래스 선택자

자식 요소의 위치에 따라 스타일 적용하기

여러 개의 항목이 일렬(가로 or 세로)로 나열되어 있는 경우, calss나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지를 따져 스타일을 적용할 수 있습니다. 주로 메뉴 항목에 이 선택자를 사용합니다. 세 번째에 있는 메뉴 항목이든 끝에 있는 메뉴 항목이든 원하는 위치에 따라 요소를 찾아 스타일을 지정할 수 있기 때문입니다.

:nth-child(n)는 앞에서부터 n번째 자식 요소에 스타일을 적용하고 :nth-last-child(n)는 끝에서부터 n번째인 자식 요소에 스타일을 적용합니다. an+b처럼 수식을 사용할 수도 있는데 n값은 0부터 차례대로 정수를 대입해 계산합니다.

다만, 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모요소를 갖고 있어야만 합니다. 즉, 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 합니다.

3. :nth-of-type(n), nth-last-of-type(n) 가상 클래스 선택자

특정 태그 위치에 스타일 적용하기

<p>태그나 <li> 태그가 여러 개 나열되어 있고 각 태그에 id나 class를 사용하지 않은 상태에서 몇 번째에 잇는 <p> 태그 또는 몇 번째에 있는 <li> 태그처럼 태그에 따라 몇 번째에 있는 항목인지를 지정해 스타일을 적용할 때 이 가상 클래스 선택자를 사용합니다.

:nth-of-type(n)은 앞에서부터 세어 n번째 요소이고 :nth-last-of-type(n)은 끝에서부터 세어 n 번째 요소에 스타일을 지정합니다.

4. :first-child, :last-child 가상 클래스 선택자

첫 번째, 마지막 요소에 스타일 적용하기

:first-chiuld는 첫 번째 자식 요소를 선택해 스타일을 적용하고 :last-child는 마지막 자식요소에 스타일을 적용합니다.

예를 들어 section p:first-child는 section의 p 자식 요소들 중 첫번째 p 자식 요소를 가리킵니다.

5. :first-of-type, :last-of-type 가상 클래스 선택자

형제 관계 요소의 위치에 따라 스타일 적용하기

형제 관계인 요소 중에서 :first-of-type은 첫 번째 요소, :last-of-type은 마지막 요소에 스타일을 적용합니다.

6. :only-child, :only-of-type 가상 클래스 선택자

하나뿐인 자식 요소에 스타일 적용하기

:only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용하며 :only-of-type은 :only-child와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 적용합니다.

그 외 가상 클래스

1. :target가상 클래스 선택자

앵커 목적지에 스타일 적용하기

같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용합니다. 이때 :target 선택자를 이용하면 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정할 수 있습니다.

2. :not 가상 클래스 선택자

특정 요소가 아닐 때 스타일 적용하기

:not 선택자는 이름에서도 알 수 있듯이 부정의 의미가 있습니다. 여기서 not은'괄호 안에 있는 요소를 제외한'이라는 의미입니다.

가상 요소

가상 요소는 가상 클래스와 구별하기 위해 클래스 이름 앞에 콜론 두 개(;;)를 붙여 표시합니다.

1. ::first-line요소와 ::first-letter요소

첫 번째 줄, 첫 번째 글자에 스타일 적용하기

이 요소들을 사용하면 지정한 요소의 첫 번째 줄(::first-line)이나 첫 번째 글자(::first-letter)에 스타일을 쉽게 적용할 수 있습니다. ::first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데 첫 번째 글자는 반드시 첫 번째 줄에 있어야 합니다. 만약 <p>태그 안에<br>태그가 있어 첫 번째 글자가 첫 번째 줄에 없을경우, 적용할 수 없습니다.

2. ::before, ::after요소 

내용의 앞뒤에 콘텐츠 추가하기

이 요소를 사용하면 특정 내용 앞(::before)이나 뒤(::after)에 지정한 내용을 넣을 수 있습니다. 다시 말해 요소의 앞뒤에 텍스트나 이미지 등을 추가할 수 있습니다. 

HTML4까지는 웹 브라우저에 멀티미디어 파일을 삽입하더라도 파일을 재생하려면 웹 브라우저가 아닌 별도의 프로그램(plug-in)이 필요했지만 HTML5에서는 웹 브라우저 안에서 멀티미디어를 직접 재생할 수 있습니다.

<object>태그와 <embed>태그

플러그인 사용하기

웹 브라우저에서 처리할 수 없는 작업을 위해 웹 문서 안에 포함시킨 외부프로그램 기능을 플러그인이라고 합니다. 이런 플러그인을 웹 브라우저에 적용하려면<object>태그와 <embed>태그를 사용합니다.

<object>태그 - 외부 파일 삽입하기

<object>태그는 웹 브라우저에서 직접 재생할 수 없는 자바 애플릿이나 PDF파일, 플래스무비 같은 콘텐츠를 웹 문서 안에 포함시키기 위해 사용합니다. 또한 다른 HTML문서도 웹 문서에 포함시킬 수 있습니다.

<object>태그에서 사용할수 있는 속성

<embed>태그

외부 파일 삽입하기

<object>태그와 달리 닫는 태그가 없는 <embed>태그는 주로 <object>태그를 지원하지 않는 이전 브라우저에서 사용합니다.

멀티 미디어의 웹 표준화

HTML5는 PC뿐만 아니라 웹 브라우저가 설치된 모든 기기에 적용되는 웹 표준이므로 플러그인 프로그램 없이 웹 브라우저 자체에서 멀티미디어를 재생할 수 있습니다. 웹에서 지원되는 비디오/오디오 파일에는 여러 종류가 있습니다.

최신 모던 웹 브라우저에서는 비디오 파일의 경우 mp4나 webm, 오디오 파일의 경우 mp3나 ogg파일을 주로 사용합니다.

HTML5와 비디오 코덱

캠코더나 휴대폰 등 여러 장치를 이용해 비디오를 촬영할 수 있는데 촬영한 비디오 파일이 있더라도 컴퓨터에서 곧바로 사용할 수 는 없고 원본 비디오를 최대한 압축해 컴퓨터에서 사용할 수 있는 비디오 파일로 변환해 합니다. 이 과정을(encoding)이라고 합니다. 반대로 비디오 파일에 저장되어 있는 비디오 정보를 가져와 비디오 플레이어에 보여 주는 과정을 디코딩(decoding)이라고 합니다.

인코딩과 디코딩을 수행하는 것이 비디오 코덱인데 현재 사용할 수 있는 비디오 코덱은 여러종류가 있습니다. 예를 들어 우리가 자주 보는 WMV(Windows Media Video)라는 코덱은 원본 비디오를 윈도우의 '윈도우 미디어 플레이어'로 볼 수 있도록 변환해 줍니다.

비디오 코덱에는 다음과 같은 종류가 있습니다.

H264/AVC, v8, v9, 오그 테오라(Ogg Theora)

HTML5와 오디오코덱

1 MPEG-1 AUDIO Layer3, Ogg Vorbis

오디오 & 비디오 재생하기

<audio>태그

오디오 파일 삽입하기

일반적으로 대부분의 브라우저에서 가능하면 mp3 파일을 삽입하며 ogg(또는 oga)파일은 함께 지정하지 않는 경우가 많습니다.

<audio>태그에서 사용되는 속성

<video>태그

비디오 파일 삽입하기

<audio>태그와 <video>태그의 속성

<audio> 태그와 <video>태그에서 사용할 수 있는 속성은 거의 일치하기 때문에 함께 소개합니다.

<source>태그

여러 미디어 파일 한꺼번에 지정하기(멀티미디어)

브라우저에 따라 지원하는 오디오 코덱이나 비디오 코덱이 다르기 때문에 한 가지 파일만 사용했을 경우, 일부 오래된 브라우저에서는 지원하지 않을 수 있습니다.

사용자들의 브라우저 환경을 모두 고려한다면 최신 브라우저와 이전 브라우저에서 모두 재생할 수 있도록 ogv 파일도 함께 지정해주어야 합니다. 최근에는 무료 코덱을 사용하면서 화질도 뛰어난 webm파일까지 함께 사용합니다.

<video>태그를 지원하지 않는 이전브라우저를 위해 HTML5지원 브라우저가 필요하다는 대체 텍스트를 표시할 수 있습니다.

<video controls>
	<source src="media/Painting.mp4" type="video/mp4">
	<source src="media/Painting.webm" type="video/webm">
	<source src="media/Painting.ogv" type="video/ogg">
    이 영상을 보기 위해서는 HTML5를 지원하는 브라우저가 필요합니다
</video>

<track>태그

비디오 화면에 자막 추가하기

HTML5에서는 비디오 콘텐츠를 웹 페이지에 삽입할 때 청각 장애인용 자막을 표시하는 것이 기본입니다.

<track>태그의 속성

1. kind속성

2. src 속성

자막 텍스트의 파일 경로를 지정합니다.

3. srclang 속성

사용한 언어를 지정합니다. kind속성 값이 subtitle이라면 반드시 지정해야하는데 en이나 ko처럼 언어를 약자로 표기합니다.

4. label속성

자막이 여러 개일 경우, 자막을 식별할 수 있도록 제목을 달아줍니다.

5. default 속성

자막 파일이 여러 개일 경우, 기본으로 사용할 자막을 default로 지정할 수 있습니다.

WebVTT자막 파일

HTML5에서는 srt파일을 사용하지만 모든 브라우저에서 공식적으로 지원하는 자막 파일 형식은 WebVTT(Web Video Text Track)형식입니다.

비디오 파일에 자막 파일 연결하기