[HTML] 생활코딩_복습 겸 웹페이지 보강

SMALL

안녕하세요~ 보라해바라기입니다!

오늘은 제가 이때까지 배운 HTML 개념을 이용해 제가 만들고 있는 웹페이지를 보강해봤습니다.

제가 오늘 추가한 것은

"보라해바라기의 과거" 페이지를 초등학교, 중학교, 고등학교 시절로 세분화하여 링크 달기
초등학교, 중학교, 고등학교 시절에서 이전 페이지인 "보해의 과거"로 돌아갈 수 있는 이전 버튼 만들기
"초등학교", "중학교", "고등학교" 제목을 만들고 각 제목에 해당 학교 페이지 주소를 링크하기

이 세 가지 입니다.

간단한 세 요소를 제작하는데도 제가 배운 HTML 문법들이 꽤 많이 사용되는 경향이 있었답니다~

제가 추가한 파일들의 소스코드와 그 실행결과를 공유하고 오늘은 글을 마치겠습니다!

저번에 보여드렸던 "보해의 과거" 페이지를 초등, 중등, 고등으로 세분화하여 더 간결하게 만들었습니다!

※ 초등학교는 4.html , 중학교는 5.html, 고등학교는 6.html 파일을 생성해서 만들었습니다^_^

1. 4.html

<!doctype html>
<html>
<head>
<title>보해의 인생_Elementary</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<h2>보라해바라기의 과거</h2>
<h3><a href="http://www.hagnam.es.kr/" target="_blank" title="학남초등학교">초등학교</a></h3>
<p>보라해바라기는 초등학교때부터 <strong>사회 복지</strong> 분야에 관심이 많았다.
<br>그 바탕에는 부모님, 특히 <u>어머니</u>의 영향이 컸다.
초등학교 시절부터 어머니와 함께 노인센터, <a href="http://www.aemangwon.com/" target="_blank" title="애망원">장애인 고아원</a> 등 여러 복지기관에서 봉사를 했다.</p>
<img src="volunteering.jpg" width="450">
<p><a href="1.html">이전</a></p>
</body>
</html>

2. 5.html

<!doctype html>
<html>
<head>
<title>보해의 인생_Middle</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<h2>보라해바라기의 과거</h2>
<h3><a href="http://www.haknam.ms.kr/" target="_blank" title="학남중학교">중학교</a></h3>
<p>초등학교 때 했던 봉사활동을 중심으로 보라해바라기는 <strong>사회복지사</strong>가 되고 싶었다.
<u>사교성</u>이 좋았던 보라해바라기는 다양한 친구들과 어울리며 인간관계에 대해서 배웠다.</p>
<img src="social worker.jpg" width="450">
<p>중학교 3학년 때, 보라해바라기는 심리학과 관련된 책을 읽고 심리학의 매력에 빠지게 된다.</p>
<p><a href="1.html">이전</a></p>
</body>
</html>

3. 6.html

<!doctype html>
<html>
<head>
<title>보해의 인생_High</title>
<meta charset="utf-8">
</head>
<body>
<h1><a href="index.html">보라해바라기</a></h1>
<h4>목차</h4>
<ol>
  <li><a href="1.html"> 과거</a></li>
  <li><a href="2.html"> 현재</a></li>
  <li><a href="3.html"> 미래</a></li>
</ol>
<h2>보라해바라기의 과거</h2>
<h3><a href="http://www.woonam.hs.kr/" target="_blank" title="운암고등학교">고등학교</a></h3>
<p> 보라해바라기는 <strong>심리학</strong>에 관심이 많은 고등학생이 되었다.
심리학과 관련된 책도 열심히 읽고 그와 관련된 활동들도 참여하며
심리학 분야에 종사하고 싶다는 생각을 하게 된다.
그 중에서도 <u>상담</u>분야에 큰 관심을 가지게 된다.</p>
<img src="counselor.jpg" width="450">
<p><a href="1.html">이전</a></p>
</body>
</html>

오늘의 글은 일찍 마무리하게 되었습니다 ㅎㅎ

아직 HTML을 배운지 얼마되지 않았지만 생각보다 많은 것을 구현할 수 있다는 것을 직접적으로 느낀 하루였어요!

앞으로 얼마나 많은 것들을 만들 수 있을지에 대한 기대감도 생겼어요~

조금씩이지만 하루하루 발전해나가는 제 웹페이지를 보며 뿌듯하게 하루를 마무리 할 수 있을 것 같아요.

저의 웹페이지를 직접 실행해보시고 싶은 분은

https://github.com/purple-sunflower

상단의 깃허브 링크를 들어가서 마음껏 구경해보세요:)

오늘은 여기서 글을 마무리하도록 하겠습니다!

728x90

저작자표시

'HTML & CSS' 카테고리의 다른 글

[CSS] 생활코딩 8~11 _ 박스모델, 그리드 (0)	2021.07.07
[CSS] 생활코딩 1~7 _ 폰트 색, 밑줄, 크기, 정렬, 선택자 (1)	2021.07.06
[HTML] 생활코딩 19~20, 부록 _ 윈도우에서 웹 서버, 동영상 삽입, 댓글과 채팅 기능, 웹사이트 방문자 분석 (1)	2021.07.05
[HTML] 생활코딩 15~18 _ 링크, 웹, 클라이언트와 서버, 웹호스팅 (2)	2021.07.03
[HTML] 생활코딩 1~14 _ 여러 태그와 속성, HTML의 구성 (5)	2021.07.02