header {
border-bottom:1px solid gray;
padding:20px;
}
nav {
border-right:1px solid gray;
width:200px;
height:600px;
float:left;
}
nav ol{
list-style:none;
}
article{
float: left;
padding:20px;
}
h2{
font-size:50px;
}
style.css 초록색 부분 내용이 <link rel="stylesheet" type="text/css" href="style.css"> link 태그를 사용하게 되면 호출된다.
<!DOCTYPE html>
<html>
<head>
<mete charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>연산자</h2>
계산을 할 때 사용되는 것입니다.
</article>
</body>
</html>
page_op.html
위 사진과 같이 style.css 파일의 내용이 HTML 에서 link로 부르게되면
똑같은 형식이 적용된다.
'Web > CSS' 카테고리의 다른 글
| [css] 배경처리 후 글자 위치 조정 (0) | 2019.01.22 |
|---|---|
| [css] 간단한 레이아웃 만들기 (0) | 2019.01.22 |
| [CSS] <img src=" " /> img{float:left;} (0) | 2018.03.03 |
| [CSS] <li id="selected"> #selected{} {padding:30px;} {margin:50px} (0) | 2018.03.03 |
| [CSS] <style> {color:red} {font-size:10px} {text-decoration:underline;} header h1{border:1px solid red;} (0) | 2018.03.03 |
댓글