[CSS] CSS 정리 (4)

 

 

 

지금까지 CSS를 사용해 웹 페이지를 아름답게 꾸미고 시각적으로 보기 좋은 웹 페이지를 만드는 방법에 대해 배웠다.

이제 웹 페이지간의 상호작용에 집중해 애니메이션 동작을 구현해보자.

 

transform 

 

물체의 크기 형태 위치를 바꾸는 것을 변형이라고 한다. CSS 변형을 이용해 좀 더 동적 웹 페이지를 만들어보자.

 

변형을 적용하기 위해 transform 속성과 속성에 해당하는 다양한 함수를 사용한다.

 

1. translate() 함수

 

 

상자에 커서를 가져가면 translate함수에 맞춰서 상자를 이동시킨다,

x y 좌표를 사용해 2차원 간의 이동을 설정할 수 있고, z좌표까지 사용하면 이동을 3차원으로 확장할 수 있다.

 

2. scale() 함수

 

 

요소를 지정한 크기만큼 확대하거나 축소할 수 있다.

2차원과 3차원 모두 가능하다.

 

3. rotate() 함수

 

 

 

라디안이나 각도를 입력해 요소를 회전시킨다.

회전할 때 변형하는 요소의 부모 요서에 perspective속성을 함께 사용하면 원금감을 줄 수 있어 회전을 입체적으로 표현할 수 있다. perspective 값은 원래 위치에서 사용자 방향으로 얼마나 이동하는지를 픽셀 단위로 표현한다.

 

4. skew() 함수

요소를 지정한 각도만큼 비틀어서 왜곡한다. 

 

 

transition

 

transform으로는 요소를 이동, 회전, 왜곡시켜서 비교적 단순하게 변형했다.

transition을 사용하면 요소의 스타일을 완전히 다르게 변경할 수 있다.

 

1. transition-property 속성 

트랜지션을 적용할 대상을 지정한다. 

all으로 설정해 해당 요소의 모든 속성에 적용시키거나, non으로 설정해 아무 속성도 바뀌지 않게 설정하거나, 속성 이름을 지정해 트랜지션을 적용할 대상을 지정할 수 있다.

 

2. transition-duration 속성

대상을 지정했으면 트랜지션이 진행되는 시간을 지정해야 한다.

이 속성을 적절하게 조절해 자바스크립트를 사용하지 않고도 애니메이션 효과를 구현할  수 있다.

 

3. transition-timing-function 속성

트랜지션이 진행되는 시간을 설정할 때, 어느 부분에서 빠르고 느리게 진행할 지 설정한다.

속도는 미리 정해진 키워드나 값을 직접 입력해서 설정할 수 있다.

• ease : 기본값. 처음에는 느리고 빨라지다가 마지막에 다시 느려진다.
• linear : 일관된 속도로 진행한다.
• ease-in : 느리게 시작한다.
• ease-out : 느리게 끝낸다.
• ease-in-out : 두개 합친거
• cubic-bezier(n,n,n,n) : 직접 값을 지정한다. (0<=n<=1)

4. transition delay 속성

트랜지션 효과를 언제부터 시작할 건지 설정한다. 기본값은 0

 

5. transition

transition 관련 속성은 이거 하나로 통일해서 사용할 수 있다.

 

 

트랜지션을 적절하게 응용하면 쇼핑몰을 구상할 때 hovering시 상품 정보를 보여주는 등 다양한 효과를 줄 수 있다.

하지만, CSS에는 animation속성이 있고 이 속성을 활용하면 트랜지션보다 더 쉽고 간편하게 애니메이션을 만들 수 있다. animation속성을 사용해서 애니메이션을 만들어보자.

 

animation

웹 요소의 특정 지점에서 스타일을 바꾸면서 애니메이션을 구현한다. 여기서 특정 지점을 키프레임이라고 하고, animation속성과 그 하위 속성을 이용해서 애니메이션을 구체화한다.

 

1. @keyframes, animation-name

키프레임은 애니메이션의 스타일이 바뀌는 특정 지점이고, animation-name으로 애니메이션의 이름을 설정해서 여러 가지 애니메이션들을 구별한다. 

키프레임을 사용하는 방법에 대해 알아보자.

키프레임에서 애니메이션의 중간 지점을 추가하려면 시작 위치를 0% 마무리 위치를 100%로 설정하고 50%위치에 키프레임을 추가하는 방식으로 사용한다. 

 

2. animation-duration 

애니메이션을 재생할 시간을 설정한다.

기본값이 0이므로 속성값을 꼭 설정해야 한다.

 

3. animation-direction

애니메이션의 진행 방향을 조작한다.

• normal : from to 방향으로 진행한다. 기본값.
• reverse : 말 그대로
• alternate : 홀수 번째는 normal, 짝수 번째는 reverse로 진행한다.
• alternate-reverse : 말 그대로

4. animation-iteration-count

애니메이션을 반복해서 보여 줘야 할 때 사용한다.

속성값을 infinite로 설정하면 애니메이션을 무한으로 반복한다.

 

5. animation-timing-function

트랜지션과 동일하게 사용한다.

 

6. animation

역시나 한 번에 사용할 수 있다.

 

 

box태그에서 애니메이션의 이름과 지속 시간을 설정하고, 키프레임에서 어떤 애니메이션을 실행할 지 설정했다.

 

 

 

핸드폰, 태블릿, 컴퓨터 등.. 우리는 웹사이트에 접속할 때 다양한 전자기기를 사용한다. 

 

지금까지 배운 html과 css를 사용해 컴퓨터 화면에 맞춰진 웹사이트는 제작했는데.. 이 웹사이트가 다른 환경에서도 제대로 동작할까?

 

사용자의 접속 환경에 맞춰 사이트의 레이아웃을 적절하게 바꿔 보여 주는 것을 반응형 웹 디자인 이라고 한다. 

반응형 웹 디자인을 만드는 방법에 대해 알아보자.

 

뷰포트

 

뷰포트는 모바일 환경에서 실제 내용이 표시되는 영역을 말한다.

컴퓨터에 맞춰 제작한 웹사이트를 모바일 환경에서 접속하면 내용이 작게 표시되는데, 이 작업을 뷰포트가 수행한다.

 

웹사이트를 제작할 때 웹페이지 너비를 320px로 맞춰 제작하더라도 기본 모바일 브라우저의 뷰포트 너비가 980px이기 때문에 웹사이트가 의도한대로 표시되지 않는다. 

모바일 환경에서도 제대로 동작하는 웹사이트를 만들기 위해 뷰포트 개념을 꼭 알아두자.

 

 

<meta name = "viewport" content = "속성 = 값", ...>

 

뷰포트를 지정하는 기본형은 위와 같다.

속성으로는 width, height, user-scalable(확대 축소 가능 여부) initial-scale(초기 확대 축소 값) 을 사용한다.

 

뷰포트가 도입되면서 CSS에서 px과 %단위 말고 뷰포트를 기준으로 하는 단위를 사용할 수 있게 됐다.

 

• 1vw : 뷰포트 너비의 1%
• 1vh : 뷰포트 높이의 1%
• vmin : 뷰포트의 너비와 높이 중 작은 값의 1%
• vmax : 뷰포트의 너비와 높이 중 큰 값의 1%

 

미디어 쿼리

 

미디어 쿼리는 CSS모듈 중 하나로 해상도에 따라 서로 다른 스타일 시트를 적용해 주는 역할을 한다.

 

@media mediatype and (condition) and (condition) {
  ....
}

 

 

미디어 유형으로 all, print, screen, tv, aural 등을 사용할 수 있고 and로 조건을 붙여 특정 미디어에서 어떤 CSS를 적용할 것인지 지정한다.

 

모바일의 경우 화면의 회전도 따로 고려해야 하는데, 여기서는 orientation속성을 사용한다.

 

화면에 따라 서로 다른 CSS를 적용할 분기점을 중단점이라고 한다. 

시중의 모든 전자기기를 반영할 수는 없으니, 모바일, 태블릿, 데스크톱 정도로만 구분하고 제약 조건이 더 많은 모바일의 레이아웃을 기본으로 해서 CSS를 만든다. (모바일 퍼스트 기법)

 

그리드 레이아웃

 

반응형 웹 디자인을 사용해 화면 너비에 따라 웹 문서 요소를 재배치할 때 기준이 되는 레이아웃을 그리드 레이아웃이라고 한다. 

 

그리드 레이아웃을 적절하게 사용하면 시각적으로 안정된 디자인을 만들 수 있고, 업데이트가 편한 웹사이트를 만들 수 있으며, 웹사이트의 요소를 자유롭게 배치할 수 있다.

 

1. Flexible Box Layout

그리드 레이아웃을 기본으로 해 각 박스를 원하는 위치에 따라 배치한다. 수평과 수직 중 주축을 지정하고 화면 너비를 넘어가면 다음 줄로 이동하는 방식으로 화면을 구성한다.

 

 

먼저 배치할 요소들을 감싸는 부모 요소를 플렉스 컨테이너(파란 박스)로 만든다. (display속성을 이용해 알려줘야 한다)

다음 내부 요소들을 배치한다.

 

 

2. CSS Grid Layout

Flexible Box보다 좀 더 유연하게 배치할 수 있는 레이아웃이다. 수평과 수직 방향을 자유롭게 설정하고 화면을 구성할 수 있다.

 

Flextible Box가 1차원이라면 CSS Grid는 2차원이라고 생각할 수 있다.