이미지와 그라데이션 효과로 배경 꾸미기 4 - 단원 마무리 및 연습문제 풀기

 

오늘은 아침 시간에 자율학습이 있어서 새벽에 하다 만 공부를 이어서 하기로 했다. 오늘로써 HTML/CSS 공부 6일차이다. 수업 시간에 배운 것들도 함께 정리하니 시간이 많이 걸리지만 그래도 CSS도 절반 이상 학습했다. 오늘까지 고급 선택자 공부를 다 마치고 총 복습을 한 후 내일부터는 새로운 분야 학습에 들어가려고 한다.

다음에 공부할 분야는 자바이다. 자바도 6일 정도 학습을 하고 또 다른 학습으로 넘어가고.. 앞으로 이런 식으로 공부를 이어가기로 했다. 공부를 해보니 5일은 좀 짧았고 하나의 과정을 마치기에 7일은 좀 길었다. 6일이 적당한 것 같다.

 

공부할 분량이 많으면 6일 내내 학습을 이어가고 그렇지 않으면 5일 하고 하루는 나만의 프로젝트를 만들어서 미션을 수행하는 방식으로 학습을 이어가기로 했다.

이제 단원을 정리하고 문제를 풀어보기로 하자!

---

 

 

 

단원 한눈에 마무리하기

 

---

 

 

 

 

연습 문제 풀기

 

문제 1번

 

 

 

여기에 배경을 넣는 문제이다. 이제 풀어보자!

---

 

 

 

틀린 코드

 

 

배경이 너무 가득차서 이미지까지 덮어버렸다.

---

 

 

 

다시 풀어보기

 

.container에 배경 색깔을 넣어주니 잘 되었다. 이렇게 하는 거였다~

---

 

 

 

 

문제 2번

 

이 문제는 문제 html 문서가 없어서 내가 따로 문제를 만들고 풀어보기로 했다.

 

 

---

 

문제 풀어보기

 

 

정말 잘 풀었다. 이제 딱 한 문제가 남아있다. 10시 반까지 다 마치고 다음 학습을 진행해야지!

---

 

 

 

 

문제 3번

 

 

 

 

이제 CSS를 입혀 디자인을 해볼 차례이다.

---

 

 

틀린 코드

 

분명 이미지를 넣었는데 왜 안 들어가는지 모르겠다.

---

 

 

 

 

다시 풀어보기

 

body 태그를 만들어서 그 안에 배경색을 넣는 거였다. 그리고 콘텐츠 안에 들어가는 배경색은 background에 지정하는데 컬러를 맨 앞에 써주고 url을 넣어준다.

근데 책과 다른 오류를 또 하나 발견했다. 9장에서도 해답과 문제 문서가 2개씩밖에 존재하지 않아서 문제를 내가 혼자서 만들어서 풀었다. 3번 해답에는 분명 이미지가 뜨는데 내가 만든 건 이상하게 되지 않아 그 이유를 살펴보았다. 알고 보니 책에는 배경 이미지를 반복하지 않고 오른쪽 아래에 고정한다고 지시사항이 주어져 있었다.

그러나 이렇게 고정해버리면 이미지가 뜨지 않는 문제가 발생한다. 그러니 책에 고정한다가 아닌 배치한다로 고쳐야 할 것 같다. 

 

이 책에서도 오타를 여러 번 발견했다. 9단원에서 아래쪽에 있는 작은 글씨로 단원이 소개된 부분에서 띄어쓰기가 되어 있지 않는 문제도 있고.. 책의 판형을 여러번 변경했음에도 이러한 것을 깨닫지 못한 모양이다.

 

---

 

 

학습을 마치고

아침 자율학습 시간에 3문제를 풀어보았다. 문제가 갈수록 어려워지지만 그만큼 내 실력도 향상되는 것 같아서 기쁘다. 이제 시험 볼 준비를 해야 할 것 같다. 10장 고급 선택자는 집에 가서 공부해봐야지!