25일차 - CSS / flexbox, 선택자, 의사 클래스, 의사 요소, 상속과 공용 키워드, z-index, %와 미디어 쿼리, 변형과 전환, 애니메이션

레이아웃을 유연하게

flexbox

flexbox 란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.

flexbox 를 1차원 모델이라 부르는 이유는, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문이다.

 

 

 

flexbox 만들기

flexbox를 flex 컨테이너라고도 한다(요소들을 포함하기 때문이다).

flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex; 를 적용해야 한다.

flexbox에는 ‘주축(main-axis)’과 ‘교차축(cross-axis)’이 있다.

 

 

 

 

flex-direction

flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정 방향, 역방향)을 지정한다.

flexbox를 사용할 때 너비와 높이는 중요한 요소이다.

너비가 어느정도 되야 row-reverse를 사용할 수 있다.

높이가 어느정도 되야 column-reverse를 사용할 수 있다.

 

 

 

 

flexbox 다루기

flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다.

    • 주축 배치 방법 : justify-content

    • 교차축 배치 방법 : align-items

    • 교차축 개별요소 배치 방법 : align-self

    • 줄 바꿈 여부 : flex-wrap

 

 

주축 배치 방법 justify-content

• flex-start - 왼쪽 정렬
• flex-end - 오른쪽 정렬
• center - 가운데 정렬
• space-around - 모든 요소의 사이에 동일한 여백을 가진다.
• space-between - 양 끝에 정렬 후 동일한 여백을 가진다.
• space-evenly - 동일한 여백이 모든 요소를 감싼다. around는 요소 사이사이만 적용이라면 evenly는 요소 바깥도 동일하다.

 

교차축 배치 방법 align-items

• stretch - 기본값, 교차축 크기만큼 늘린다.
• flex-start - 시작점으로 정렬한다
• flex-end - 끝지점으로 정렬한다
• center - 가운데 정렬

 

교차축 개별요소 배치 방법 align-self

• flex-start - 교차축의 시작점으로 정렬한다.
• flex-end - 교차축의 끝지점으로 정렬한다.

 

줄 바꿈 여부 flex-wrap

• nowrap - 기본값, 영역이 줄어들면 콘텐츠영역이 찌그러진다.
• wrap - 영역이 줄어들면 아래에 새로운 행을 만들어 위치한다.
• wrap-reverse - wrap의 반대로, 앞에 있는 요소들이 새로운 행을 만들어 위치한다.

 

 

 

 

flexbox 내용 정리

• flexbox 란 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차 원(행 또는 열) 레이아웃 모델이다.
• 행 또는 열이 주축이 되어 요소의 정렬 방향을 결정한다.
• flex-direction 속성은 요소를 배치할 때 사용할 주축 및 방향을 지정한다.

• justify-content는 flexbox 주축에서의 요소 배치 방법을 정의한다.
• align-items는 flexbox 교차축에서의 요소 배치 방법을 정의한다.
• align-self는 flexbox 내 개별 요소의 교차축 배치 방법을 정의한다.
• flex-wrap은 개별 요소들의 도합 크기가 컨테이너 주축 길이보다 커졌을 때의 처리 방법 및 방향을 정의한다

 

 

 

---

선택자

선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보

 

특성 선택자 1. 컨셉

특성 선택자(속성 선택자)는 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.

 

왼쪽은 클래스 속성을 가지고 있는 요소를 선택한다.

오른쪽은 클래스가 “item”인 요소를 선택한다.

 

 

 

특성 선택자 2. 값 확인

기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.

 

클래스 값에 “it”가 포함되는 요소를 선택하기

클래스 값이 “it”로 시작하는 요소를 선택하기

클래스 값이 “it”로 끝나는 요소를 선택하기

 

 

결합 선택자 1. 컨셉

결합 선택자(결합자)는 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하 는 요소를 선택한다.

다음 두 가지로 구분할 수 있다.

    • 자손 결합자

    • 형제 결합자

 

 

 

자손 결합자

두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있다.

 

div 요소 안에 위치하는 모든 p 요소를 선택하기

div 요소의 바로 아래에 위치하는 모든 p 요소를 선택하기

 

 

 

형제 결합자

두 개의 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.

 

h1 요소의 뒤에 오는 형제 중 모든 p 요소를 선택하기

h1 요소의 바로 뒤에 오는 형제 p 요소를 선택하기

 

 

 

 

선택자 내용 정리

• 특성 선택자는 주어진 특성의 존재 여부나 그 값에 따라 요소를 선택한다.
• 특성 선택자는 값의 포함 여부, 포함 위치 등을 통해서도 선택할 수 있다.
• 결합 선택자는 여러 선택자를 결합하여 요소를 선택한다.
• 자손 또는 형제 중에서 특정 조건을 만족하는 요소를 선택할 수 있다

 

 

---

 

의사클래스

의사클래스(가상클래스)는 선택자에 추가하는 키워드로, 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.

 

의사클래스는 이러한 형식으로 사용한다.

 

h1 요소에 마우스 커서가 올라간동안에(hover) 글자를 빨간색으로 바꾼다.

 

 

 

의사클래스의 종류

 

 

 

의사클래스 내용 정리

• 의사클래스는 선택자에 추가하는 키워드이다.
• 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미이다.
• 콘텐츠 자체적인 내용 뿐 아니라 사용자와의 상호작용과 관련된 경우에도 스타일을 적용할 수 있어 유용하다(hover, active 등)

 

 

 

의사요소

의사요소(pseudo-elements)는 선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.

 

형식은 의사클래스에서 : 하나만 더 추가한 형태이다.

 

 

 

 

의사 요소 내용 정리

• 의사요소는 선택자에 추가하는 키워드이다.
• 의사요소는 요소의 특정 부분에만 스타일을 적용하고자 할 때 사용한다.
• HTML 문서가 포함하지 않는 개체(목록 구분점, 플레이스홀더 등)를 선택할 수 있어 무척 유용하다.

 

 

---

 

 

상속 그리고 공용 키워드

상속

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

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

 

 

인라인 요소는 대체로 상속이 가능하다.

블록이나 영역에 관한 요소는 대체로 상속이 불가능하다.

 

 

 

공용 키워드

모든 CSS 속성에 사용 가능한 키워드가 있다. 때문에 이를 ‘전역 값’이라 표현하기도 한다.

 

 

상속과 공용 키워드 내용 정리

• 상속은 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것이다.
• 상속 가능 여부는 속성마다 다르다.
• 모든 속성에 대해 사용 가능한 키워드 속성값이 있다.
• inherit은 상위 요소로부터 값을 물려받겠다는 의미이다.
• initial은 기본값(초깃값)을 사용하겠다는 의미이다.
• unset은 상위 요소로부터 물려받을 수 있으면 물려받고, 그럴 수 없으면 기 본값을 사용하겠다는 의미이다

 

 

---

 

z-index

z-index 속성은 요소의 쌓임 순서(stack order)를 정의할 수 있다.

정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식 으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성이다.

 

=> 위치 지정 요소(positioned element)란, position 속성이 정의되어 있는 요소를 말한다.

 

z-index 내용 정리

• z-index는 요소가 쌓이는 순서를 결정할 수 있다.
• 기본값은 auto이며, 정수값으로 정의한다.
• 정수값은 쌓임 맥락에서의 레벨을 의미하며, 값이 클수록 전면에 표시된다.

 

---

% 와 미디어쿼리

%

너비나 높이, 글자 크기 등을 정의할 때는 px, em, rem 외에 % 단위를 사용할 수 도 있다.

%는 부모 요소의 크기를 100%로 보고, 상대적인 크기를 적용한다.

속성또한 속성값의 부모가 된다.

 

 

미디어쿼리

반응형 웹에서, 개별 요소에 대한 간단한 크기 조율은 %만으로도 가능하나 한계가 있다.

따라서 반응형 웹을 만들 때는 미디어쿼리를 사용해 화면 크기에 일일이 대응하는 방식을 사용하는 경우가 많다.

 

미디어 쿼리는 다음과 같은 형식으로 사용한다.

 

 

미디어 쿼리를 사용한다면 

너비가 600픽셀보다 낮으면 주황색이지만, 600픽셀을 넘어가면 색이 변하도록 반응형 요소를 만들 수 있다.

 

---

 

변형 & 전환

변형(transform)

transform 속성은 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있 다. 이는 모두 좌표 공간에서의 값을 변경함으로써 이루어진다

값은 모두 함수로 적용된다.

CSS에서 각도를 표시할땐 deg라고 쓴다.

 

 

 

전환(transition)

transition 속성은 속성값에 변화가 나타날 때 변하기 전과 변한 후 상태 사이 에 동적인 변화를 추가할 수 있다. 단축속성이며, 하위속성은 다음과 같다.

 

transiton의 선언은 위치에 상관없다.

 

---

 

애니메이션(animation)

animation은 다수의 스타일을 전환하는 애니메이션 관련 하위 속성들에 대한 단축 속성이다.

여러 개의 프레임이 연결되는 듯한 동작을 구현할 수 있다.

애니메이션 동작의 여러 프레임을 정의하기 위해서는 CSS의 keyframes 모듈을 사용해야 한다.

단축지정 시 duration이 delay보다 우선 적용된다.