오늘은 웹페이지에 변경 사항이 있을 경우 쉽게 변경하는 방법인 style.css를 배웠다.
이전까지는 .html 파일에 <style>태그를 추가하였다.
이전에 사용했던 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
border:5px solid red;
display: inline;
}
a{
border:5px solid red;
display: block;
}
</style>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language.
</body>
</html>이런 식으로 코드를 계속 작성할 경우 파일이 많아졌을 때 수정하기 번거로워진다.
이때 style.css를 이용하면 수정이 편리해진다.
styel.css
body{
margin:0;
}
a{
color:black;
text-decoration:none;
}
h1{
font-size: 60px;
text-align:center;
border-bottom:1px solid gray;
margin:0;
padding:20px;
}
#grid ol{
border-right: 1px solid gray;
width: 100px;
margin: 0;
padding: 20px;
}
#grid{
display:grid;
grid-template-columns: 150px 1fr;
}
ol{
padding: 33px;
}
#article{
padding: 25px;
}
@media(max-width:800px){
#grid{
display:block;
}
#grid ol{
border-right:none;
}
h1{
border-bottom:none;
}
}해당 .html 파일에 추가했던 <style>을 제거하면 코드가 간결해지고, 웹페이지 수정도 더욱 편리해진다.
수정한 .html
<!DOCTYPE HTML>
<html>
<head>
<title>WEB - HTML</title>
<meta charset="utf-8">
<link rel ="stylesheet" href="style.css">
</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">
<h2>HTML</h2>
<p> HyperText Markup Language or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
</p>
</div>
</div>
</body>
</html>'소프트웨어 > JavaScript' 카테고리의 다른 글
| [JavaScript] Javascript alert(onclick, onchange) (0) | 2023.01.29 |
|---|---|
| [JavaScript] JavaScript와 HTML의 연관성 (0) | 2023.01.29 |
| [CSS] Media Query(미디어 쿼리) 소개와 활용 (1) | 2023.01.27 |
| [CSS] Grid(그리드) 소개와 활용 (0) | 2023.01.27 |
| [CSS] box model의 기초 (0) | 2023.01.26 |
