일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 안드로이드 앱
- 안드로이드 프로그래밍
- 완강
- selector
- 앱
- 코딩
- 안드로이드 개발
- 생활코딩
- 앱 프로그래밍
- 안드로이드 공부
- CSS
- C++
- 백준온라인저지
- tag
- 이지스퍼블리싱
- android studio
- BAEKJOON
- 백준
- HTML
- 생활코딩 웹
- Android programming
- 프로그래밍
- BOJ
- 코딩테스트
- web
- 웹
- vscode
- 앱 개발
- github
- Java
Archives
- Today
- Total
*반짝이는*이끌림
[생활코딩] WEB2(CSS_07) CSS 코드의 재사용 본문
* Windows 운영체제 기준으로 작성되었습니다.
* vs code editor를 사용합니다.
§ CSS 코드의 재사용 → Click!
하나의 웹 사이트에서 모든 웹페이지들에게 동일한 스타일을 주고 싶을 때 중복적으로 코드를 계속 작성하는건 번거로우므로, 코드를 재사용 해 봅시다. 일단 모든 html 파일 들에서 중복되고 있는 CSS 코드들(<style> 태그 제외)을 복사해서 style.css 파일에 붙여넣어 봅시다. 그 후 기존의 html 파일들에서 <style> 태그를 지워주고, <link> 태그를 이용한다면, style.css라는 별도의 파일에 저장된 CSS를 기존의 html들에서 사용할 수 있게 됩니다.
* style.css *
h1 {
text-align: center;
font-size: 60px;
border-bottom:3px black solid;
padding:20px;
margin:0px;
}
.list {
text-decoration: none;
font-size: 30px;
}
#grid {
display: grid;
grid-template-columns: 220px 1fr;
}
#article {
padding:20px;
}
#grid ol {
border-right: 3px black solid;
width:150px;
margin:0;
padding-left:50px;
padding-top: 20px;
}
@media(max-width:800px) {
h1 {
font-size: 40px;
border-bottom:none;
}
#grid {
display: block;
}
#grid ol {
border-right:none;
}
.list {
font-size: 20px;
}
}
* index.html *
<!DOCTYPE html>
<html>
<head>
<title>web2 실습용 파일</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>WEB2</h1>
<div id = "grid">
<ol>
<li><a href="1.html" class ="list">HTML</a></li>
<li><a href="1.html" class ="list">CSS</a></li>
<li><a href="1.html" class ="list">JavaScript</a></li>
</ol>
<div id="article">
<h2>CSS</h2>
<p>
Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>)
is a style sheet language used for describing
the presentation of a document written in a markup
language.[1] Although most often used to set the
visual style of web pages and user interfaces
written in HTML and XHTML, the language can be
applied to any XML document, including plain XML,
SVG and XUL, and is applicable to rendering in
speech, or on other media. Along with HTML and
JavaScript, CSS is a cornerstone technology used
by most websites to create visually engaging
webpages, user interfaces for web applications,
and user interfaces for many mobile applications.
</p>
</div>
</div>
</body>
</html>
'Computer > Web' 카테고리의 다른 글
[생활코딩] WEB2 CSS 완강 (0) | 2020.04.23 |
---|---|
[생활코딩] WEB2(CSS_06) 반응형 디자인과 미디어 쿼리 소개 (0) | 2020.04.23 |
[생활코딩] WEB2(CSS_05) 그리드 (0) | 2020.04.22 |
[생활코딩] WEB2(CSS_04) 박스모델 (0) | 2020.04.22 |
[생활코딩] WEB2(CSS_03) CSS 선택자 (0) | 2020.04.21 |
Comments