231103 [Day34] CSS 심화 (1)

Float - 수평 정렬

 

float을 사용하면 container가 정상적으로 작동하지 않는데 옵션(4)을 새로 하나 만들어서 float 해제(clear)를 해야한다. => 비효율적!!!

 

 

컨테이너 속성에 overflow 추가 => 넘침을 제어해주는 속성, float과 아무런 관계를 가지지 않는다.

 

 

가상요소선택자 after => html에 가상요소를 만들어서 css속성을 추가할 수 있다.

 

clearfix요소의 가상요소 after는 내부의 가장 뒷쪽에 가상의 요소(형제)를 만들게된다.

=> 컨텐트는 없고, 블록요소로 만들어져서 오른쪽,왼쪽 모두 해제가 가능한 both를 추가함.

=> clearfix가 부여된 컨테이너에는 float을 사용하는 요소(item)만 들어있어야 한다.

 

@ .container>.item{$}*3 + tab키 누르면 자동생성

 

 

float--right 는 오른쪽부터 쌓인다.

 

숫자를 순서대로 보이게 하기위해서는 3,4를 float--right로 묶고 속성을 float--left로 바꿔준다.

⭐️ float속성을 사용할 때 부모요소에 꼭 clearfix를 부여해야한다.

 

 

float은 block요소이기 때문에 inline을 적용할 수 없다.

float 속성이 부여되어 있어도 flex, grid 를 가지고 있으면 display가 block으로 바뀌지 않는다.

 

 

Position - 요소의 위치 특성

 

absolute => 부모요소를 기준으로 배치한다는 뜻

absolute를 가지고 있는 요소가 기준으로 삼을 수 있는 영역도 지정해주어야 함 => 구조적 부모요소에 위치의 기준이 될 수 있도록 position 값을 넣어주어야 한다. => 넣을 수 있는 값은 static(기본값)을 제외한 relative, absolute, fixed, sticky 

 

 

fixed => viewport를 기준으로 배치한다는 뜻,  단, 요소의 조상 중 하나가 transform, perspective(요소의 3차원 변환에 대한 원근효과를 준다), filter 속성 중 어느 하나라도 none이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼는다.

 

 

화면에 특정 효과들을 주기 위해 perspective, transform 등을 사용했을 때 속성들이 다른 요소의 위치 기준에 영향을 줄 수 있다.

 

쌓임 맥락(Stacking Context)

⭐️z-index(더 위에 쌓을 수 있음)는 position에 static(기본값)을 제외한 relative, absolute, fixed, sticky 에서 동작할 수 있다.

z-index의 값이 auto가 아니라면 새로운 쌓임 맥락을 생성

 

 

⭐️position에 absolute, fixed 값을 사용하여 display를 inline으로 해도 자동으로 block으로 변경된다. 

 

 

Flex - 1차원 레이아웃 구조 (수평, 수직 정렬)

 

Flex container - 부모

display : flex , inline-flex

(flex는 block => 수직으로 쌓이고, 가로로 늘어나려고 함 / inline-flex는 inline => 수평으로 쌓이고, 가로 너비는 줄어들려고 시도한다.)

 

flex-direction : row(줄), column(칸), row-reverse, column-reverse

 

주축 main-axis / 교차축 cross-axis => 위 사진에서는 y축으로 쌓이기 시작하기 때문에 y축이 주축, x축이 교차축이다.  

1 아래쪽을 flex start, 3 위쪽을 flex end 라고 한다. (row로 되어있으면 1 왼쪽이 flex start, 컨테이너의 끝 부분이 flex end)

 

flex-wrap(줄 바꿈) : nowrap(줄바꿈x), wrap(줄바꿈), wrap-reverse(반대로)

 

 

 

justify-content : 주축의 정렬 방법을 설정해줌

• flex-start
• flex-end
• center
• space-between : 첫번째 아이템은 맨앞, 마지막 아이템은 맨뒤에 두고 사이 너비를 균등하게 배치
• space-around : 아이템 양옆에 공간을 균등하게 둠, 맨 앞과 맨 뒤에도 공간이 있다는 것이 특징
• space-evenly : 행축 여백을 동일한 너비로 배치

 

align-items : 교차축에 대한 정렬 (1줄)

• stretch
• flex-start
• flex-end
• center
• baseline : 문자의 기준선

 

item에 높이를 주지않으면 align-items: stretch가 기본값이기 때문에 위 아래로 꽉 차게된다.

 

baseline 예시

 

align-content : 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스의 교차축 또는 그리드의 블록 축을 따라 배치하는 방식을 결정 (2줄 이상)

• stretch
• flex-start
• flex-end
• center
• space-between
• space-around

 

기본값인 stretch가 들어가있다. 컨테이너는 절반으로 나누어 두개의 줄을 사용해서 아이템을 출력하고 있다.

 

 

align-content는 2줄 이상 아이템들이 쌓여져 있을 때 동작 가능 => flex-wrap: wrap으로 두줄을 만들 수 있음.

 

Flex items - 자식

 

flex-grow : 증가되는 너비의 비율, 기본값은 0

 

=> 실제로 1:2 비율은 아니다. 이유는 가로 너비를 100px로 지정을 해두었기 때문 => 100px 이외의 나머지 부분이 1:2:1이 된다.

정확하게 1:2:1 비율로 하고 싶으면 width속성을 지워주면 된다.

 

 

부모의 너비가 없다면, 자식들은 너비를 채우게되는데 flex-grow가 선언되어있는 아이템만 줄었다 늘어났다 한다.

=> 아이템1, 3은 늘어나지 않기 때문에 flex-grow가 1이든 2이든 상관없다.

 

flex-shrink : 감소되는 너비의 비율, 기본값은 1

 

 

flex-basis : 기본 너비를 정해주고 width를 덮어씌운다. 기본값은 auto

 

값이 auto가 아니면 지정한 width, height는 적용되지 않는다.

 

flex-basis에 값을 지정해주면 width는 무시되고, flex-basis를 0으로 주었기 때문에 기본너비가 0px이니까 기본너비가 없는 상태에서 증가 너비가 1:1:2로 만들어지는 것이기 때문에 너비의 비율을 정확하게 할 수 있다.

 

flex(단축속성) : grow shrink basis 순서대로 값을 넣으면 따로 값을 주지 않아도 한 번에 값을 줄 수 있다.

 

flex: 1; 과 flex: 1 1 auto; 는 다르므로 주의!!! => basis에 아무값도 주지않으면 auto가 아닌 0이 들어간다.

=> 그냥 개별속성을 사용하는 것을 추천! 

 

 

order : flex items 의 순서를 정해준다. 기본값은 0

 

숫자가 커지면 순서가 밀리게 된다. 작을수록 앞으로 이동하며 음수 값도 사용가능하다.

 

 

align-self : Flex container의 align-items 속성을 개별적으로 사용할 때 유용하다. align-items의 값을 상속 받는다.

 

아이템 하나만 교차축 정렬한다.

 

 

gap : 아이템들의 간격을 정해진 값 만큼 벌려준다. (유용하지만 최신기능이라 지원하지 않는 브라우저도 존재)

 

 

모든 아이템에 margin-right를 주고, 가상선택자로 마지막 자식에 margin-right: 0; 을 주면 gap과 같은 기능을 사용할 수 있다.

 

 

Grid - 2차원 레이아웃 구조 (행축, 열축)

 

grid-template-rows(columns) : 행과 열 개수(너비)를 지정한다.

 

 

Grid Container 1

 

inline-grid : inline-flex와 비슷하다. 가로 너비는 줄어들려고 시도한다.

 

inline은 글씨처럼 취급하기 때문에 띄어쓰기처럼 되어있다.

 

 

fraction (fr 단위)

1fr 1fr 1fr은 3개의 열이 만들어지고 1 공간비율(fraction)을 갖는다.

 

=> 1fr을 연속해서 쓰는 것은 비효율적! 

 

 

repeat(개수, 값)

repeat(6, 1fr); 을 사용하면 1fr을 6번 반복한다는 뜻이다.

 

 

grid-auto-rows(columns)

 

5,6,7은 사용할 수 없는 템플릿이다. => grid-auto-rows: 100px 를 사용하여 높이를 100px로 맞춰준다.

 

 

⭐️

grid-template-rows(columns) : 명시적

grid-auto-rows(columns) : 암시적

 

✨grid-column을 사용하여 5번을 4line에 맞추어 준다.

 

 

grid-auto-flow : dense => 빈공간을 매우면서 정렬하겠다는 의미

 

✨grid-column : span 3;

*** span : 아이템이 사용할 수 있는 cell이 몇개로 확장될 수 있는지 지정해주는 키워드

 

 

오른쪽 위 2개의 cell에 빈 공간 => grid-auto-flow: dense ; // row(기본값), column으로 하면 열축을 기준으로 지그재그 형태

grid-auto-flow: (row) dense / column dense도 가능 (열축으로 쌓일 때 빈공간을 메워줌)

 

 

✨grid-column: 2 / span 2;

=> column의 2번 라인부터 시작해서 2개의 cell을 확장해서 아이템을 배치하겠다는 의미

 

grid-auto-flow: column dense;

빈 공간을 메우기 위해 가장 가까운게(3) 이동한다. +열 방향으로 쌓여있음.

 

Grid Container 2

명시적 행, 명시적 열을 만든다. => 주황색 부분 = grid contents

 

grid 정렬

flex 와 마찬가지로 각 축에 빈 공간이 존재할 때!! justify-content(행축, 수평), align-content(열축, 수직)를 사용할 수 있다.

• normal, stretch; : 설정해도 각 열을 70px로 지정했기 때문에 stretch(늘어남)을 무시한다.
• start
• center
• end
• space-between
• space-around
• space-evenly 

grid items 정렬

아이템에 width, height를 설정하면 cell보다 작아진다.

 

justify-items: center; => grid cell 내부에서 행축의 가운데 정렬

align-items : 열축에 대한 정렬

 

=> normal(stretch), start, end, center만 가능 (space X) / container에 작성해야함

 

하나의 그리드 안에 셀들이 존재하는데 한 셀 안에 들어있는 아이템이 셀보다 크기가 작을 때 빈공간이 만들어지면 셀 내부 정렬을 해줄 수 있다.

 

Grid Container 3

grid-area 아이템에 이름을 정해준다.

 

grid-template-areas를 사용하여 레이아웃을 그린다.

 

 

아이템들 사이에 여백을 준다. => 여백을 Line(Gutter)이라고 부른다. (단축속성)

=> grid-gap:10px 40px; => 행 사이는 10px, 열 사이는 40px 간격

grid-row-gap, grid-column-gap (개별속성)을 사용할 수도 있다.

+ grid를 안써도 그대로 적용 가능(하위호환성 고려하면 grid 사용해야함)