[HTML] 태그 사용해보기 (웹 페이지 제작 1)

김졔이 2022. 4. 21. 22:08

2022. 4. 21. 22:08

안녕하세요. 졔이입니다! 😃

이번에는 저번 게시글에서 정리한 '태그'를 이용해 실제 웹 페이지를 제작해보려고 합니다.

HTML은 웹 페이지의 뼈대를 구성하는 단계이므로, 웹 페이지의 내용을 중심적으로 제작하게 됩니다.

만들어보고 싶은 웹 페이지를 기획해보고 실행에 옮겨보도록 하겠습니다 !

* 본 게시글은 유튜브 '생활코딩' 영상을 보고 공부한 내용을 저의 방식으로 해석하여 작성한 글입니다.

[ Index ]

1. 기획하기

2. 웹 페이지 제작하기

3. 웹 페이지 확인하기

1. 기획하기

저는 제가 좋아하는 캐릭터인 '스누피' 등장하는 'PEANUTS'를 소개하는 웹 페이지를 제작해보려고 합니다.

웹 페이지에 작성할 내용을 기획해보겠습니다.

HOME
- 웹 페이지에 접속했을 때, 처음 등장하는 페이지
- 'PEANUTS'라는 애니메이션의 정보 및 소개
- 'PEANUTS' 이미지 삽입
- 아래의 메뉴들을 클릭하면 다른 페이지로 접속하도록 링크 생성
- PEANUTS 공식 홈페이지 링크 삽입
스누피
- '스누피' 이미지 삽입
- '스누피'의 정보 및 소개
찰리 브라운
- '찰리 브라운' 이미지 삽입
- '찰리 브라운'의 정보 및 소개
샐리 브라운
- '샐리 브라운' 이미지 삽입
- '샐리 브라운'의 정보 및 소개
영상
- 'PEANUTS' 애니메이션 영상 링크 삽입

2. 웹 페이지 제작하기

HOME

<html>
  <head>
    <title>PEANUTS_HOME</title>
    <meta charset="utf-8">
  </head>


  <body>
    <h1><a href="HOME.html">PEANUTS</a></h1>
    <ol>
      <li><a href="스누피.html">스누피</a></li>
      <li><a href="찰리브라운.html">찰리 브라운</a></li>
      <li><a href="샐리브라운.html">샐리 브라운</a></li>
      <li><a href="영상.html">영상</a></li>
    </ol>
    <br>
    <img src="peanuts.jpg" width="600px" height="400px">
    <br>
    <h2><a href="https://www.peanuts.com/" target="_blank" title="PEANUTS 공식 사이트">PEANUTS</a></h2>
    <br>
    <h3>특징</h3>
    <p>
      조금 우울하지만 따뜻한 분위기에 만화로서는 과장되지 않은 적절한 균형이 묘미이다.

      언제나 루시 반 펠트에게 말꼬리를 잡혀서 타박당하거나 하는 일마다 좀처럼 풀리지 않으며 다소 심각한 찰리 브라운과 그의 비글종 반려견인 스누피 및 주변 친구들의 무미건조한 일상이 이야기의 중심이다. 어느 시대에나 읽을 수 있는 이야기를 만들고 싶었기 때문에 정치적·사회적 소재는 삼갔다고 작가가 밝혔다. 아이들의 이야기라고 보기에는 등장인물들이 너무 진지하고 심각하지만 사실상 그 주제는 아이들의 것이다.

      예를 들자면 크리스마스 전부터 루시 반 펠트와 라이너스 반 펠트가 우리는 형제자매고 서로를 사랑한다고 주변에 연기하고 다닌다(산타에게 선물을 받기 위해서) 당연히 그럴 리가 없다는 걸 알고 있는 찰리 브라운은 산타는 바보가 아니라고 충고하지만 둘은 "우리들은 영리한 애들이지만 산타는 그저 늙은이일 뿐"이라고 이야기하고 찰리 브라운은 "우리 세대에 대해서 실망했다"고 자책한다.

      대부분의 연재분이 이런 식으로 주변의 사소한 것들이나 말꼬리를 잡아 진지하고 심각하게 이야기를 진행시켜 나가서 조금 씁쓸한 웃음을 유도한다. 이는 냉소와는 거리가 좀 있는데, 어른들의 세상의 씁쓸한 일면들을 자기도 모르게 따라가고 있는 순진한 아이들이 주인공이기 때문이다. 마냥 밝지만은 않으면서도 유쾌하고 따뜻한 분위기는 이 연재만화가 50년 동안 계속될 수 있었던 원동력이다.
    </p>
    <br>
    <h3>작가</h3>
    <p>
      찰리 브라운이 작가인 찰스 먼로 슐츠의 페르소나라는 말이 거의 정설처럼 받아들여진다. 실제로 인터뷰를 보면 어린 시절의 찰스 슐츠는 상당히 소심하고 눈에 띄지 않는, 정말로 찰리 브라운 같은 아이였다고 한다. 그러나 그렇다고 찰리 브라운 찰스 슐츠 그 자체로 보는 것은 매우 부적절한 일이다. 작가가 언급한 적도 없으며, 미국에서 이런 식으로 슐츠의 전기를 썼던 사람이 유족들에게 가루가 될 때까지 까인 전적이 있다.

      슐츠는 고등학교 졸업 후 통신미술학교에서 만화를 배우게 되었으며, 이후 미술 교사로 재직하면서 동시에 세인트 폴 파이오니어 프레스 지에 만화를 연재하기 시작한다. 그는 1948년 1949년부터 피너츠의 전신이라 할 수 있는 "릴 포크스"(Li'l Folks)를 연재한 뒤 1950년부터 피너츠를 연재하기 시작했다.
    </p>
  </body>


</html>

스누피

<!doctype html>
<html>
  <head>
    <title>PEANUTS_스누피</title>
    <meta charset="utf-8">
  </head>


  <body>
    <h1><a href="HOME.html">PEANUTS</a></h1>
    <ol>
      <li><a href="스누피.html">스누피</a></li>
      <li><a href="찰리브라운.html">찰리 브라운</a></li>
      <li><a href="샐리브라운.html">샐리 브라운</a></li>
      <li><a href="영상.html">영상</a></li>
    </ol>
    <br>
    <img src="스누피.jpg" width="600px" height="400px">
    <br>
    <h2><u>스누피</u></h2>
    <br>
    <p>
    피너츠의 주인공. 만화에서의 공감요소와 재미의 대부분을 담당하고 있다. 일단 자신이 무슨 일을 시작해서 좋게 끝난 적이 거의 없으며 연 날리는 것조차 못한다. 밖에 나가면 아는 친구한테 갈굼당하지, 공감해 주는 사람도 많지는 않는데다가 심지어는 공부도 제대로 못하는 비운의 주인공.
    </p>
    <br>
    <h3>성격</h3>
    <p>
      찰리 브라운이 작가인 찰스 먼로 슐츠의 페르소나라는 말이 거의 정설처럼 받아들여진다. 실제로 인터뷰를 보면 어린 시절의 찰스 슐츠는 상당히 소심하고 눈에 띄지 않는, 정말로 찰리 브라운 같은 아이였다고 한다. 그러나 그렇다고 찰리 브라운 찰스 슐츠 그 자체로 보는 것은 매우 부적절한 일이다. 작가가 언급한 적도 없으며, 미국에서 이런 식으로 슐츠의 전기를 썼던 사람이 유족들에게 가루가 될 때까지 까인 전적이 있다.

      슐츠는 고등학교 졸업 후 통신미술학교에서 만화를 배우게 되었으며, 이후 미술 교사로 재직하면서 동시에 세인트 폴 파이오니어 프레스 지에 만화를 연재하기 시작한다. 그는 1948년 1949년부터 피너츠의 전신이라 할 수 있는 "릴 포크스"(Li'l Folks)를 연재한 뒤 1950년부터 피너츠를 연재하기 시작했다.
    </p>
  </body>


</html>

찰리 브라운

<!doctype html>
<html>
  <head>
    <title>PEANUTS_찰리브라운</title>
    <meta charset="utf-8">
  </head>


  <body>
    <h1><a href="HOME.html">PEANUTS</a></h1>
    <ol>
      <li><a href="스누피.html">스누피</a></li>
      <li><a href="찰리브라운.html">찰리 브라운</a></li>
      <li><a href="샐리브라운.html">샐리 브라운</a></li>
      <li><a href="영상.html">영상</a></li>
    </ol>
    <br>
    <img src="찰리브라운.jpg" width="600px" height="400px">
    <br>
    <h2><u>찰리 브라운</u></h2>
    <p>
      피너츠의 주인공. 만화에서의 공감요소와 재미의 대부분을 담당하고 있다. 일단 자신이 무슨 일을 시작해서 좋게 끝난 적이 거의 없으며 연 날리는 것조차 못한다. 밖에 나가면 아는 친구한테 갈굼당하지, 공감해 주는 사람도 많지는 않는데다가 심지어는 공부도 제대로 못하는 비운의 주인공.
    </p>
    <p>
      일단 멘탈 하나는 엄청나다. 누가 자신에게 어떤 짓을 하든지 우는 장면이 진짜 손에 꼽히게 없으며, 루시의 장난을 다 받아주는 것부터, 애들한테서 아무리 욕을 먹어도 그냥 평범하게 살아간다. 여동생인 샐리는 자신을 안 좋아한다고 해도 찰리 브라운은 대부분의 상황에서 샐리를 도와준다. 보다보면 성격이 쿨가이인 건지 아니면 호구인 건지 헷갈리지만 어느 쪽이든 멘탈 갑이자 대인배인 것은 확실하다.
    </p>
  </body>


</html>

샐리 브라운

<!doctype html>
<html>
  <head>
    <title>PEANUTS_샐리브라운</title>
    <meta charset="utf-8">
  </head>


  <body>
    <h1><a href="HOME.html">PEANUTS</a></h1>
    <ol>
      <li><a href="스누피.html">스누피</a></li>
      <li><a href="찰리브라운.html">찰리 브라운</a></li>
      <li><a href="샐리브라운.html">샐리 브라운</a></li>
      <li><a href="영상.html">영상</a></li>
    </ol>
    <br>
    <img src="샐리브라운.jpg" width="600px" height="400px">
    <br>
    <h2><u>샐리 브라운</u></h2>
    <p>
      만화 피너츠의 등장인물. 찰리 브라운의 동생이다. 찰리 브라운이 어머니를 통해 여동생을 가지게 됐다고 했을때 동네방네 뛰어다니며 "나 여동생 생겼다!!"라며 좋아했을 정도로 샐리가 태어나자 매우 아꼈으며 매일 귀엽다고 자랑해 친구들을 질리게 만들기도 했다.
    </p>
    <p>
      학교에 대한 모든 것을 질색하며 학교 가는 것을 찰리와 얘기하기 전까지는 진저리를 쳤을 정도. 그 외에 자기 오빠가 마음이 약하고 원하는 걸 다 이루어 줄 수 있다는 걸 이용해서 숙제를 시키기도 하고, 빈백 소파에 누워서 TV 보는 게 하루 일과. 공부를 싫어하는 캐릭터들이 많긴 하지만 이 녀석은 그 중에서도 압도적이다.
    </p>
  </body>


</html>

영상

<!doctype html>
<html>
  <head>
    <title>PEANUTS_영상</title>
    <meta charset="utf-8">
  </head>


  <body>
    <h1><a href="HOME.html">PEANUTS</a></h1>
    <ol>
      <li><a href="스누피.html">스누피</a></li>
      <li><a href="찰리브라운.html">찰리 브라운</a></li>
      <li><a href="샐리브라운.html">샐리 브라운</a></li>
      <li><a href="영상.html">영상</a></li>
    </ol>
    <br>
    <h2><u>영상</u></h2>
    <br>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/1lGokJl3I8c" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </body>


</html>