[CSS] <link rel="stylesheet" type="text/css" href="style.css">

뉴비뉴

Web/CSS

[CSS] <link rel="stylesheet" type="text/css" href="style.css">

뉴비뉴 2018. 3. 3.

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

댓글

💲 추천 글

티스토리툴바