codeahn

실습용 데이터

테이블 이름 확인

- 현재 접속한 데이터베이스 계정에 생성된 모든 테이블 이름을 확인

SELECT * 
FROM TAB;

테이블 구조 확인

DESC TBL_NAME;

DESC STUDENT;

SQL 명령문의 표준형식

SELECT [DISTINCT] *
FROM TABLE
[WHERE CONDITION]
[GROUP BY GROUP_BY_EXPRESSION]
[HAVING GROUP_CONDITION]
[ORDER BY COLUMN];

DISTINCT는 중복 제거

WHERE은 조건

GROUP BY는 그룹으로 묶음(행이줄어듦)

HAVING GROUP BY절에 의해 생성된 그룹을 대상으로 조건을 적용

ORDER BY 칼럼이나 표현식을 기준으로 출력 결과를 정렬할 때 사용

칼럼에 대한 별명 부여

- 칼럼 이름과 별명 사이에 공백을 추가

- 칼럼 이름과 별명 사이에 AS 키워드를 추가

- 큰 따옴표를 사용

    1.칼럼 이름과 별명 사이에 공백을 추가하는 경우

    2. 특수문자를 추가하거나 대소문자를 구분하는 경우

SELECT DNAME DEPT_NAME, DEPTNO AS DN
FROM DEPARTMENT;

합성 연산자(||) 사용

- 하나의 칼럼과 달느 칼럼, 산술 표현식 또는 상수 값과 연결하여 하나의 칼럼처럼 출력할 경우에 사용

산술 연산자(+,-,*,/)

- 칼럼 값에 산술 연산자를 적용하여 계산된 결과를 출력할 수 있는 기능을 제공

- 숫자 또는 날짜 타입(데이터 베이스 특징)에만 사용가능

- 수학에서 산술 연산자의 우선순위와 동일, 괄호를 사용하여 우선순위 변경가능

학생 테이블 인스턴스 & 예제 데이터

교수 테이블 인스턴스 & 예제 데이터

부서등급 테이블 인스턴스 & 예제 데이터

급여등급 테이블 인스턴스 & 예제 데이터

반응형 웹 디자인을 구현하는 다른 방법은 '플렉스 박스(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속성 - 여러 줄일 때의 배치 방법 지정하기

오라클 에디션별 특징

엔터프라이즈 에디션(EE): 오라클 데이터베이스의 모든 기능을 사용할 수 있는 에디션

스탠더드 에디션(SE): 데이터베이스의 기본 기능이 모두 지원되며 중소기업용으로 사용하기 적당함

스탠다드스탠더드 에디션 원(SEO): 스탠더드 에디션과 비슷하나 단일 CPU환경에서 사용 가능

익스프레스 에디션(XE): 무료로 사용할 수 있는 버전으로 사용으로 사용하려면 기능상 제한이 있음

퍼스널 에디션(PE): 개인용으로 엔터프라이즈 에디션의 대부분이 기능이 지원되지만 단일 사용자만 사용 가능

이 중 우리가 쓰는것은 익스프레스 에디션을 쓸 것이다(XE)

오라클 공식 홈페이지(http://www.oracle.com/kr)에서 로그인/회원가입을하고 오라클을 다운로드한다

https://www.oracle.com/kr/database/technologies/oracle-database-software-downloads.html#19c

테이블스페이스 생성

오라클은 데이터를 관리하는 시스템이다. 따라서 데이터를 어딘가에 저장해 놓고 사용해야 하는데, 데이터 저장 단위 중 가장 상위 개념이 바로 테이블스페이스다. 데이터 저장 단위는 물리적, 논리적 단위로 나눌 수 있다. 물리적 단위는 파일을 말하는 것이며, 논리적 단위는 크기 순으로 '데이터 블록 > 익스텐트 > 세그먼트 > 테이블스페이스'다. 블록이 여러 개 모여 익스텐트를, 여러 개의 익스텐트가 모여 세그먼트를 구성하는 식이다. 저장 단위는 4개지만, 실제로 SQL을 이용해서 데이터를 조작하는 대상은 테이블이다. 테이블들을 담을 커다란 공간이 바로 테이블스페이스이다.

테이블 스페이스를 만드는 방법은 2가지다. 스크립트로 만들 수도 있고 EM(엔터프라이즈 매니저)를 사용해서도 가능하다. 오라클 SQL과 PL/SQL을 다루는기술 책에서는 두 번째 방법으로 테이블스페이스를 생성할 것이다.

1. sqlplus 실행하기

윈도우에서 명령 창을 열고 'sqlplus'를 입력한다. 사용자명과 비밀번호를 입력해야 하는데 사용자는'system', 비밀번호는 오라클을 설치할 때 입력했던 비밀번호를 입력하면 로그인이 된다. 

2. 테이블스페이스 생성하기

테이블스페이스는'myts'라는 이름으로 100MB 크기로 생성할 텐데, 논리적 개념인 테이블스페이스도 물리적으로는 파일로 존재하므로 실제 저장된 파일 이름과 위치가 필요하다. 여기서는 오라클이 설치된 폴더에 생성할 것이다. 

"C:\app\chongs\oradata\myoracle' 폴더에 'myts.dbf'라는 이름으로 생성할 것이다. 그리고 데이터가 늘어나 테이블스페이스가 꽉 찰 것을 대비해 '5MB'씩 자동 증가 옵션도 추가할 것이다. 생성 구문은 다음과 같다.

CREATE TABLESPACE myts DATAFILE
'C:\app\chongs\oradata\myts.dbf' SIZE 100M AUTOEXTEND ON NEXT 5M;

sqpplus에서 위 구문을 직접 입력하거나 복사한 다음 붙여 넣고 enter를 누르면 myts라는 테이블스페이스가 생성된다.

사용자 생성

1 사용자 생성하기

사용자를 생성해 볼 텐데 이를 위해서는 기본적으로 사용자명(사용자 아이디), 비밀번호가 필요하다. 그리고 추가 옵션으로 기본(디폴트) 테이블스페이스, 임시(temp)테이블스페이스를 명시해 줄 수 있다. 기본 테이블스페이스란 해당 사용자로 로그인한 뒤 테이블과 같은 각종 데이터베이스 객체가 저장되는 테이블스페이스를, 임시 테이블스페이스는 해당 사용자가 사용하는 디폴트 임시 테이블스페이스를 말한다. 기본 테이블스페이스는 이전에 만들었던 'MYTS', 임시 테이블스페이스는 'TEMP'를 사용하는 'ora_user'라는 사용자를 생성해 보자(여기에서 비밀번호는 편의상 'hong'으로 설정했다.)

CREATE USER ora_userIDENTIFIED BY hong
DEFAULT TABLESPACE MYTS
TEMPORARY TABLESPACE TEMP;

2 롤 부여하기

사용자 생성을 완료한 뒤에는 해당 사용자에게 롤(Role, 권한)을 부여해야 한다. 현 시점에서는 'ora_user'란 사용자로는 데이터베이스에 접속할 수조차 없고 'CONNECT'라는 롤을 부여받아야 오라클 데이터베이스에 접속할 수 있다. 오라클에는 미리 정의된 매우 많은 롤이 존재하는데 실습을 위해 'DBA'라는 롤을 부여하면 오라클에서 제공하는 웬만한 기능은 모두 사용할 수 있다.

GRANT DBA TO ora_user;

3 사용자 계정으로 DB에 접속하기

ora_user로 접속해보고 'select user from dual;'을 입력하면 현재 로그인한 사용자 이름이 출력된다. 여기까지 이상 없이 완료되면 테이블스페이스와 사용자가 제대로 만들어진 것이다.

미디어 쿼리란?

미디어 쿼리(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하위 속성을 이용해 애니메이션의 실행 시간이나 반복 여부 등을 지정합니다.