em, rem 관련
루트에 폰트 사이즈가 font-size: 10px; 라면
folnt-size:1.4rem <- 13px이 되는 것임
ㄴ em : 폰트 사이즈 대비
ㄴ rem : root의 배수
em, rem으로 값을 줄 경우 웹사이트 제작에 '유연성' 을 줄 수 있다.
줄바꿈이 일어나지 않도록 설정하기
display: inline-block
white-space: nowrap
<GRID>
기존애 배운 flex-box는 방향성이 존재했었다.
GRID는 양방향성이며, 기본적으로 아무것도 일어나지 않은 것처럼 보이게 된다.
.grid {
border: 4px solid blue;
display: grid;
grid-template-columns: 100px 100px 100px;
}
.grid {
border: 4px solid blue;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
rows colmns 둘다 지정해준 경
열은 autofit으로 100px씩 가득 채우고,
행은 100px 100px 씩 2행이니, 3행부터는 넘쳐난다. (3행부터 stretch 된다)
.grid {
border: 4px solid blue;
display: grid;
aspect-ratio: 1/1;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
grid-template-rows: 100px 100px;
}
items 이동하기
grid-row-start: 1; -> 기존 자리
grid-row-start: 2-> 1칸 이동한 자리
- items에 해당 속성을 넣어준다.
- row는 행이동 col은 열이동
셀을 가지고 있는 공간 병합
grid-row-start:1;
grid-row-end: 3;
ㄴ 행을 1~3까지
grid-column-start: 1;
grid-column-end: 3;
ㄴ 열을 1~3까지
*단축속성 grid-row : 1 / 3 (1~3까지 row를 설정)
*단축속성 grid-col 1 / 3 (1~3까지 col읈 설정)
칸 수로 작성하기
grid-row-start:1; grid-row-end: span 3; /*칸 수로 3칸을 차지하자 */
grid-column-start: 1; grid-column-start: span 3;
.grid-item:nth-child(1) {
background-color: aqua;
grid-row-start:1;
grid-row-end: span 3; /*칸 수로 3칸을 차지하자 */
grid-column-start: 1;
grid-column-start: span 3;
}
<그리드로 이미지 그리드 만들기>
하숙집(보이지 않는 막이 있다고 생각하자)
그리드 아이템 하나 하나를 하숙집으로 생각해보자 (아이템에도 보이지 않는 막이 있다고 생각하자)
1. 전체 프레임 (방)을 짰다.
4*4로 초기화해주었다. 총 16개의 방이 만들어졌다.
2. 합쳐줘야하는 방의 코드를 작성한다.
grid-column-start: 1; // 해당 코드는 end코드를 span으로 둔다면 생략을 해도 된다.
grid-column-end: 3;
<C로 시작하는 음식 작성하기>
-grid를 받는 div를 따로 설정하고 (grid(부모) / grid-item(자식))
-그 안쪽으로 코드를 작성했다.
*헷갈리는 부분 정리*
1. z-index 적용하는 부분
배경이미지 bg를 가장 안쪽 z-index: -2로 두었고
그라디언트를 적용하는 item::before에는 z-index를 -1을 주어 배경 바로 위에 위치하게 두었다.
일반 item은 z-index: 1로 두어 h2가 앞으로 더 튀어나오게 했다.
2. grid 는 4*4 그리드 / 병합하는 부분은 모두 span값으로 주었다. (칸을 차지하도록)
부모에게
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
자식(grid-item)에게
.grid-item:nth-child(1) {
grid-row-end: span 2;
grid-column-end: span 2;
}
.grid-item:nth-child(5) {
grid-row-end: span 3;
}
.grid-item:nth-child(9) {
grid-column-end: span 2;
}
[소스코드]
더보기
html
<!DOCTYPE html>
<html>
<head>
<title>SQUARE GRID</title>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<ul class="grid">
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/crepe.png" alt="">
<h2>Crepe</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/cookie.png" alt="">
<h2>Cookie</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/choco.png" alt="">
<h2>Choco</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/cream.png" alt="">
<h2>Cream</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/cake.png" alt="">
<h2>Cake</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/candy.png" alt="">
<h2>Candy</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/coke.png" alt="">
<h2>Coke</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/cheeze.png" alt="">
<h2>Cookie</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/cinnamon.png" alt="">
<h2>Cinnamon</h2>
</div>
</li>
<li class="grid-item">
<div class="item">
<img class="bg" src="./images/chili.png" alt="">
<h2>Chili</h2>
</div>
</li>
</ul>
</div>
</body>
</html>
css
ul {
margin: unset;
padding: unset;
list-style-type: none;
}
img {
max-width: 100%;
vertical-align: top;
}
h2 {
margin: unset;
font-size: unset;
font-weight: unset;
}
.grid {
display: grid;
aspect-ratio: 1/1;
font-size: 30px;
text-align: center;
padding:20px;
gap: 20px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.grid-item {
position: relative;
}
/*
.grid-item:nth-child(1) { background-color: lightcoral; }
.grid-item:nth-child(2) { background-color: peachpuff; }
.grid-item:nth-child(3) { background-color: lightblue; }
.grid-item:nth-child(4) { background-color: lemonchiffon; }
.grid-item:nth-child(5) { background-color: plum; }
.grid-item:nth-child(6) { background-color: lightgreen; }
.grid-item:nth-child(7) { background-color: lightskyblue; }
.grid-item:nth-child(8) { background-color: darksalmon; }
.grid-item:nth-child(9) { background-color: palegreen; }
.grid-item:nth-child(10) { background-color: lightpink; } */
.grid-item:nth-child(1) {
grid-row-end: span 2;
grid-column-end: span 2;
}
.grid-item:nth-child(5) {
grid-row-end: span 3;
}
.grid-item:nth-child(9) {
grid-column-end: span 2;
}
.item {
position: absolute;
inset: 0;
border-radius: 20px;
overflow: hidden;
color: white;
transition: all .4s;
z-index: 1;
}
.item::before {
content: '';
position:absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
z-index: -1;
}
.item:hover {
/* transform: scale(1.2); */
box-shadow: 0 0 200px red;
border: 10px solid white;
margin: -20px;
z-index: 10;
}
.bg {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -2;
}
