HTML : 1. 원하는 문구 출력하기

SongWoo Yu·2025년 2월 16일
0

앞서 올린 hello html을 출력하는 html 파일에서는 body 사이에 원하는 문구를 적으면 그대로 출력되는 것을 볼 수 있었다. 이제 위키피디아에서 내가 원하는 부분을 그대로 출력해보도록 하겠다. 마찬가지로 원하는 부분은 복사한 다음에 body 사이에 그걸 붙여넣도록 하겠다.

그리고 실행해주면 마냥 원하는 대로 나오진 않는다.

이를 해결하기 위해 제목에 해당되는 부분에는 다음과 같이 태그를 해준다. <h1>깃허브<H1>

그 다음에는 긴 줄을 그려줘야 한다. <hr>을 사용하면 짠!
그리고 <p>내용<p> 이렇게 p태그를 이용하여 내용부분을 입력해준다. 마지막으로 목차부분을 생성해볼 것이다. 목록은 다음과 같이 ul 태그 안에 li태그로 각각 작성해주면 된다.

    <ul>
      <li>깃허브의 역사</li>
      <li>깃허브의 서비스</li>
      <li>깃허브의 개발 프로젝트</li>
      <li>깃허브의 검열</li>
      <li>깃허브의 보안 문제</li>
      <li>깃허브의 논란</li>
      <li>깃허브의 같이 보기</li>
      <li>깃허브의 각주</li>
      <li>깃허브의 외부 링크</li>
    </ul>

이렇게 출력되는 것을 볼 수 있다. 겉보기에는 위키백과 같아 보인다.

다음은 하이퍼링크를 거는 방법이다. 먼저 원하는 위치에 a를 입력하고 enter을 누르면 a태그가 생성되는데, 이를 이용하면 된다. <a href="https://ko.wikipedia.org/wiki/%EB%A3%A8%EB%B9%84_%EC%98%A8_%EB%A0%88%EC%9D%BC%EC%A6%88">루비 온 레일스</a>와 같이 a hredf=이후에 "url"을 작성, >이후에 문구를 작성하면 된다.
그리고 개행을 원한다면 br태그를 이용해주면 된다. <br />
마지막으로 타이틀을 변경해본다. <title>wiki-Github<tiltle>로 변경해주면 창의 이름이 wiki-Github로 변경된다.

0개의 댓글