반응형
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>NAVIGATION</div> - 의미없는 태그를 사용하기 위하여 div(block level)를 사용
<div>ARTICLE</div>
<span>NAVIGATION</span> - 의미없는 태그를 사용하기 위하여 span(inline)를 사용
<span>ARTICLE</span>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
}
div{
border:5px solid gray;
}
</head>
<body>
<div id="grid">
<div>NAVIGATION</div> - 의미없는 태그를 사용하기 위하여 div(block level)를 사용
<div>ARTICLE</div>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}
div{
border:5px solid gray;
}
</head>
<body>
<div id="grid">
<div>NAVIGATION</div> - 의미없는 태그를 사용하기 위하여 div(block level)를 사용
<div>ARTICLE</div>
</div>
</body>
</html>
`
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{
border:5px solid pink;
display:grid;
grid-template-columns: 2fr 1fr;
}
div{
border:5px solid gray;
}
</head>
<body>
<div id="grid">
<div>NAVIGATION</div> - 의미없는 태그를 사용하기 위하여 div(block level)를 사용
<div>ARTICLE</div>
</div>
</body>
</html>
실제 그리드가 모든 브라우저에서 적용되는 것은 아니다
반응형
'Programming Language > Html-CSS' 카테고리의 다른 글
| [CSS] 코드의 재사용 (0) | 2020.05.02 |
|---|---|
| [CSS] 미디어쿼리 (media query) (0) | 2020.05.01 |
| [CSS] 박스모델 (Box model) (0) | 2020.05.01 |
| [CSS] 선택자 (Selector) (0) | 2020.05.01 |
| [CSS] 속성 (Properties) (0) | 2020.05.01 |