cording/생활코딩
[CSS] 코드의 간결화
효기롭다
2022. 3. 2. 01:47
<html>
<head>
<title>SEVENTEEN - HIPHAP TEAM</title>
<meta charset="utf-8">
<style>
body{
margin: 0;
}
a {
color:black;
text-decoration: none;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin: 0;
padding: 20px;
}
ol{
border-right: 1px solid gray;
width: 160px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 210px 1fr;
}
#grid ol{
padding-left: 33px;
}
#article{
padding-left: 30px;
}
@media(max-width:720px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">SEVENTEEN</a></h1>
<div id="grid">
<ol>
<li><a href="1.html">HIPHAP TEAM</a></li>
<li><a href="2.html">VOCAL TEAM</a></li>
<li><a href="3.html">PERPOMONCE TEAM</a></li>
</ol>
<div id="article">
<h2>HIPHAP TEAM</h2>
* 각 페이지에 <style> 태그 내용을 붙여놓기 하면 똑같이 적용된다.
그러나 불편하기 때문에 <style> 태그의 내용을 하나의 페이지로 만들어 적용시키기로한다.
<head>
<title>SEVENTEEN - HIPHAP TEAM</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<head>
<title>SEVENTEEN - HIPHAP TEAM</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css"> : <style>태그 대신 넣어준다.
</head>
<body>
*href="페이지이름"
왜? 간결화를 해야하는가 꼭 기억하자.