TIL 03 | CSS 기초

* {
box-sizing: border-box;
}

* = 모든 요소

Block

• Block
• Inline
• Inline Block
• Flex

따로 width를 선언하지 않은 경우, width = 부모의 content-box의 100%

따로 width를 선언한 경우, 남은 공간은 margin으로 자동으로 채움

따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부모의 height

margin: 0 auto;

Inline

Block(면) vs Inline(선)

면(영역) vs 선(흐름)
inline에서는 padding margin top bottom 사용 불가능

Inline Block → Block && Inline

Float → 가로배치

(Inline/Inline Block/Block) → Block

overflow:hidden;

Clearfix
Clear : left | right | both

Pseudo - Element

.pseudo::before {
content: ""
margin-rightL: 20px;
font-size: 30px;
}

clearfix::after {
    content: '';
    display: block;
    clear: both;
}

Position

• static -> 모든 요소의 default 값
• relative -> 자기 자신이 원래 있던 자리 (원래 있던 자리를 기억하고 있음)
• absolute -> Block으로 바뀐다.(float와 동일) / 기준점 설정 필요
• fixed -> viewport 기준으로 움직임
• sticky
  z-index : 덮기
  Type → 기준점

#prev,
#next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

가운데 배치, position: absolute; 후 50% > transform: translate(X or Y)(-50%);

Flexbox → 정렬의 끝판왕

.flexbox {
display: flex;
/* flex | inline-flex */ 

.flexbox {
flex-direaction: row;
/* row | row-reverse | column | column-reverse */ 
row -> 왼->오른쪽 가로 
column -> 위->아래 세로

.flexbox {
flex-wrap: nowrap;
/* nowrap | wrap */

• 정렬하고자 하는 요소를 감싸는 부모에게 display : flex
• 감싸지 wrap 않고 자식의 사이즈를 줄여서 라도 한 줄로 정렬해버리는 flex-wrap:nowrap
• 한 줄에 모두 정렬하기에 공간이 넉넉하지 않으면 여러 줄을 만들어 버리는 flex-wrap:wrap

Main axis → justify-content
justify-content : flex-start | flex-end | center | space-between | space-around;

Cross axis → align-items | align-content
center |

order → 순서 정리

.red {
order:1;
.yellow {
order:2;
.blue {
order:3;

Media Query

• Responsive Web

HTML → viewport meta

<meta name="viewport" content="width=device-width">

@media screen and (min-width: 768px) {
	/* where all the magic happens ... */
}

CSS → media query

vh = viewport height

img 사이즈 조절 할 때는 display block; 필요

가운데 정렬 할 때는 반드시 자식요소를 감싸고있는 부모 요소한테!

미디어 쿼리 작업은 모바일 부터!