<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그리드01</title>
<Style>
#grid1 {
display: grid;
grid-template-columns: 150px 1fr;
}
#grid1 #grid2 {
padding-left: 35px;
}
body {
margin:0;
}
a {
color: black;
text-decoration: none;
}
h1 {
font-size: 100px;
text-align: center;
border-bottom: 5px solid gray;
margin:0;
padding:20px;
}
#grid1 ol {
border-right: 3px solid gray;
width:100px;
margin:0;
padding:20px;
padding-left: 40px;
}
</Style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid1">
<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="grid2">
<h2>CSS</h2>
<P>
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</P>
</div>
</div>
</body>
</html>
여기서 포인트는
<div>로 분할시킨(묶은) 영역을 →id를 이용해 속성값을 부여시킴.
<div id="grid1"></div> <div id="grid2"></div>
<div id="grid1">
<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="grid2">
<h2>CSS</h2>
<P>
CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</P>
</div>
</div>
이후, css(html의 <style>태그 내)에서 → id 속성값을 불러와 해당 영역을 꾸몄다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box01</title>
<style>
/*block level element ->
화면의 전체 영역을 사용.*/
h1 {
border-width: 5px;
border-color: green;
border-style: solid;
}
/*inline element ->
화면의 특정 영역만을 사용.*/
a {
border-width: 5px;
border-color: blueviolet;
border-style: solid;
}
</style>
</head>
<body>
<h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</body>
</html>
영역 사용 범위를 바꾸고 싶을 때
뭔 소린고 하면...
· Block level element를 → Inline element처럼 사용하고 싶다면,
css에서 Block level element특성에 해당되는 곳에 → Inline element요소를 넣으면 됨. 혹은,
· Inline element를 → Block level element처럼 사용하고 싶다면,
css에서 Inline element특성에 해당되는 곳에 →Block level element요소를 넣으면 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>box02</title>
<style>
/*block level element ->
화면의 전체 영역을 사용.
inline처럼 화면의 일부분만을 사용하고 싶다면,
inline요소를 넣어주면 됨.*/
h1 {
border-width: 5px;
border-color: green;
border-style: solid;
display:inline;
}
/*inline element ->
화면의 특정 영역만을 사용.
block처럼 화면 전체를 사용하고 싶다면,
block요소를 넣어주면 됨.*/
a {
border-width: 5px;
border-color: blueviolet;
border-style: solid;
display:block;
}
</style>
</head>
<body>
<h1>CSS</h1> is the language we use to style an HTML document. (<a href="https://developer.mozilla.org/ko/docs/Web/CSS">CSS</a>) describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced. CSS is the language we use to style an (<a href="https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started">HTML</a>) document. CSS describes how HTML elements should be displayed. This tutorial will teach you CSS from basic to advanced.
</body>
</html>
· id 하나 당, 하나의 정체성만을 가짐 (고유값) · 태그 하나 당 id속성 하나를 사용한다. 이미 한 번 적용시킨 id는 다른 태그에 또 사용할 수 없음. · 단, id에 부여시킨 속성값이 제각기 다르다면 하나의 태그에 여러 id가 올 수 있다. 중요한 건, 같은 속성값을 가진 id를 다른 태그에 중복해 사용할 수 없다는 것!
class
· 하나의 class를 여러 곳에 쓸 수 있음 (그룹화) · 여러 태그에 class속성을 중복해 사용할 수 있다.
