프로그래밍 공부

HTML 공부 정리 본문

Programming

HTML 공부 정리

khj1999 2021. 8. 24. 11:16

HTML을 생활코딩 강의를 통해서 공부했다.

https://youtu.be/tZooW6PritE


HTML특징은 웹 페이지 언어이며, public domain이다.

여기 나오는 예제를 따라 할 때 나는 크롬 웹 브라우저를 사용했으며 editor는 VScode를 사용했다.

내가 바르게 들은 건지는 모르겠지만 HTML의 문법은 Tag가 전부인 거 같았다.

HTML의 열리는 태그는 <>이고 닫히는 태그는 슬래시를 추가한 </>으로 해준다.

예를 들면 글의 제목이 Hello World!!! 일 때 글자를 두껍게 강조를 하는 태그가 strong이니 strong Tag를 사용해서 <strong> Hello World!!! </strong>이렇게 코드를 작성해준다. 태그의 종류는 여러 가지가 있는데

그중 몇 개만 정리한 것이다.

 

strong 태그

<strong> Hello World!!! </strrong>

글자를 두껍게 강조할 때 쓰는 태그이다.

 

u 태그

<u> Hello World!!! </u>

글자에 밑줄을 칠 때 사용하는 태그이다. (보통 사용할 일이 없다고 한다)

 

h1~h6 태그

<h1> Hello World!!! </h1>
<h2> Hello World!!! </h2>
<h3> Hello World!!! </h3>
<h4> Hello World!!! </h4>
<h5> Hello World!!! </h5>
<h6> Hello World!!! </h6>

제목을 나타낼 때 사용한다 숫자가 커질수록 제목의 크기는 작아진다.

 

br 태그

<br>

줄을 바꿔주는 태그이다. 개행 문자라 생각하면 편하고 말 그대로 개행이기 때문에 감쌀 필요가 없다.

 

p 태그

<p> Hello World </p>

단락을 표시하는 태그이다.  단락의 시작하는 부분 앞에 <p> 끝나는 부분 뒤에 </p>로 작성해준다.

 

li 태그

<li> List 1 </li>
<li> List 2 </li>
<li> List 3 </li>

li는 list의 약자로 목록을 나타는 태그이다.

 

ul 태그

<ul>
	<li> List 1 </li>
	<li> List 2 </li>
	<li> List 3 </li>
</ul>

리스트를 묶기 위해 사용하는 태그이다 ul은 Unordered List의 약자이다. 참고로 보기 편하게 들여 쓰기를 했지만

실제 코드를 작성할 때는 들여 쓰기를 하지 않아도 무방하다.

 

ol 태그

<ol>
	<li> List 1 </li>
	<li> List 2 </li>
	<li> List 3 </li>
</ol>

ol 태그는 ul태그와 같으나 넘버링을 해주기 위해 사용한다. ol은 Ordered List의 약자이다.

 

img 태그

<img src = "ex.jpg" >
<img src = "ex.jpg" width = "400px">

img 태그는 이미지를 넣기 위한 태그이다. 크기를 지정하려면  width 인자를 사용해준다.

 

a 태그

<a href = "https://khj1999.tistory.com/"> p1nch's blog. </a>

a  태그는 하이퍼링크를 걸어주는 태그입니다. href에 이동할 링크의 주소를 넣어줍니다.

 

body 태그

<body>
	<h1> Hello World </h1>
    <u1>
    	<li> List 1 </li>
        <li> List 2 </li>
        <li> List 3 </li>
	</ul>
</body>

HTML의 본문은 body 태그로 묶여있다. 이건 모든 html 코드를 작성할 때의 규칙입니다.

 

title 태그

<title> p1nch의 블로그 </title>

말 그대로 title을 나타내는 태그입니다.

 

meta 태그

<meta>
<meta charset = utf-8>

meta 태그는 메타데이터를 정의할 때 사용한다.

예시에 나온 charset은 인코딩 방식을 utf-8로 정의한 것이다.

 

head 태그

<head>
	<title> p1nch's blog </title>
	<meta charset = "utf-8">
</head>

head는 본문을 설명하는 태그이다 title 태그나 meta 태그 등 본문을 정의하고 설명하는 태그는

head 태그로 감싸줘야 한다 이것도 body 태그와 마찬가지로 html을 작성할 때의 규칙이다.

 

일단은 당장 html을 작성하여 웹페이지를 운영할게 아니고 html 코드를 볼 줄 알게 되는 게 목표였기 때문에 당장은

이 정도만 공부하고 CSS를 공부해봐야겠다.


2021 - 08 - 24 작성 

'Programming' 카테고리의 다른 글

C# WinForm으로 계산기 만들어보기  (0) 2025.02.17
C++ STL Map  (0) 2024.09.17
GIT 공부시작  (0) 2022.12.25
'Programming' Related Articles more
Comments