반응형
CSS 최적화
웹사이트를 열심히 만들다보니 어느덧 코드가 엄청 길어졌습니다.
옆에 앉아 있던 친구가 제 코드를 쓱 보더니 한 마디 하네요.
“뭘 그렇게 복잡하게 해? 그거 열 줄이면 되는데~ ㅎㅎ”
아, 자존심 상합니다! 얼른 CSS 코드를 열 줄(빈 줄 제외)로 줄여보세요.
결과물이 동일하다면 HTML 코드를 조금 변형해도 됩니다.
결과물은 아래 사진과 같습니다.
<html>
<head>
<title>프로그래밍 커리큘럼</title>
<meta charset="utf-8">
<link rel="stylesheet" href="Styles.css">
</head>
<body>
<div class="container">
<div class="box-one">
<h2>HTML</h2>
</div>
<div class="box-two">
<h2>CSS</h2>
</div>
<div class="box-one">
<h2>JAVASCRIPT</h2>
</div>
<div class="box-two">
<h2>PYTHON</h2>
</div>
<div class="box-one">
<h2>JAVA</h2>
</div>
</div>
</body>
</html>h2 {
padding: 20px;
font-size: 30px;
}
.box-one h2 {
background: #FA987D;
}
.box-two h2 {
background: #72CCA7;
}
본 내용은 Codeit의 '웹 퍼블리싱' 강의를
참고하여 작성한 내용입니다.
반응형
'Front-end > HTML&CSS' 카테고리의 다른 글
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
|---|---|
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.08 |
| [웹 퍼블리싱] 02. HTML/CSS 핵심개념 (0) | 2021.02.06 |