티스토리 뷰
[WEBn] WEB2 - CSS
생활코딩 강의를 들었던 것을 정리를 하겠습니다.
grid.html을 만들고 설명하겠습니다.
사진을 보게 되면
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
</head>
<body>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</body>
</html>
<div>
</div>
디자인 용도로만 쓰는 것을 감싸주는
div 태그는 기본적으로 block level element이므로
화면 전체를 쓰기 때문에 줄바꿈이 된것이다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
</head>
<body>
<span>NAVIGATION</span>
<span>ARTICLE</span>
</body>
</html>
<span>
</span>
inline element 이다.
필요에 따라 사용하면 됩니다.
구분을 위해 위 사진과 같이 만들어 줍니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div>NAVIGATION</div>
<div>ARTICLE</div>
</body>
</html>
다음으로는
NAVIGATION과 ARTICLE을 나란히 배치를 해보기 위해서
부모 태그가 필요하므로
<div id="grid">
</div>
부모 태그를 하나 만들어 줍니다.
id를 주고난 후
선택한 #id에 대해서 red색상을 주고 구분을 해줍니다.
그러면 위와 같은 사진처럼 나오게 됩니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>
#grid{
border: 5px solid red;
}
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
그리고 난 후
그리드 속성을 씁니다. (하나의 컬럼으로 배치를 하고 싶으니까 )
그러기 위해서는
grid-template-columns: 150px 1fr;
첫번째 컬럼 NAVIGATION은 150px을 가지고 ARITCLE 컬럼은 1fr로 나머지를 공간을 다 쓰게 해준다는 것 입니다.
위 사진과 같이 나오게 될 것입니다.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>
#grid{
border: 5px solid red;
display: grid;
grid-template-columns: 150px 1fr;
}
div{
border: 5px solid gray;
}
</style>
</head>
<body>
<div id="grid">
<div>NAVIGATION</div>
<div>ARTICLE</div>
</div>
</body>
</html>
다른 예로
grid-template-columns: 1fr 1fr;
두개다 1fr을 쓰게 되면 같은 크기가 됩니다.
그리고
grid-template-columns: 2fr 1fr;
위 사진과 같이 2:1 이러한 식으로 변하게 됩니다.
다시 돌아와
grid를 쓰면 좋은 점은
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>grid</title>
<style>
#grid{
border: 5px solid red;
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, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
</body>
</html>
ARTICLE을 긴글로 변경을 해보았을 시
위 사진과 같이 나오게 되는데 자동으로 크기가 커지고 이러한 기능이 grid 입니다.
그리드 기본 사용 방법 강의
https://opentutorials.org/course/3086/18322
https://caniuse.com/
아주 중요한 사이트입니다.
'WEBn > WEB2 - CSS' 카테고리의 다른 글
| [WEBn] WEB2 - CSS - 코드의 재사용 (0) | 2018.05.02 |
|---|---|
| [WEBn] WEB2 - CSS - 반응형 디자인과 미디어 쿼리 소개 (0) | 2018.05.01 |
| [WEBn] WEB2 - CSS - 박스모델 (0) | 2018.04.30 |
- Total
- Today