-
[CSS] CSS 코드의 재사용Web/CSS 2020. 5. 16. 03:09
CSS 코드의 재사용
1. 웹 페이지에 중복돼 있는 CSS 코드에서 <style> 태그를 제외한 순수한 CSS 코드만 복사해서 style.css 파일에 붙여넣은 뒤 <style> 태그의 내용을 다 지운다.
body{margin: 0px;}
h1{
color:purple;
padding: 20px;
margin: 0;
border-bottom: 1px solid gray;
}
ol, ul, h3{
width: 150px;
margin: 0;
padding: 10px;
}
a{color: gray;
text-decoration:none;
}
img{
display:block;
margin-left: auto;
margin-right: auto;
padding: 20px;
}
#grid{display: grid;
grid-template-columns: 300px 1fr;
}
#article{padding-left: 60px;}
#menu{border-right: 1px solid gray;}
p{margin-bottom: 45px;
text-align: center;
}
@media(max-width: 800px) {
#grid{display: block;
border-right: none;
}
#giral{display: grid;
grid-template-columns: 1fr 1fr;
}
#article{padding-left: 10px;
padding-right: 10px;
}
#menu{display: grid;
grid-template-columns: 1fr 1fr;
border-right: none;
}
h1 {border-bottom: none;
text-align: center;
}
}
2. style 태그를 지우고 <link> 태그로 css 파일을 연결한다.
<html>
<head>
<title>김방울 - 방울위키</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" />
우리가 한번 style.css 파일을 다운로드했다면 이 style.css의 내용이 바뀌기 전까지는 웹 브라우저가 우리의 컴퓨터에 파일을 저장해 뒀다가 다음에 style.css 파일을 요청하면 저장된 결과를
가져와 속도를 높일 수 있음. 결론적으로, 훨씬 더 빠르게 웹 페이지를 보여줄 수 있으면서 네트워크 트래픽을 훨씬 더 적게 쓸 수 있음.
www.evernote.com/l/AleEqjmLTbpLo5MYXfgpUIDdRGwcBgkufys/
CSS 코드의 재사용
CSS 코드의 재사용 1. 웹 페이지에 중복돼 있는 CSS 코드에서
'Web > CSS' 카테고리의 다른 글
[CSS] 분할태그와 CSS응용, block을 이용한 레이아웃 설계 (0) 2020.05.16 [CSS] CSS의 이해, CSS의 선택자, 웹폰트 적용 방법, 벤더 프리픽스 (0) 2020.05.16 [CSS] 미디어 쿼리 (0) 2020.05.16 [CSS] 블록 모델, 그리드 (0) 2020.05.15 [CSS] css를 이용한 텍스트 꾸미기, 사진 정렬, class와 id 선택자 (0) 2020.05.15