Lieto: css 복습 🚀

Inline vs Block 요소

Block요소는 여러개를 연속해서 쌓을경우 자동으로 다음줄로 넘어간다
좌/우 양쪽으로 늘어나 부모요소의 너비를 가득 채운다.
(기본 가로 값은 꽉 채우기)

Inline:
1. 여러개의 요소를 연속해서 입력해도 다음줄로 자동으로 넘어가 지지 않는다.
2. 태그에 할당된 공간 만큼의 너비만 차지한다.
3. inline은 기본적으로 가로를 적용할 때 block이랑 다르다. display라는 속성을 통해 block으로 변경해주어야함

레이아웃(flex) 🎯

레이아웃 / Layout
=> 재배열하는것 즉, HTML을 보기 좋게 배열하는 것

선택자 🎯

1. 전체선택자
2. 그룹선택자
3. 가상선택자

전체선택자 =>
*{
property:value
}

그룹선택자=>
.class1{
property:value
}

가상선택자=>
선택자:가상 클래스{
property:value
}

가상선택자 🎯

first-child
last-child
nth-child(n)

<div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

div p:first-child{
background: red;
}

:hover
=> 마우스 올리면

float, flex 🎯

float은 모바일 환경이 개발되기 전 pc웹에서만 레이아웃을 구성하는데 사용했던 전통적인 방식

flex는 애초에 레이아웃 구현을 목적으로 개발

grid는 flex와는 구현은 조금 다르지만 레이아웃 구현을 목적으로함

float는 무엇보다 반응형 웹에 적합하지 않다.

flex 🎯

css 레이아웃의 꽃

display는 해당 요소가 가지고 있는 기본 설정 값을 변경해줄 때 사용

block or inline ? 아니 독자적인 Flex

부모가 flex-container가 되면 즉, 부모가 display: flex이면
자식은 flex-item이 된다.

flex-direction? row|column

flex-box의 중심축? 어디로 둘건지를 결정

default는 가로방향(row)

justify-content=> 중심축 방향정렬
align-items=> 중심축 반대 방향 정렬

반응형 웹 🎯

미디어쿼리 🎯

@media screen and (max-width: 500px)
=> 스크린의 뷰포트가 500px이하일 경우

break point 🎯

pc/태블릿/모바일의 규격의 기준