Web/html

html 기본

Devwon99 2023. 12. 30. 11:59

html은 웹 사이트을 구성하는 마크업 언어이다.

html의 태그는 html문서를 구성하는 단위이다. 

<strong>  </strong> : 태그 내부 요소를 진하게

<u> </u> : 태그 내부 요소를 밑줄

<h1> </h1> : <h1> ~ <h6> 까지 총 6개가 있으며 글씨가 진하게 표시되며 줄바꿈이 된다.

                     제목을 나타내는 태그이다.

<br> : 줄바꿈을 해주는 태그이다. 이 태그는 시각적 의미만 갖고 있기 때문에 닫지 않는다.

<p> </p> : 단락을 나눠주는 태그이다.

<img src="파일명.확장자"> : 이미지를 웹에 띄워주는 태그이다.

                                              태그내부에 width와 height등 속성을 통해 크기를 지정할 수 있다.

 

<li> </li> : li태그는 리스트를 순차적으로 나타내주는 태그이다.

<ul> </ul> : ul태그는 리스트의 부모 태그이며, li태그를 여러번 사용할때 분류해주기 위한 태그이다.

<ol> </ol> : ol태그는 ul태그와 유사하지만 리스트의 요소들을 1. 2. 등 증가되는 숫자를 부여하는 태그이다.

 

<table> : 표를 나타내는 태그

    <tr> : 행을 나타내는 태그

        <td> 내용 </td> : 행의 내용을 나타내는 태그

        <td> 내용 </td>

    </tr>

</table>

 

<title> </title> : 탭의 이름을 나타내는 태그

<meta charset="utf-8"> : charset 속성을 통해 utf-8로 html태그를 불러온다.

                                        이 속성을 사용하지 않게되면 출력되는 한국어는 깨져서 출력된다.

<head> </head> : 위의 title, meta등 해당하는  html문서의 전반적인 것들을 감싸는 부모 태그이다.

<body> </body> : 본문 전체를 감싸는 부모 태그이다.

<html> </html> : html문서의 모든 태그를 감싸는 조상 태그이다.

<!DOCTYPE html> : 해당 페이지는 html로 작성되었다는 의미의 태그이다.

 

html의 모든문서는 아래의 규격을 따른다

<!DOCTYPE html>

<html>

 

<head>

    <title> 제목 </title>

    <meta charset="utf-8">

</head>

 

<body>

    <h1> 내용 </h1>

</body>

 

</html>

 

<a href="해당 링크"> </a> : 해당 태그 내부 요소를 클릭하면 해당 링크로 전환해주는 태그이다.

 

<iframe width = "지정할 넓이" height = "지정할 높이" src="영상 링크"> </iframe> :

해당 태그는 지정된 크기의 영상을 웹 페이지에 출력해준다.

 

<font color="원하는 색상"> </font> : 태그 내부 요소를 원하는 색상으로 변경한다.

 

<div> </div> : 해당 태그는 아무 의미가 없는 태그이다. div태그는 디자인을 위해서 사용하는 태그이다.

                       block level element이기때문에 화면 전체를 사용한다. 그렇기 때문에 사용할 시 줄바꿈이 된다.

<span> </span> : 해당 태그는 div와 같은 목적으로 사용하는 태그이다.

                             span은 div와 다르게 inline element이기 때문에 줄바꿈이 없다.

div와 span 태그는 각자 용도에 맞게 사용하면 된다.