css_study_d4_정리

미디어 쿼리 알아보기 |

• 미디어 쿼리는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법입니다.
• 미디어 쿼리를 사용하면 접속하는 기기의 화면 크기에 따라 레이아웃이 달라집니다.

미디어 쿼리 구문

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

• only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리를 무시하고 실행하지 않습니다.
• not : not 다음에 지정하는 미디어 유형을 제외합니다.
• and : 조건을 여러 개 연결해서 추가할 수 있습니다.

미디어 쿼리 적용하기

• 외부 CSS 파일 연결하기

<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">

@import url(css 파일 경로) 미디어 쿼리 조건

• 웹 문서에 직접 정의하기

<style media="<조건>"> {
    <스타일 규칙>
}
</style>

<style>
    @media <조건> {
        <스타일 규칙>
    }
</style>

 

그리드 레이아웃 알아보기 |

그리드 레이아웃이란

• 그리드 레이아웃이란 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말합니다.
• 그리드 레이아웃을 사용하면 화면을 규칙적으로 배열하므로 레이아웃을 일관성 있게 유지할 수 있습니다.

그리드 레이아웃을 만드는 방법

플렉서블 박스 레이아웃

• 그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것입니다.
• 수평 방향이나 수직 방향 중에서 한쪽을 주축으로 정하고 박스를 배치합니다.

CSS 그리드 레이아웃

• 수평과 수직 어느 방향이든 배치할 수 있습니다.

 

플렉스 항목 배치하기 |

플렉스 박스 레이아웃에서 사용하는 용어

플렉스 박스 항목을 배치하는 속성

플렉스 컨테이너를 지정하는 display 속성

• 플렉스 박스 레이아웃을 만들려면 웹 콘텐츠를 플렉스 컨테이너로 묶어 주어야 합니다.
• display의 속성값

| 종류 | 설명  |

| ——– | ——– |
| flex | 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치합니다. |
| inline-flex | 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치합니다. |
플렉스 방향을 지정하는 flex-direction 속성

• 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 주축과 방향을 지정하는 속성입니다.
• flex-direction의 속성값종류설명

  row	주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치합니다. 기본값입니다.
  row-reverse	주축을 가로로 지정하고 반대로 오른쪽에서 왼쪽으로 배치합니다.
  column	주축을 세로로 지정하고 위쪽에서 아래쪽으로 배치합니다.
  column-reverse	주축을 세로로 지정하고 아래쪽에서 위쪽으로 배치합니다.

플렉스 항목의 줄 바꾸기 |

플렉스 항목의 줄을 바꾸는 flex-wrap 속성

• 플렉스 컨테이너 너비보다 많은 플렉스 항목이 있을 경우 줄을 바꿀지 여부를 지정합니다.
• flex-wrap의 속성값
• | 종류 | 설명 |

| ——– | ——– |
| nowrap | 플렉스 항목을 한 줄에 표시합니다. 기본값입니다. |
| wrap | 플렉스 항목을 여러 줄에 표시합니다. |
| wrap-reverse | 플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점이 바뀝니다. |

 

플렉스 항목의 배치 방향과 줄 바꿈 적용하기 |

배치 방향과 줄 바꿈을 한꺼번에 지정하는 flex-flow 속성

• flex-flow 속성은 flex-direction 속성과 flex-wrap 속성을 한꺼번에 지정하여 플렉스 항목의 배치 방향을 결정하거나 줄을 바꿉니다.

 

주축에서 플렉스 항목 간의 간격 적용하기 |

주축 정렬 방법을 지정하는 justify-content 속성

• justify-content 속성
• | 종류 | 설명 |

| ——– | ——– |
| flex-start | 주축의 시작점에 맞춰 배치합니다. |
| flex-end | 주축의 끝점에 맞춰 배치합니다. |
| center | 주축의 중앙에 맞춰 배치합니다. |
| space-between | 첫 번째 항목과 끝 항목을 주축의 시작점과 끝점에 배치한 후 나머지 항목은 그 사이에 같은 간격으로 배치합니다. |
| space-around | 모든 항목을 주축에 같은 간격으로 배치합니다. |

 

플렉스 박스에서 교차축 정렬 방법 지정하기 |

교차축 정렬 방법을 지정하는 align-items 속성

• align-items의 속성값
• | 종류 | 설명 |

| ——– | ——– |
| flex-start | 교차축의 시작점에 맞춰 배치합니다. |
| flex-end | 교차축의 끝점에 맞춰 배치합니다. |
| center | 교차축의 중앙에 배치합니다. |
| baseline | 교차축의 문자 기준선에 맞춰 배치합니다. |
| stretch | 플렉스 항목을 늘려 교차축에 가득 차게 배치합니다. |

 

플렉스 박스에서 특정 항목만 정렬 방법 지정하기 |

특정 항목만 정렬 방법을 지정하는 align-self 속성

• align-item 속성 중에서 특정 항목만 지정하고 싶다면 align-self 속성을 사용합니다.
• align-self 속성은 플렉스 항목 선택자에서 사용합니다.
• align-self 속성에서 사용하는 값은 align-items 속성에서 사용하는 값과 같습니다.

 

여러 줄일 때 교차축에서 플렉스 항목 간의 간격 지정하기 |

여러 줄일 때 교차축 정렬 방법을 지정하는 align-content 속성

• align-content의 속성값
• | 종류 | 설명 |

| ——– | ——– |
| flex-start | 교차축의 시작점에 맞춰 배치합니다. |
| flex-end | 교차축의 끝점에 맞춰 배치합니다. |
| center | 교차축의 중앙에 맞춰 배치합니다. |
| space-between | 첫 번째 항목과 끝 항목을 교차축의 시작점과 끝점에 맞추고 나머지 항목은 그 사이에 같은 간격으로 배치합니다. |
| space-around | 모든 항목을 교차축에 같은 간격으로 배치합니다. |
| stretch | 플렉스 항목을 늘려서 교차축에 가득 차게 배치합니다. |

 

그리드 박스에서 칼럼과 줄 지정하기 |

CSS 그리드 레이아웃에서 사용하는 용어

• CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용합니다.
• CSS 그리드 레이아웃은 가로 방향을 가리키는 **줄(row)**과 세로 방향을 가리키는 **칼럼(column)**으로 웹 화면을 구성합니다.

CSS 그리드 레이아웃 항목을 배치하는 속성

그리드 컨테이너를 지정하는 display 속성

• 그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어야 합니다.
• display의 속성값
• | 종류 | 설명 |

| ——– | ——– |
| grid | 컨테이너 안의 항목을 블록 레벨 요소로 배치합니다. |
| inline-grid | 컨테이너 안의 항목을 인라인 레벨 요소로 배치합니다.
칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows 속성

• 그리드 컨테이너 안에 항목을 배치할 때 칼럼과 줄의 크기와 개수를 지정하려면 grid-template-columns 속성과 grid-template-rows 속성을 각각 사용합니다.

 

칼럼과 줄 크기를 자동으로 지정하기 |

상대적인 크기를 지정하는 fr 단위

• 그리드 레이아웃에서는 상대적인 크기를 지정할 수 있도록 fr(fraction) 단위를 사용합니다.

값이 반복될 때 줄여서 표현할 수 있는 repeat( ) 함수

• repeat( )이라는 내장 함수를 사용하면 똑같은 값을 반복하지 않고 간단하게 표현할 수 있습니다.

최솟값과 최댓값을 지정하는 minmax( ) 함수

• minmax( ) 함수를 사용하면 줄 높이를 고정하지 않고 최솟값과 최댓값을 사용해서 유연하게 지정할 수 있습니다.

 

자동으로 칼럼 개수 조절하기 |

자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit 값

• auto-fit을 사용하면 화면이 넓을 때에는 남는 공간 없이 꽉 채워서 칼럼을 표시하고, auto-fill을 사용하면 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둡니다.

 

그리드 항목의 간격 지정하기 |

그리드 항목의 간격을 지정하는 grid-column-gap, grid-row-gap, grid-gap 속성

• 그리드 항목의 간격을 조절하는 속성
• | 종류 | 설명 |

| ——– | ——– |
| grid-column-gap | 칼럼과 칼럼 사이의 간격을 지정합니다. |
| grid-row-gap | 줄과 줄 사이의 간격을 지정합니다. |
| grid-gap | 칼럼과 줄 사이의 간격을 한꺼번에 지정합니다. 첫 번째 값은 grid-row-gap에 해당하고 두 번째 값은 grid-column-gap에 해당합니다.|

 

 

그리드 라인을 사용해서 항목 배치하기 |

그리드 라인을 이용해 배치하기

• 그리드 레이아웃은 눈에 보이지 않는 그리드 라인이 포함되어 있습니다.
• 그리드 라인을 이용해 그리드 항목을 배치하는 속성
• | 종류 | 설명 |

| ——– | ——– |
| grid-column-start | 칼럼 시작의 라인 번호를 지정합니다. |
| grid-column-end | 칼럼 마지막의 라인 번호를 지정합니다. |
| grid-column | 칼럼 시작 번호와 칼럼 끝 번호 사이에 슬래시(/)를 넣어 사용합니다. |
| grid-end-start | 줄 시작의 라인 번호를 지정합니다. |
| grid-row-end | 줄 마지막의 라인 번호입니다. |
| grid-row | 줄 시작 번호와 줄 끝 번호 사이에 슬래시(/)를 넣어 사용합니다. |

 

 

템플릿 영역을 만들어 배치하기 |

• grid-area 속성을 사용해서 각 영역에 템플릿 이름을 지정합니다.
• grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 지정합니다.

 

https://voucher.elice.io/courses/7739/lectures/all

Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 | 엘리스