[Udemy] The Web Developer Bootcamp 2022 : [10] 반응형 및 Flexbox

🔔 Crucial : Media Queries, Focus on concept, flex Shorthand, flex-basis, grow, and shrink, align-items, flex-wrap, align-conteent and align-slef, justify-content, flex-direction

 

CSS Flexbox 

▪  페이지의 콘텐츠 상자 안에 아이템을 배치하는 데 사용

▪  하나의 컨테이너 안에서 요소들을 각각 어떻게 배열할지에 대한 레이아웃을 유연하게 조종할 수 있음 

 

Flex-Direction 

☑️ display : flex - flexbox를 사용하기 위해서 작성해줘야함 -> 컨테이너 안의 요소가 flexbox의 규칙대로 정렬됨 

▪  main-axis : flexbox의 기본축(가로축(왼쪽에서 오른쪽)을 기본축으로 사용) 

▪  cross-axis : flexbox의 교차축(세로축) 

 

☑️ flex-direction : 컨테이너 안에서 본축 방향을 결정하는 속성, 기본 값은 row 

✅ row-reverse : 축은 가로축 그대로지만 방향이 반대로(오른쪽에서 왼쪽으로) 정렬

✅ column : 세로축(상 -> 하 방향)으로 정렬 

✅ column-reverse : 세로축(하 -> 상 방향)으로 정렬 

 

Justify-Content 

☑️ justify-content : 주축을 기준으로 요소와 컨텐츠를 어떻게 배치할지 결정하는 속성 (주축의 방향이 중요함) 

✅ flex-start : 기본값, 주축의 방향대로 정렬됨(row라면 왼쪽 정렬)  

✅ flex-end : 주축의 반대 방향에서부터 정렬됨(정렬 순서가 바뀌는 것이 아님, row라면 오른쪽 정렬) 

✅ center : 주축의 가운데 정렬 

✅ space-between : 바깥쪽 여백을 다 없애고 요소 사이에 간격을 띄운 상태로 정렬(요소 사이간격은 모두 동일) 

✅ space-around : 요소의 바깥쪽에도 여백을 줘서 요소 사이와 바깥에 간격을 띄운 상태로 정렬(바깥쪽 여백은 사이 여백의 절반)

✅ space-evenly :  바깥쪽과 안쪽의 여백의 간격을 모두 동일하게 만든 상태로 정렬 

 

Flex-Wrap

☑️ flex-wrap : 주축이 수평일 때는 새로운 행을 만들어 요소를 정렬하고, 수직일 때는 새로운 열을 만들어 요소를 정렬 

✅ wrap : 주축과 교차축의 방향대로 정렬 

✅ wrap-reverse : 주축의 방향대로 정렬되지만 교차축이 반대로 설정되어 정렬됨 

✅ none : 다음 행이나 열로 넘어가지 않음 \

 

Align-Items 

☑️ align-items : 교차축을 따라 아이템을 배열함

✅ flex-start : 기본값, 교차축의 방향대로 정렬됨 (교차축의 시작점부터 시작) 

✅ flex-end : 교차축의 반대 방향에서부터 정렬됨 

✅ center : 교차축의 가운데 정렬

✅ baseline : 텍스트의 기준선에 맞춰 정렬 

 

Align-Content & Align-Self

☑️ align-content : 행이나 열이 여러개일 때 교차축을 기준으로 각 열이나 행 사이의 간격 조절

-> wrap이나 wrap-reverse가 적용되었을 때만 사용가능 

 

☑️ align-self : align-content와 비슷하지만 단일 요소에 적용하거나 플렉스 컨테이너 안의 요소에 적용(?) 

-> 각 요소 중 하나만 움직이고 싶을 때 사용 

 

Flex-basis, grow, and shrink 

☑️ flex-basis : 요소가 배치되기 전에 요소의 최초 크기를 결정 (width나 height가 무시됨, 이것으로 너비나 높이가 설정 되어버림) 

-> 왜냐하면 flex-basis는 주축에 걸쳐있기 때문(주축의 방향에 따라 row면 width, column이면 height가 됨) 

-> 무조건적으로 길이가 늘어나는 것이 아님, 공간이 있을 때만 늘어나고 아니라면 적당한 길이에서 멈춤 

 

☑️ flex-grow : 공간이 있을 때 요소가 그 공간을 얼마나 차지할지 결정 (어느 요소에도 적용 가능함) 

-> 적을 때 단위를 적지 않아도 됨(비율이기 때문), 설정한 너비가 높이 상관없이 남는 공간을 차지하도록 배치됨 

-> min-height, min-width(또는 max)를 설정하면 최소/최대를 설정할 수 있어서 늘어나거나 줄어들때 한계가 설정됨 

 

☑️ flex-shrink : 컨테이너에 충분한 공간이 없을 때 요소들이 줄어드는 비율을 통제함 

-> 숫자가 클수록 더 많이 줄어듦 (비율이 적용되면서 줄어듦) , 0이라면 전혀 줄어들지 않음 

 

Flex Shorthand

▪  앞에서 소개한 3개의 값들이 자주 쓰이다보니 속기법(줄여서)으로 작성할 수 있음 

h1{
	flex : flex-grow | flex-shrink | flex-basis;
}

 

Responsive Design (반응형) 

: 다양한 화면 크기와 기기의 특징에 따라 다르게 반응하도록 웹페이지를 제작하는 것 

 

Media Queries (미디어 쿼리) 

 : CSS와 스타일 시트에서 작성할 수 있음, 화면 너비나 기기 종류, 기기가 움직이는 방향에 맞춰 스타일을 변경 

@media (min-width : 600px) and (max-width : 800px) {
	.sidebar{
    	display : none;
    }
}

 

-> 괄호 안에 들어가는 조건은 뷰포트 화면에 대한 조건임

-> 가장 나중에 적힌 스타일이 적용되기 때문에 조건이 겹치거나 더 작은 범위라면 조심해서 작성해야함 

-> 보통 min-width를 사용한다는 것 같음 

 

---

mediaQueries.css

body {
    font-family: 'Open Sans', sans-serif;
}

h1 {
    font-size: 6em;
    text-align: center;
}

/* li들은 nav 컨테이너 안에 있는게 아니라 ul 안에 있어서 a, ul만 정렬됨 */
nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between;
}


ul,
li {
    display: inline;
    margin: 0;
    padding: 0;
    text-decoration: none;
}


/* ul안의 li들 정렬시키기  */
ul {
    border: 1px solid red;
    flex: 1;
    /*남는 공간 전부 차지, 최대치가 설정되었으니까 전체의 50% 차지*/
    max-width: 50%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}


@media (max-width : 768px) {
    h1 {
        font-size: 4em;
    }

    nav,
    nav ul {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width : 576px) {
    h1 {
        font-size: 3em;
    }
}