웹 문서에 다양한 내용 입력하기 8 - 목록 만들고 이미지 삽입하기 실습

이 부분은 인사교 수업 시간에 진행했던 내용인데 한번 정리해보기로 했다. 사실 책에 모두 나와있는 내용이라서 생략하려고 했으나 그래도 책에 없는 내용도 다루고 있어 짧게라도 소개하는 것이 좋을 것 같다. 공부할 내용이 정말 많고 수업의 진도를 따라가지 못해 복습은 꿈도 못 꾸고 있지만 그래도 이제는 차근차근 정리해보려고 한다.

책으로 학습을 한번 진행해서 수업의 내용도 별로 어렵지 않았다.

 

---

 

 

 

1. 목록 만들기

 

 

 

 

순서가 있는 목록과 순서가 없는 목록을 이렇게 만들어 볼 수 있다. 그래도 처음에는 수업을 나름 잘 들어서 어렵지만 따라서 필기를 잘 했다. 나중에 갈수록 잘 하지 않았지만 말이다.

---

 

 

 

2. 하이퍼링크

 

 

 

텍스트를 클릭하며 해당 링크로 이동한다. 네이버로 이동할 수도 있고 실습 파일로도 이동하는 기능을 넣었다. 실습 파일은 지난번에 학습했던 기아 타이거즈 위키백과사전을 넣었다.

---

 

 

 

3. 이미지 삽입

 

 

 

이미지가 표시되지 않을 때는 alt 속성으로 기록한 내용이 나타난다.

---

 

 

 

4. 이미지 링크로 이동

 

 

원래 실습은 그냥 '인공지능 사관학교로 이동합니다'를 클릭하면 사이트로 이동하는 거였는데, 난 로고를 클릭하면 이동하도록 만들고 싶었다. 수업 시간에 배운 것뿐 아니라 혼자서 응용하여 문제를 풀어보는 작업도 정말 중요하다.

 

 

 

이렇게 사이터로 이동이 잘 되고 있다.

 

---

 

학습을 마치고

 

분량이 좀 많아서 여기까지 진행해본다. 이 수업은 HTML/CSS 수업 둘째날 진행했던 내용이었다. 수업 내용도 정리해보니 정말 중요한 것들을 다루고 있었다. 앞으로 배운 것들을 빠짐없이 학습일지에 기록해보기로 했다. 나중에 이것도 중요한 포트폴리오가 될 것 같다.