HTML [기본적인 문서 작성 태그]

15250 단어 정리html독학html

🎈 독학하며 정리한 글로, 정확하지 않은 부분들이 많을 수 있습니다. 혹여나 수정해야 할 부분을 발견하신다면 댓글로 달아주시면 감사드리겠습니다.

📚문서 작성 태그

문서 작성 태그라 하면 맞는 말일지는 모르겠지만... 기본적으로 텍스트를 화면에 표시하는데 쓰이는 태그들을 정리해보겠다.

📝<meta charset> 태그

메타 태그에 대해서는 후에 따로 정리하겠다. 이번에는 html 작성 시, 기본적으로 쓰이는 메타 태그의 속성 중, charset 속성에 대해 설명하겠다.

👉예시 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTP-8">
  </head>
</html>

메타 태그의 charset 속성은 html의 인코딩 방식을 지정하는 속성이다. 일반적으로 html에서는 유니코드를 위한 문자셋인 "UTP-8"을 많이 사용하기 때문에 이 코드를 많이 사용한다.

📝<title> 태그

title 태그는 2가지로 사용될 수 있다. 우선 head에 사용될 때의 예시코드이다.

👉head 예시코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTP-8">
    <title>타이틀 이름</title>
  </head>
  <body>
    ...
  </body>
</html>

title 태그 사이에 이름을 넣어줘 웹페이지 상단 탭에 표시되는 웹페이지 제목을 지정할 수 있다.

👉body 예시코드

<body>
  <h1 title="title 속성으로 툴팁 달기">
    텍스트</h1>
</body>

간단히 body 부분만 가져왔다. 태그의 시작 부분에 속성으로 사용되어 마우스를 해당 텍스트에 가져왔을 때 해당 속성값을 띄워주는 툴팁의 역할을 한다.

📝<h1~h6> 태그

h1 ~ h6 태그는 웹페이지에 문단 제목을 달 때 사용된다. 1이 가장 큰 제목으로 6으로 갈 수록 글자가 작아지고 중요도가 낮아진다. heading 태그라고도 불린다.

👉예시 코드

<body>
  <h1>h1 제목</h1>
  <h2>h2 제목</h2>
  <h3>h3 제목</h3>
  <h4>h4 제목</h4>
  <h5>h5 제목</h5>
  <h6>h6 제목</h6>
</body>

📝<p> 태그

p 태그는 단락을 나눌 때 사용된다.

👉예시 코드

<body>
  <p>
    첫 번째 단락 작성 내용
    이렇게 작성하면 단락 단위로 내어 쓰기와 들여 쓰기가 가능</p>
  <p>
    두 번째 단락 작성 내용
    여러 개의 빈 칸은 하나로 취급, 엔터 키 역시 하나의 빈칸으로 취금</p>
</body>

📝<hr> 태그

hr 태그는 웹페이지에 수평선을 그을 때 사용된다.

👉예시 코드

<body>
  <p>첫 번째 단락 작성 내용</p>
  <hr>
  <p>두 번째 단락 작성 내용</p>
  <hr>
</body>

다음과 같이 사용하면 첫 번째 단락과 두 번째 단락 사이에 하나, 두 번째 단락 아래로 하나씩 수평선이 그려진다.

📝<br> 태그

br 태그는 엔터키와 같은 역할을 한다.

👉예시 코드

<body>
  이렇게 텍스트를 쓰다가
  이렇게 엔터키로 아래로 써도 웹페이지에서는 이어서 출력
  <br>
  br 태그를 써주면 이 내용부터 다음 줄로 넘어감
  <br><br>
  두 번 써줘서 엔터키 2번
</body>

텍스트 내용을 다음 줄로 넘기는, 엔터키와 같은 역할을 한다고 생각하면 된다.

📝<pre> 태그

pre 태그는 개발자가 작성한 포맷을 그대로 웹페이지에 출력해주는 역할을 한다.

👉예시 코드

<body>
  <p>
  아무리 엔터키를 이용해서
  새로운 줄에 작성해도
  한 줄로 출력됨</p>
  <pre>
  pre 태그를 이용하면
  사용자가 입력한 그대로
  출력된다!!
  단, 자동으로 들여쓰기된 탭도 그대로 반영되어 출력됨</pre>
</body>

p 태그 안에서는 텍스트를 줄을 나누어 출력해도 그대로였지만 pre 태그 안에서는 입력한 그대로 화면에 출력이 된다.

📝텍스트 꾸미기에 사용되는 태그

텍스트를 굵게 하거나 강조하는 꾸미기에 사용되는 태그는 아래와 같다.

👉예시 코드

<body>
  <b>진하게</b>
  <strong>똑같이 진하게</strong>
  <i>이텔릭체</i>
  <em>똑같이 이텔릭체</em>
  <small>한 단계 작은 문자 출력</small>
  <del>삭선</del>
  <ins>밑줄</ins>
  보통문자의<sup>윗첨자</sup>
  보통문자의<sub>아랫첨자</sup>
  <mark>형광펜(하이라이팅)</mark>
</body>

각각 태그의 객체로 적어놓은 내용과 같이 해당 태그들은 위와 같은 역할을 한다.

Ubuntu 18.04에 CUDA 10.2
21.3.19

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage