CSS 이어서..

현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. 변형과 전환 효과

변형과 transform 속성

웹 요소에는 변형을 적용할 수 있다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 요소의 x축과 y축을 기준으로 바꾼다.
변형을 적용하기 위해서는 CSS의 transform 속성을 사용하는데, 여기에는 CSS가 지원하는 다양한 변형 관련 함수들을 속성값으로 지정한다.

transition 속성을 이용한 변화 ✍️

transform 속성은 요소의 좌표 값을 변경하여 크기나 위치를 변형하는 데 사용된다.
transition 속성은 스타일 속성을 부드럽게 변화시키며, 실행 시간, 속도, 지연 시간 등을 지정해 다양한 애니메이션 효과를 줄 수 있다.

transition 속성의 실행 시간(duration)을 지정하면 원하는 시간 동안 변화가 진행된다.
transition-timing-function 속성을 추가하면 속도 변화를 조절할 수 있으며, 주로 키워드 값을 사용한다.

실습

2. 애니메이션 효과

애니메이션의 사전적 정의는 ‘움직이지 않는 물체를 움직이는 것처럼 보이게 만드는 촬영 기법 또는 그렇게 만들어진 영화’이다.
CSS는 웹페이지 상의 콘텐츠에 TV 애니메이션과 같은 동적 움직임을 구현할 수 있도록 @keyframes 모듈과 animation 속성을 지원한다.

@keyframes ✍️

애니메이션을 표현하는 여러 개의 프레임은 @keyframes 모듈을 이용해 정의한다.
백분율을 사용해 프레임을 나누거나, 별도의 키워드로 간단하게 설정할 수도 있다.

애니메이션(animation)

animation은 단축 속성이며, 하위 속성들을 함께 지정하면 애니메이션의 실행 시간이나 방식 등을 추가로 정의할 수 있다.

실습!

3.상속과 공용키워드

상속

상속(Inheritance)이란 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미
한다.

상위요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않은 속성도 있다.

https://www.w3.org/TR/CSS21/propidx.html

공용 키워드 ✍️

CSS는 스타일 속성의 상속 여부를 제어할 수 있는 3개의 전역 키워드를 지원하며, 이를 공용 키워드라고 한다.

실습

4.반응형 웹과 뷰포트 단위

반응형 웹

반응형 웹이란 다양한 기기나 브라우저 크기에 맞춰 구성이나 크기를 변경하며 반응하는 웹 문서 또는 이를 위한 기법을 뜻한다.

뷰포트

뷰포트(viewport)란 현재 화면에 보여지고 있는 영역을 의미한다.
기기별로 뷰포트가 다르기 때문에, 동일한 웹페이지라도 기기에 따른 배율 조정이 발생해 화면의 크기가 다르게 보이는 현상이 나타난다.

뷰포트 단위 ✍️

뷰포트 크기를 기반으로 값을 계산하여 크기를 결정한다.

실습

5. 미디어 쿼리 ✍️

미디어 쿼리(media query)는 미디어 타입을 인식하고, 콘텐츠를 읽어들이는 기기나 브라우저의 물리적 속성을 감지할 수 있는 유용한 모듈(기능)이다.

• 미디어 타입
• 조건에 대한 물음(쿼리)
  

미디어 쿼리에 입력할 수 있는 미디어 타입과 쿼리의 종류는 무척 다양하다!
그러나 주로 사용되는 것들은 거의 정해져 있지 않으니 걱정은 하지 말자.

실습!

6. 모듈화 디자인 ✍️

컴포넌트를 만든다.

반응형 웹 개발의 대세는 '페이지만들기'에서 '컴포넌트 만들기'로 이동했다고 해도 과언이 아니다. 웹 개발(또는 프로그래밍)에서 컴포넌트(Component)란 독립적이고 재사용 가능한 모듈을 뜻한다.
컴포넌트 기반으로 웹을 제작하면 마치 블록 장난감을 조립하듯 각각의 컴포넌트 간 조합을 이용해 화면을 구성할 수 있어 효율이 좋아진다.

모듈화 디자인의 이점

• 반응형 컴포넌트를 만들고, 그것들을 조립해 하나의 페이지를 만들면 페이지는 자연스럽게 반응형 페이지가 된다.
• 스타일 재사용이 용이하다. 필요한 경우 추가 스타일을 적용하면 된다.
• 페이지의 일관성을 유지하기가 용이하다.

7. flexBox

CSS 레이아웃

레이아웃(layout)이란?
‘구성 요소를 공간에 효과적으로 배열하는 일, 또는 그 기술’
CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술이다.
CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며, 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다.

대표적인CSS레이아웃기술들(출처:CSS레이아웃입문서,MDN)

• 일반적인 문서 흐름
• display 속성
  - 플렉스 박스
• 그리드 레이아웃
• float 속성
• position 속성
• 기타 등등

플렉스박스(flexbox) ✍️✍️

플렉스박스는 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다.
플렉스박스 방식에서, 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호작용을 통해 결정된다.

• 플렉스 컨테이너: 플렉스박스 방식으로 레이아웃을 결정할 요소
• 플렉스 아이템: 플렉스 컨테이너 내부에서 플렉스박스 방식으로 배치되는 요소

플렉스박스 방식을 사용하기 위해 플렉스 컨테이너를 만들어요!


플렉스 컨테이너가 인라인 레벨 요소이길 원한다면

플렉스박스 방식은 두 개의 축을 기반으로 동작한다. 그중 하나의 축을 주축 삼아 요소를 배치하는데, 주축의 기본값은 가로 방향(왼쪽에서 오른쪽)이다.

8. flexbox관련속성 ✍️✍️

flex-direction

플렉스 컨테이너의 주축을 결정하는 속성.
행은 가로 축을, 열은 세로 축을 주축으로 한다.

flex-wrap

플렉스 아이템들이 강제로 한 줄에 배치되게 할 것인지, 아니면 가능한 영역 내에서 벗어나지 않고 여러 행으로 나누어 표현할 것인지 결정하는 속성이다.

justify-content

플렉스 아이템들이 플렉스박스 주축을 따라 배치될 때, 요소 사이의 공간을 분배하는 방식을 결정한다.

align-items

플렉스 컨테이너의 교차축 위에서 플렉스 아이템들이 어떤 식으로 정렬될 것인지를 결정한다.

align-self

각 각의 플렉스 아이템이 교차축에서 어떤 식으로 정렬될 것인지를 스스로 결정한다.

align-content

교차축 위에서 justify-content와 동일하게 사용할 수 있는 속성입니다.
다음 두 조건이 만족되면서 여유 공간이 있을 때만 동작할 수 있습니다.

• flex-wrap의 값이 wrap으로 지정되어 있을 때
• 아이템을 배치하기 위해 필요한 공간보다 플렉스 컨테이너가 더 클 때

flex-grow & flex-shrink & flex-basis

• flex-grow: 플렉스 아이템이 기본 크기보다 더 커질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

• flex-shrink: 플렉스 아이템이 기본 크기보다 더 작아질 수 있는지를 결정하고, 플렉스 컨테이너 내부에서 할당받을 수 있는 공간을 상대적으로 정의할 수 있는 속성

• flex-basis: 플렉스 아이템의 초기 크기를 지정하는 속성

order

플렉스 아이템의 배치 순서를 설정할 수 있으며, 지정한 숫자에 맞춰 오름차순으로 배치가 진행된다. 코드에 영향을 끼치는 것이 아닌, 보여지는 순서에만 영향을 준다.

최종 실습

끝맺음

과제가 점점 어려워 진다. 플렉스가 제일 문제야!!!!
곧 자바스크립트도 해야하는데.. 완전 백지 상태..ㅠㅠ
강의 볼 때는 쏙쏙 이해했는데.. 과제할 때 다 잊어버리고..ㅠㅠ 과부화상태이다..