오늘 배운 것 - CSS
1. flex와 grid의 차이점
flex와 grid는 서로 다른 특징을 가지고 있기 때문에 상황에 따라 혼용한다.
flex
- 비교적 작은 단위의 레이아웃 구성에 적합하다.
- 가로/세로로 한 방향으로만 쪼개서 구성을 짜줄 수 있고, 1차원 레이아웃을 중첩시켜 다차원 레이아웃을 구성한다. (한 컨테이너 안에서 세로/가로 정렬을 동시에 해 줄 수 없기 때문에 여러번 flex를 중첩시켜 따로 분리를 해주어야 한다.)
- 작업 유동성이 높기 때문에, 디자인이나 기획이 확실하게 잡히지 않아 변경 가능성이 있는 경우에 적합하다. (세부적 레이아웃 수정이 쉽다.)
grid
- 큰 규모의 레이아웃 구성에 적합하다.
- 2차원적 구조가 가능하다. row, column을 동시에 한 컨테이너 안에 적용이 가능하기 때문에 grid를 사용하면 여러번 중첩시킬 필요없이 한번에 만들어 줄 수 있다.
- 레이아웃 구조가 확실하게 잡혀있는 경우, 효율적으로 반응형 디자인을 구현할 수 있다. (기획이 확정되어 있을 경우에는 그리드 사용이 좋다.)
- 단, 그리드는 상대적으로 최신 기술이기 때문에 모든 브라우저에서 지원하지 않는다.
브라우저에서 적용 가능한 기능을 확인할 수 있는 사이트
http://caniuse.com/
2. Grid 속성
1) display: grid
요소의 속성을 grid로 변경한다.
- grid-container : grid가 적용된 요소이다.
- grid-item: grid가 적용된 요소의 자식 요소들이다. 이차원 공간으로 넓게 위치한다.
- grid-line : grid-item 사이 열과 행을 나누는 각각의 경계이다.
- grid-number : grid-line이 몇번째 라인인지 의미한다.
2) grid-template
-
grid-template-rows
grid의 행 개수 및 크기를 지정할 수 있다.
{ grid-template-rows: 1fr 2fr 200px } -
grid-template-columns
grid의 열 개수 및 크기를 지정할 수 있다.
{grid-template-columns : 1fr 2fr 200px }
📌 fr (fraction)이란?
grid에서 사용하는 단위로, 그리드 컨테이너의 여유 공간을 비율로 나눠 설정해준다.
그리드의 컨테이너의 사이즈가 변경되도 비율은 변하지 않는다.
퍼센트(%) 단위와 유사해 보일 수 있으나, 퍼센트 값과 다르게 길이가 아니다.
그래서 calc() 함수에서 다른 값과 함께 처리할 수 없다.
* repeat(a,b)
grid-template에서 사용할 수 있는 반복 함수이다.
b 규격의 grid-template을 a개 생성한다.
예시)
{ grid-template-columns: repeat(4, 1fr) } = 1fr 1fr 1fr 1fr
repeat(2, 1fr 200px) = 1fr 200px 1fr 200px
3fr repeat(2, 1fr 200px) = 3fr 1fr 200px 1fr 200px=> grid를 사용하면 반응형 웹 페이지를 쉽고 효율적으로 만들 수 있다.
3) grid-column / grid-row
grid-item에 줄 수 있는 속성으로, grid-item이 얼마만큼의 영역을 차지할 지 정의한다.
grid-column: 1 / span 2; (span : 템플릿 기준 1부터 시작해서 2개의 칸을 차지한다.)
grid-column: 1 / 4;
grid-row: 2 / 3;
=> 그리드는 이렇듯 아이템 배치에 있어서 flex보다 자유도가 높다.
4) grid-gap
grid cell(그리드 컨테이너 안 각각의 아이템) 가장자리에 공백 및 빈틈을 만들 수 있다.
📌 주의! 인터넷 익스플로러는 grid-gap 기능을 지원하지 않는다.
익스플로러로 접속 시 보여야 하는 웹 사이트는 그리드 갭을 배제하고 레이아웃을 만들어 줘야 한다.
3. 반응형 웹
1) 반응형 웹이란?
웹 사이트에 스마트폰, 태블릿pc, 데스크탑pc 등 다른 종류의 기기로 접속했을때, 기기의 사이즈에 반응하여 그에 맞는 레이아웃 페이지를 보여준다.
2) 미디어 쿼리
뷰포트의 너비에 따라 웹 사이트의 스타일 시트를 수정할 수 있다.
뷰포트 너비 이외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다.
@media screen and (max-width:500px) { /* 스크린의 viewport 너비가 500px 이하일 경우 */
/* 적용시킬 스타일 시트 */
}3) breakpoint
반응형 웹사이트 작업의 기준이 되는 중단점이다.
pc / 태블릿 / 모바일의 기준이 되는 규격 분기
| 크기 | 중단점 |
|---|---|
| Mobile | 0 ~ 767px |
| Tablet | 768px ~ 1023px |
| PC | 1024px ~ 1439px |
| PC Large | 1440px ~ |
절대적인 규격은 없다.
보통 기획단계에서 프로젝트의 예산, 기간을 고려해서 breakpoint를 몇단계로 나눌 지 결정한다.
반응형 웹에서 자주 사용되는 속성
-
max-width & max-height
해당 요소의 최대 너비 / 최대 높이를 설정한다. -
min-width & min-height
해당 요소의 최소 너비 / 최소 높이를 설정한다. -
max()
소괄호 안에 입력된 값 중 제일 높은 값을 속성값으로 출력하는 함수이다.
height: max(320px, 20%)
-> 사용자 화면에서 20%가 320px보다 클 경우 20%가 적용되고, 20%보다 320px이 크면 320px로 적용된다. -
min()
소괄호 안에 입력된 값 중 제일 낮은 값을 속성값으로 출력하는 함수이다.
오늘의 회고
grid에 대해 배웠다. 처음 접해보는 속성이라 아직 적용하기가 어렵지만, 확실히 flex보다 전체 구조를 구성하는 데에 있어서 간편한것 같다. 자주 사용해보면 적응할 수 있을 것 같다.
grid는 수정이 어려우니 기획 확정 단계에서 사용하고, 모든 브라우저에서 지원하는 기능이 아니라는 점을 항상 잘 숙지하고 있어야겠다.
그리고 반응형 웹에 대해 배웠다. 반응형 웹 실습을 하다보니 grid보다 flex로 반응형 웹을 만드는 방법이 더 쉬웠다. grid로 만들면 @mediaquery를 사용할때 마다 grid-template을 계속 수정해줘야 해서 복잡하고 어려운것 같다. 위에서 수정이 어렵다는 말이 이 뜻인가 보다.
반응형 웹을 마지막으로 CSS 수업이 끝나게 되었다. 사실 알고 있는 내용이 대부분이라 수업을 여유롭게 듣긴 했으나, flex나 grid 등 몰랐던 내용들도 많았다.
처음 접하는 내용을 배울때마다 어렵지만 새로운 지식을 알게 되는 과정이 참 재미있는것 같다.
++ grid로 만든 반응형 실습페이지를 완성했다. 계속 수정하다 보니까 되긴 되더라..
grid가 적용된 컨테이너에 grid-template-columns과 rows를 수정해주고, 각 그리드 아이템에
grid-column과 row를 화면에 맞게 설정해주면 grid로 반응형을 만들 수 있다.
미디어쿼리로 tablet버전을 만드는 부분에서 애를 먹었는데,
컨테이너에 grid-template-columns: 200px 578px; 이런식으로 적용해주면 총 column이 2개가 되야하는데 계속 3개로 나눠져서 200px 2fr;로 수정해 주었더니 되었다. 뭔가 초기에 설정해준값이 충돌된건가..? 원인을 잘 모르겠다.
