https://opentutorials.org/course/3086/18322
See the Pen gOazerx by PSK (@psklog) on CodePen.
ref)
캔아이 유즈 :
2020/04/19 - [공부하기/Ref.] - 웹에서 사용할 수 있는 기능인가 체크 : 캔아이유즈 caniuse
div :
2020/05/10 - [공부하기/CSS] - CSS 연습해보기div태그
박스모델에서 보면, 목록 과 본문이 옆으로 나란이 나열되어 있다.
-> '그리드 grid'를 이용해서 만들어보자.
1. 그리드 속성 적용하기
- display : grid;
2. 각 컬럼 사이즈 지정해주기.
- grid-template-columns: 150px 1fr;
#grid{
display:grid;
grid-template-columns: 150px 1fr;
}
ex) fr
grid-template-columns : 1fr 1fr;
1:1
grid-template-columns : 2fr 1fr;
2:1
padding / margin 값으로 간격 조정해주기.
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body{
margin:0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size:45px;
text-align: center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
ol{
border-right:1px solid gray;
width:100px;
margin:0;
padding:20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left:33px;
}
#grid #article{
padding-left:25px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HTML</a></li>
<li><a href="2.html">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language.[1] Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>'공부하기 > CSS' 카테고리의 다른 글
| CSS 연습해보기 - <div> 태그 (0) | 2020.05.10 |
|---|---|
| CSS 박스 모델 (box model) (0) | 2020.04.19 |
| CSS 선택자를 알아내는 방법 (selector) (0) | 2020.04.19 |
| CSS 속성을 스스로 알아내기 (0) | 2020.04.19 |
| CSS 소개하기 (0) | 2020.04.19 |
