Grid(그리드)
<!DOCTYPE html>
<html>
<head>
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: 150px 1fr;
}
div {
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Totam odit dignissimos expedita voluptas repellendus beatae doloribus inventore?
Totam quis rem aspernatur repellat harum error.
Odio vel atque quos recusandae dolore.</div>
</div>
</body>
</html>나누고자 하는 태그들을 id가 grid라는 하나의 div태그로 묶고, css에서 display 속성을 grid로 설정해준다. 그리고 grid-template-colums로 grid의 가로열 크기를 조정해준다. 위 코드는 NAVIGATION을 150px로 설정하고 나머지 크기는 다른 하나의 div태그가 갖는다.
<!DOCTYPE html>
<html>
<head>
<style>
#grid {
border: 5px solid pink;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 200px 200px;
}
div {
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</body>
</html>위 코드처럼 grid-template-rows로 세로 크기도 지정해 줄 수 있다.
미디어 쿼리
css에서는 특정 조건에서만 css style을 적용시킬 수도 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
border: 10px solid green;
font-size: 60px;
}
@media(max-width:800px) {
div {
display: none;
}
}
</style>
</head>
<body>
<div>
Responsive
</div>
</body>
</html>위 코드처럼 @media를 사용해 조건을 달아준다. max-width:800px는 최대 너비가 800px라는 것으로 너비가 800px보다 작으면 div 태그가 보이지 않게 해준다는 것이다.
해당 사진들처럼 너비가 줄어들면 div가 보이지 않게 설정되는 것을 볼 수 있다.
'공개 글' 카테고리의 다른 글
| JavaScript 기본 (1) | 2025.03.24 |
|---|---|
| Web Server와 WAS (1) | 2025.03.17 |
| CSS 기본 - 1 (1) | 2025.03.12 |
| @GetMapping? @PostMapping? (0) | 2025.02.19 |
| html 기본 태그 (0) | 2025.02.04 |