[CSS]CSS 레이아웃, Flex 레이아웃

https://www.inflearn.com/course/%EA%B0%95%EB%A0%A5-css-%EC%BD%94%EB%93%9C%EC%BA%A0%ED%94%84/dashboard

[코드캠프] 강력한 CSS 강의 - 인프런

---

 

📖CSS 레이아웃

레이아웃: 화면의 요소를 적절히 배치하는 것

 

🔍선택자(Selector) 2

전체 선택자

*{
	property: value
}

 

그룹 선택자

.class1, .class2{
	property: value
}

 

가상 클래스 선택자

가상 클래스 선택자란 실제로 html 요소를 수정하지 않고, css만으로 가상 요소를 추가해 선택할 수 있게 하는 것이다.

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

.box1 p:first-child{
	background:red;
}
.box1 p:last-child{
	background:red;
}
.box1 p:nth-child(3){
	background:red;
}
->3번째 요소 선택
.box1 p:nth-child(2n){
	background:red;
}
.class:hover{
	property:value;
}
->요소 위에 마우스가 올라갔을 때의 변화

 

❗CSS 레이아웃의 흐름

Float→Flex→Grid

Float: 현재 웹에서 거의 사용되지 않는다.

Flex, Grid: 상황에 따라 혼용

 

*Float가 쓰이지 않는 이유

• 반응형 웹에 적합하지 않기 때문이다.모바일, 태블릿, PC 등 접속하는 기기의 너비에 맞추어 레이아웃이 변하는 웹페이지
• 반응형 웹이란?

 

🔍float란?

clear: float의 영향력을 해제

 

🔍flex

요소의 속성을 flex로 변경

display: flex;

 

✔flex-direction

• row(행)
• column(열)

 

✔justify-content: 중심축 방향 정렬

• justify-content: flex-start
• justify-content: flex-end
• justify-content: center
• justify-content: space-between
• justify-content: space-around
• justify-content: space-evenly

 

✔align-items: 중심축 반대 방향 정렬

• stretch(기본값)
• flex-start
• flex-end
• center

※align-items는 flex-item이 한 줄일 때 우선 적용!

두 줄 이상일 때에는 align-content라는 다른 속성을 써주어야 한다.

 

---

✔first-child란?

형제 요소 중 첫번째 요소를 선택하는 가상 클래스

 

✨first-of-type은?

:first-child와 다르게 first-of-type이라는 가상 클래스가 적용된 선택자에 해당되는 요소만 카운트한다.

:active

버튼 등을 클릭해서 요소의 동작이 활성화되어있는 상태

:focus

Tab 키 등을 이용해서 입력창의 커서가 활성화되어 있는 상태

:visited

링크를 눌러서 해당 경로를 방문한 기록이 브라우저상에 남아 있는 링크(기본컬러-보라색)

 

📖가상 요소 선택자

실제로 html 요소를 수정하지 않고, CSS만으로 가상 요소를 추가해 선택할 수 있다.

:before

:after

content를 이용해서 내용을 추가할 수 있다.

---

 

🔍flex(심화)

원하는 요소에 display: flex를 주면 flex 전용 속성을 사용할 수 있게 된다.

 

✔️flex-wrap

flex-item이 여러개일 때, item들의 줄바꿈을 허용할 것인지 말 것인지 결정한다.

flex-wrap: nowrap(기본값);
flex-wrap: wrap;

이때, flex-wrap을 통해 item이 여러줄이 되었다면 align-items가 아닌 align-content라는 다른 속성을 써줘야한다.

 

❗align-content

여러 줄이된 flex-item의 중심 반대 축 정렬을 어떻게 할지 결정한다.

align-content: stretch

align-content: flex-start

 

✔️flex-flow

flex-direction과 flex-wrap을 합쳐놓은 단축속

flex-direction: row;
flex-wrap: wrap;
//=>
flex-flow: column wrap;

 

✔️flex-item 속성들…

order: item의 순서를 지정

flex-basis: item의 기본 사이즈를 지정

 

⇒더 자세한 내용은 Google/MDN을 참고!