1. 그리드 ?
= 표 생성
- 활용하는 속성: #grid{border, display, grid-template-columns}
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#grid{ // 그리드 스타일
border: 5px solid green; // 표 감싸는 테두리 두께 & solid 컬러 지정
display: grid; // 표 생성
grid-template-columns: 150px 1fr; // 컬럼 간격 지정
}
div{
border: 5px solid gray; // 표 하나당 테두리 두께 & solid 컬러 지정
}
</style>
</head>
<body>
<div id="grid"> //div id 그리드로 지정 *** 표 생성
<div>NAVIGATION</div> // 컬럼[1] 텍스트
<div>Cheonan-si</div> // 컬럼[2] 텍스트
</body>
</html>[show]
2. 그리디 활용
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> WEB - CSS </title>
<style>
body{
margin: 0;
}
a{
color :blue;
text-decoration: none;
}
h1{ // 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"> // 그리드 id 지정
<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.
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>
[show]
자라나라 개발개발 ~..₩