![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/GZdkf/btsHbAl6xAj/y4kkR8FxflipKi13Cw742K/img.png)
✏️ 미디어 쿼리의 속성종류설명width, height웹 페이지의 가로 너비, 세로 높이min-width, min-height웹 페이지의 최소 너비, 최소 높이max-width, max-height웹 페이지의 최대 너비, 최대 높이device-width, device-height단말기의 가로 너비, 세로 높이min-device-width, min-device-height단말기의 최소 너비, 최소 높이max-device-width, max-device-height단말기의 최대 너비, 최대 높이orientation: landscape단말기의 가로 모드orientation: portrait단말기의 세로 모드 ✏️ 플렉스 박스 레이아웃의 속성종류설명속성값display플렉스 컨테이너를 지정flex, inline..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/de5rzU/btsHbiF0gaU/UHVj5HtuD9ybBnk9iu9uOK/img.png)
✏️ CSS 그리드 레이아웃 용어플렉스 박스 레이아웃에서는 가로나 세로 중에서 하나를 주축으로 정해 놓고 플렉스 항목을 배치했다면, CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용함. 플렉스는 1차원이고 그리드는 2차원이라고 생각, CSS그리드 레이아웃은 가로 방향을 가리키는 줄(row)와 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성 ✏️ 그리드 컨테이너를 지정하는 display 속성그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어줘야 함. 그리드 컨테이너를 만들 때는 display 속성을 grid나 inline-grid로 지정종류설명grid컨테이너 안의 항목을 블록 레벨 요소로 배치inline-grid..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/eNUR0V/btsHcne08OP/efA9V5rrNT05yabb2V4jgK/img.png)
✏️ 플렉스 박스 레이아웃의 용어플렉스 컨테이너(부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소플렉스 항목(자식 박스) : 플렉스 박스 레이아웃을 적용할 대상으로 위 그림에서 1~6까지 모두 해당주축 : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이며 기본적으로 왼쪽에서 오른쪽이며 수평 방향으로 배치. 플렉스 항목의 배치가 시작되는 위치를 '주축 시작점', 끝나는 위치를 '주축 끝점'이라고 함교차축 : 주축과 교차하는 방향을 말하며 기본적으로 위에서 아래로 배치. 플렉스 항목의 배치가 시작된느 위치를 '교차축 시작점', 끝나는 위치를 '교차축 끝점' 이라고 함 ✏️ 플렉스 박스 항목을 배치하는 속성종류설명justify-content주축 방향의 정렬 방법align-items교차..
![](http://i1.daumcdn.net/thumb/C148x148/?fname=https://blog.kakaocdn.net/dn/dcxdKE/btsHcrhpruq/AkQVV5mF63ejk1nemnEzak/img.png)
✏️ 그리드 레이아웃(Grid Layout)반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 함, 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용하게 됨. 그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말하며 화면을 규칙적으로 배열하므로 레이아웃을 일정하게 유지 ✏️ 그리드 레이아웃의 특성시각적으로 안정된 디자인을 만들 수 있음업데이트가 편한 웹 디자인을 구성 가능요소를 자유롭게 배치할 수 있음 ✏️ 플렉서블 박스 레이아웃(flexible box layout)그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것. 여유 공간이 생길 경우 너비와 높이를..
- Total
- Today
- Yesterday
- Do it!
- 카운팅 정렬
- 투 포인터
- 유클리드 호제법
- 자바
- BFS
- 우선순위 큐
- 세그먼트 트리
- 자료구조
- 백준 풀이
- java
- HTML5
- c++ string
- 알고리즘 공부
- 이분 매칭
- js
- C++ Stack
- 알고리즘
- DP
- 에라토스테네스의 체
- C++
- html
- 자바스크립트
- CSS
- 최단 경로
- DFS
- 스택
- 유니온 파인드
- 백준
- 반복문
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |