웹사이트를 열심히 만들다보니 어느덧 코드가 엄청 길어졌습니다.
옆에 앉아 있던 친구가 제 코드를 쓱 보더니 한 마디 하네요.
“뭘 그렇게 복잡하게 해? 그거 열 줄이면 되는데~ ㅎㅎ”
아, 자존심 상합니다! 얼른 CSS 코드를 열 줄(빈 줄 제외)로 줄여보세요.
결과물이 동일하다면 HTML 코드를 조금 변형해도 됩니다.
결과물은 아래 사진과 같습니다.
셀프 채점
다음 항목들이 제대로 구현되었는지 확인해 보세요!
CSS 코드가 빈 줄을 제외하고 열 줄 이하이다.
코드를 짧게 줄여도 결과물이 기존과 동일하다.
과제 해설
CSS에서 상속을 사용하는 가장 중요한 이유는, 중복 코드를 제거하고 유지 보수를 용이하게 하기 위함입니다.
아래와 같이 HTML을 약간 수정하고, CSS 코드를 정리하면 동일하게 동작하는 더 짧은 코드를 만들 수 있습니다.
<html>
<head>
<title>프로그래밍 커리큘럼</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/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>
css
h2 {
padding: 20px;
font-size: 30px;
}
.box-one h2 {
background: #FA987D;
}
.box-two h2 {
background: #72CCA7;
}
'교육 > [Codeit]웹 퍼블리싱' 카테고리의 다른 글
| css 우선순위 (0) | 2021.07.11 |
|---|---|
| css 상속 (0) | 2021.07.11 |
| 실습과제. 마우스 오버 버튼 (0) | 2021.07.11 |
| 선택자 정리 (0) | 2021.05.12 |
| 실습과제. 코딩의 민족 (0) | 2021.05.12 |
