Portfolio

목차 1.CSS 1-1. CSS Float 속성의 clear 작업 하기 1-2 CSS float의 왼쪽 오른쪽 동시에 쌓기 1-3. float은 어떤 경우에 display값을 block으로 바꾸는 성질이있다.2. CSS- Position 2.1 position: absolute 2-1. position: fixed;2-2. 쌓임 맥락 고려하기 (링크)2-3. position: absolute, fixed 일 때, display가 block으로 변경되는 경우 3. Flex 3-1. Flex Container 3.2 Flex 요약

1.CSS

1-1. CSS Float 속성의 clear 작업 하기

예전에 수평정렬을 위해 많이 사용했지만, 현재는 flex의 등장으로 사용이 많이 줄어듬

💡

float 속성은 따로 처리를 하지 않으면 상위요소(container)가 감싸지 못하는 현상 생김 → 마지막요소에서 float을 해제 해주는 작업 필요(clear)

해결방법

1번 → 권장되지 않음

container에 overflow: hidden 속성 주기
float과 전혀 상관없는 overflow 속성을 통해 해결하는 것 근본적인 해결책이 아님

2번 → 권장되지 않음

마지막 요소를 만들어 clear: left 속성 주기
실제 필요하지 않은 Element를 생성해주는 다는 것은 좋지 않은 접근

3번 → 권장

container에 상요소 선택자 ::after 를 이용해 html 요소를 추가하기
.clearfix::after { content:””; display:block; clear:both;}

주의사항

float 속성을 사용하는 Item들만이 container를 구성하고 있어야만 한다.
하나의 container안에 float과 float이 아닌 속성의 요소들이 섞이면, 위치가 제어할 수 없게됨

float들만 하위요소로 가지는 container를 따로 만들어주고, 해당 container에 clearfix class를 걸어주어 해결

1-2 CSS float의 왼쪽 오른쪽 동시에 쌓기

Tobe

주의사항

1번

float:right 속성의 경우, 오른쪽에서 부터 차례대로 요소들이 쌓이게 됨

12 - 43 의형식
따라서 3-4를 하나의 div로 묶어 float:right 속성을 주고, 그 안에서 내부 요소를 float:left 속성을 주어 원하는 레이아웃을 만들수 있다.

2번

하위요소의 float—right container의 경우에도 당장은 레이아웃이 찌그러지지 않지만, 추후 복잡한 상황을 대비하여, 항상 clearfix를 통해 float container에 clear 옵션을 설정해주도록 한다.

1-3. float은 어떤 경우에 display값을 block으로 바꾸는 성질이있다.

어떤경우

float이 적용된 element의 display가 inline, table 관련일 경우
float이 적용된 element의 display가 flex, grid인 경우는 적용 안됨

즉 float을 사용하는 경우, inline 요소를 사용할 수 없게되고, 해당 요소에 diplay:block; 을 명시해주지 않아도 된다

참고

inline의 특성

가로와 세로 넓이가 가장 작아지려고한다.
가로와 세로 넓이를 더이상 가질 수 없다

2. CSS- Position

💡

position은 element의 위치를 적용하는 속성

2.1 position: absolute

목표

CSS 작성


position: absoulute;
right:0;
bottom:0

position: absolute

부모노드 기준으로 현재요소의 위치를 결정

View (화면 오른쪽아래로 가버림)

문제원인

부모요소의 position이 정해지지 않아, 자식요소에서 기준점을 window로 설정했기 때문

해결

부모요소의 position을 지정해주어야함
.parent{ position: relative }

View

2-1. position: fixed;

💡

viewport를 기준으로 위치를 정한다

예외상황

부모에서 transform: -- 속성 사용 시, 해당 요소의 fixed position 이 해제되며, absolute 속성의 부모기준이 달라질 수 있다..

원인

단, 요소의 조상 중 하나가 transform, perspective, filter 속성 중 어느 하나라도 none 이 아니라면 뷰포트 대신 그 조상을 컨테이닝 블록으로 삼습니다. by MDN

2-2. 쌓임 맥락 고려하기 (링크)

💡

쌓임 맥락은 z축 관리를 뜻하며, 우선순위가 높은 것이 화면 위에 쌓이도록 한다.

변화속성을 사용하는 방법

transform: scale(1.5);opacity: .5; , filter: ~, perspective: ~ 등 사용할 경우, 순서에 따라 위로 위치하게 됨

z-index를 이용하는 방법

z-index 유의사항

기본값인 static을 제외한 position: relative, absolute, fixed, sticky 속성을 가지고 있어야만 z-index가 적용됨

flex, grid의 자식요소의 경우 사용가능

2-3. position: absolute, fixed 일 때, display가 block으로 변경되는 경우

💡

display:inline 인 요소에서 position: absolute 혹은 position:fixed 가 적용되면 display:block으로 변경된다.

inline 설정했지만 적용되지 않는다. (fixed)

3. Flex

Flex는 각각의 요소를 수평,수직 정렬를 하기 위한 속성이다. 1차원 레이아웃 작업을 위해 사용됨

부모는 Flex container, 자식은 Flex items 라고 말한다.

3-1. Flex Container

속성1. display

display: flex

block 요소의 특징을 가짐 (위에서 아래로 수직으로 쌓임, 가로의 모든 넓이를 가짐)

display: inline-flex - “잘 사용하지 않음”

inline 요소 특징을 가짐 (수평으로 쌓이려고함, 가로는 최대한 줄어들려고 함, 글자를 다룰 때 사용)

container들 사이의 최소한의 띄어쓰기 공간이 발생함 (글자취급하기 때문에)

html요소 사이의 줄바꿈을 없애면, 띄어쓰기가 없어짐

속성2. flex-direction

주축과 교차축

주축: main-axis

교차축: cross-axis

주축과 교차축은 상대적인 개념으로, x,y 중 한 축이 주축이 되면, 나머지 한 축이 교차축이 된다.

flex-start, flex-end : 축으로 부터 시작지점과 끝 지점 (상대적으로 변화가능)

flex-end는 자식 아이템요소의 끝이아닌, container의 끝 부분을 의미한다.

flex-direction: row (행,줄)

왼쪽에서 오른쪽으로 수평정렬 하도록 함 (defalut: row)

flex-direction: row-reverse

오른쪽에서 왼쪽으로 축이 생겨, 수평정렬 하도록 함

flex-direction: column (열, 칸)

위에서 아래쪽으로 수직정렬 하도록 함

flex-direction: column-reverse

아래쪽에서 위쪽방향으로 축이 생겨, 수직정렬 하도록 함

속성3. flex-wrap : 줄바꿈에 대한처리

flex-wrap: nowrap

default 값으로, 기본적으로 줄 바꿈 처리를 하지 않음

container의 width에 맞게, flex-Items들이 같은 비율로 줄어들게 된다.

기존 100px이던 자식요소가 container크기에 맞게 80px로 줄어들음

flex-wrap: wrap

줄 바꿈 처리를 하도록 함

container의 width가 모자르다면, flex-Items의 width는 유지하기 위해 줄 바꿈되어 위치함

flex-wrap: wrap-reverse

wrap-reverse의 경우, 줄이 반대로 뒤집어져서 위치함

속성4. justify-content: 수평 정렬 지정하기

💡

Container에서 자식(flex-Items)들의 수평정렬을 지정하는 옵션

justify-content: flex-start

default 값으로, 축의 시작 부터 끝 방향으로 정렬 됨 (반드시 왼→오 아님!)

justify-content: flex-end

축의 끝방향 부터, 시작방향으로 정렬 됨

justify-content: flex-center

축의 가운데로 모이도록 정렬 됨

justify-content: space-between

가장 첫 번째 아이템을 주축의 시작점, 가장 마지막 아이템을 주축의 끝 점에 두고, 나머지 아이템들을 균일한 간격으로 위치하도록 함

justify-content: space-around

첫번째 아이템의 왼쪽과, 마지막 아이템의 오른쪽에도, 간격을 주도록 하는 옵션

속성5. align-items: 수직 정렬하기

💡

height:auto는 기본값이고 부모의 높이를 상속받는다.

align-items: stretch

flex에서는 align-items: stretch 가 기본값이며, flex-item들이 container의 높이만큼 최대한 늘어난다.

align-items: flex-start, align-items: flex-end

주축이 아닌, 교차축(y)의 시작부터 정렬하도록 함

flex-end의 경우, 교차축의 끝점(아래)부터 시작점(위)로 정렬하게 함

align-items: center

교차축 기준 가운데 정렬한다.

align-items: base-line

문자 기준선을 기준으로 정렬한다.

속성6. align-content: 2줄이상이 쌓여있을 때, 해당 줄의 교차축 기준 위치를 지정한다.

defalutr값 align-content:stretch

상황 :

item의 width의 합보다 container의 width가 작을 때, flex-shrink:1 이라는 기본속성 때문에, 자동으로 flex-item의 width가 줄어든다.
items의 길이가 길어, flex-wrap: wrap을 통해 2줄 이상의 flex container를 기준
2줄의 flex-Items의 간격이 발생한다. (align-items:stretch 가 defalut값이여서, container의 높이를 늘려서 나누어가지기 때문)

align-content: flex-start 적용

교차축의 시작지점으로 부터 공간 없이 쌓이도록 함
↔ align-items와 의 차이

align-items는 한 줄을 기준으로 각각 해당 줄에서 적용되지만, align-content는 모든 줄을 대상으로 일괄적용되어 더 높은 우선순위를 가진다.

align-content: space-between , align-content: space-around 마찬가지로 적용가능

3.2 Flex 요약

display: flex, display: inline-flex로 flex 속성을 가진 요소를 지정한다.

flex요소는 Container와 내부 요소인 Items 로 나뉜다.

Container에는 5가지 속성을 적용할 수가 있다.

flex-direction: flex-Item들의 주축을 결정한다.

(row, column, row-reverse, column-reverse)

flex-wrap : flex-Itme들이 넘쳤을 때의 표현방법을 결정한다.

(nowarp, wrap, wrap-reverse)

justify-content: 주축(x, 좌우)를 기반으로 flex-items를 정렬한다.

(flex-start, flex-end, center, space-between, space-around)

align-items: 교차축(y, 상하)를 기반으로 flex-Itmes를 정렬한다. 단 1줄 단위 적용

(flex-start, flex-end, center, space-between, space-around)

align-content: 교차축(y, 상하)를 기반으로 flex-Itmes를 정렬한다. 단 2줄 이상 시 적용

(flex-start, flex-end, center, space-between, space-around)

4주차 주말 배운 것 정리 (1)

목차