현재도 사용되는 레이아웃
- CSS 레이아웃 : float, position을 사용. 모바일을 통한 멀티 스크린에 대응하는 디자인을 만들기에 적합하지 않음
- Flexbox 레이아웃 : (1차원) x축 y축 방향으로 요소를 배치. 그리드 프레임 워크 Bootstrap에서 사용하는 기반의 기술
- Grid 레이아웃 : (2차원)행/열 격자 구조에 요소를 자유롭게 배치. 반응형 웹 레이아웃에 대응.
Grid
- 2차원 배열(세로 열, 가로 행)의 레이아웃
- 가로, 세로 정렬이 모두 필요한 경우 사용
- IE 10, 11등은 부분 지원. 이때문에 크로스 브라우징을 해야 할 수 있음
grid-template
- grid-template-row : 행의 형태를 정의(세로)
- grid-template-column : 열의 형태를 정의(가로)
| ROW(행) | ||
| Column(열) | ||
간격 정의
gap : row-gap column-gap
ex) gap : 10px 20px;
Grid Gutters : 로우, 컬럼 사이의 간격. grid-gap 속성으로 제어
사용 예시
#grid {
display:grid;
grid-template-rows: 300px 1fr auto;
grid-template-columns : repeat(3, 1fr 2fr);
gap: 10px;
}
아이템의 크기 설정
.area-a {
/* row 첫 줄부터 마지막 줄 전부 */
grid-row: 1 / -1;
/* column 1번째 줄부터 5칸의 영역을 차지 */
grid-column: 1 / span 5;
}
.area-b {
grid-row: 1 / 4;
/* column 첫 줄부터 5번째 줄까지 */
grid-column-start: 1;
grid-column-end: 5;
}
minmax(최소크기, 최대크기) : 최대값에만 fr을 쓸 수 있다.
+) 컨테이너의 크기를 %로 줄 수 있다
grid-auto-rows(columns) : 크기 미리 주기
이름으로 크기 지정
grid-area : item에 이름 붙이기
grid-template-areas : 이름 붙인 것으로 영역 지정
<body>
<div class="wrap">
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</div>
</body>.wrap {
display: grid;
background-color: black;
width: 500px;
height: 500px;
grid-template-areas:
"red blue blue"
/* . 은 빈칸으로 둔다 */
"red . green";
}
.red {
grid-area: red;
background-color: red;
}
.blue {
grid-area: blue;
background-color: blue;
}
.green {
grid-area: green;
background-color: green;
}
transition
속성 값의 변화를 일정 기간에 걸쳐 일어나게 하는 것
- property : 어떤 transition에 대해 속성을 적용할지
- duration : transition 발생하는 지속 기간
- timing-function : 베지어 곡선 모델로 어떤 속도를 표현할 지
- delay : transition 얼마나 기다릴 것인지(초단위)
transform
요소를 변형시킴
- translate : 이동
- scale : 확대, 축소
- rotate : 회전
- skew : 기울이기
+) 가짜 이미지 삽입시 사용할 사이트
id/<int:id>/width/height/
'css' 카테고리의 다른 글
| [CSS] display (0) | 2023.04.22 |
|---|---|
| [CSS] Flexbox (0) | 2023.03.17 |
| [CSS] position (0) | 2023.03.16 |
| HTML와 CSS (0) | 2023.02.27 |