반응형
https://opentutorials.org/course/3086/18322
그리드 - 생활코딩
그리드의 기본 사용법 강의 caniuse 홈페이지 소스코드 변경사항 그리드 써먹기 강의 소스코드 변경사항 Grid 기능의 호환성 https://caniuse.com/#feat=css-grid
opentutorials.org
이제 2.html로 다시 돌아가자
vscode에서 여러 줄을 한꺼번에 들여쓰기하려면 드래그해서 영역 표시한다음 tab키를 누르면 된다. 쉽다!
내어쓰기를 하고 싶으면 shift + tab이다.
<body>
<div>
<h1><a href="index.html">WEB</a></h1>
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<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>바뀐 부분은 이렇다
columns를 적용하기 위해 <div>로 묶어준다
젤 처음 코드
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body {
margin : 0px;
}
#grid {
display : grid;
grid-template-columns: 1fr 1fr;
}
#active {
color:red;
}
.saw {
color:gray;
}
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 : 0px;
padding : 20px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw" id="active">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<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>id grid를 더했다
css가 너무 중간인데..?
#grid {
display : grid;
grid-template-columns: 150px 1fr;
}1fr 1fr가 아니라
150px 1fr로 고쳤더니
정상적으로 나온다!!
#grid ol {
padding-left : 33px;
}요렇게 주면
grid가 조상인 ol만 적용된다는 뜻이다
<!doctype html>
<html>
<head>
<title>WEB - CSS</title>
<meta charset="utf-8">
<style>
body {
margin : 0px;
}
.saw {
color:gray;
}
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 : 70px;
margin : 0px;
padding : 30px;
}
#grid {
display : grid;
grid-template-columns: 150px 1fr;
}
#grid ol {
padding-left : 33px;
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" class="saw">HTML</a></li>
<li><a href="2.html" class="saw">CSS</a></li>
<li><a href="3.html">JavaScript</a></li>
</ol>
<div>
<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에 폰트 적용하는 방법 (0) | 2021.09.29 |
|---|---|
| 생활코딩 css 마무리 (0) | 2021.07.14 |
| 생활코딩 css 코드의 재사용 - .css 파일을 만들자 (0) | 2021.07.14 |
| 생활코딩 css 반응형 디자인과 미디어 쿼리 소개 (0) | 2021.07.14 |
| 생활코딩 css 그리드 (0) | 2021.07.14 |
| 생활코딩 박스모델2 줄긋기 (0) | 2021.07.14 |
| 생활코딩 박스모델 (0) | 2021.07.14 |
| 생활코딩 css 선택자를 스스로 알아내는 방법 (0) | 2021.07.12 |