티스토리 뷰
[WEBn] WEB2 - CSS
생활코딩 강의를 들었던 것을 정리를 하겠습니다.
이번 시간에는 중복을 제거하고 재사용성을 높이며 유지보수를 효율적으로 하는 방법을 설명하겠습니다.
그리고 이전 다른 .html에도 모두 적용을 하겠습니다.
<!doctype html>
<html>
<head>
<title>WEB2 - CSS></title>
<meta charset="utf-8">
<style>
body{
margin: 0;
border-bottom: 1px solid gray;
}
a {
color: black;
text-decoration:
}
#active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin:0;
padding:20px;
}
ol {
border-right: 1px solid gray;
width:100px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left: 32px;
padding-right: 1px;
}
#article h2, p{
margin-left: 10px;
}
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
</style>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" title="HTML이란">HTML</a></li>
<li><a href="2.html" title="CSS이란" id="active">CSS</a></li>
<li><a href="3.html" title="JavaScript">JavaScript</a></li>
<li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>
</ol>
<div id="article">
<h2>CSS이란 무엇인가?</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>
</p>
</div>
</div>
</body>
</html>
재사용성을 높이기 위해서
새로운 style.css 을 만듭니다.
이후 style 태그 안에 있는 css 부분을
style.css 안에 붙어 넣어 줍니다.
body{
margin: 0;
border-bottom: 1px solid gray;
}
a {
color: black;
text-decoration: none;
}
#active {
color: red;
}
h1 {
font-size: 45px;
text-align: center;
border-bottom: 1px solid gray;
margin:0;
padding:20px;
}
ol {
border-right: 1px solid gray;
width:100px;
margin: 0;
padding: 20px;
}
#grid{
display: grid;
grid-template-columns: 150px 1fr;
}
#grid ol{
padding-left: 32px;
padding-right: 1px;
}
#article h2, p{
margin-left: 10px;
}
@media(max-width:800px){
#grid{
display: block;
}
ol{
border-right: none;
}
h1{
border-bottom: none;
}
}
이러한 식으로 만들고 난 후
기존 style 태그를 지워 줍니다.
지워 주게 되면
<!doctype html>
<html>
<head>
<title>WEB2 - CSS></title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<div id="grid">
<ol>
<li><a href="1.html" title="HTML이란">HTML</a></li>
<li><a href="2.html" title="CSS이란" id="active">CSS</a></li>
<li><a href="3.html" title="JavaScript">JavaScript</a></li>
<li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>
</ol>
<div id="article">
<h2>CSS이란 무엇인가?</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>
</p>
</div>
</div>
</body>
</html>
이렇게 될 것입니다.
이거를 가지고 style.css 을 가지고 오는 것입니다.
<link rel="stylesheet" href="style.css">
이렇게 head 태그 안에 기존 style 태그가 있던 곳에 적어도 됩니다.
그러게 되면
링크를 걸어 style.css 을 불러오게 됩니다.
<!doctype html>
<html>
<head>
<title>WEB2 - CSS></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" title="HTML이란">HTML</a></li>
<li><a href="2.html" title="CSS이란" id="active">CSS</a></li>
<li><a href="3.html" title="JavaScript">JavaScript</a></li>
<li><a href="Iron man.html" title="아이언맨 슈트 변화">Iron man</a></li>
</ol>
<div id="article">
<h2>CSS이란 무엇인가?</h2>
<p>
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.<br>
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.<br>
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.<br>
This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.<br>
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.<br>
</p>
</div>
</div>
</body>
</html>
최종 이렇게 변경을 하여도 웹 브라우저에서는 달라지는게 없어 보이지만
실제로는 내부적으로는 네트워크를 통해 style.css를 불러오는 동작이 진행 될 것입니다.
적은 트래픽을 사용하고 변경하고 싶은 부분을 style.css에서만 수정을 하면 style.css를 사용하는 모든 곳을
수정을 할 수 있기 때문입니다.
코드의 재사용 소개 강의
https://opentutorials.org/course/3086/18327
'WEBn > WEB2 - CSS' 카테고리의 다른 글
| [WEBn] WEB2 - CSS - 반응형 디자인과 미디어 쿼리 소개 (0) | 2018.05.01 |
|---|---|
| [WEBn] WEB2 - CSS - 그리드 (0) | 2018.05.01 |
| [WEBn] WEB2 - CSS - 박스모델 (0) | 2018.04.30 |
- Total
- Today