2025. 3. 12. 17:53ㆍWEB/HTML
HTML 을 배워보기로 했다.
JavaScript 를 배우려니 웹과 관련한 내용들이 많아서 이왕이면 다홍치마라고,
자바스크립트를 배우면서 HTML, CSS 도 배워놓으면 좋지 않을까 해서 공부를 시작해본다.
HTML 이란?
웹사이트의 모습을 기술하기 위한 마크업 언어 (프로그래밍 언어가 아니다)
HyperText Markup Language
아래와 같은 html 코드를 통해 웹페이지를 제작할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>제목</h1>
<p> 본문 내용 </p>
<a href="https://google.com"> 링크 텍스트 </a>
</body>
</html>
위 코드가 HTML의 기본 구조이다.
<> 로 되어 있는 것은 태그라고 하는데,
이 태그들이 웹페이지의 정보들을 표시해주는 역할을 한다.
각 태그에 대해 알아보자.
<!DOCTYPE html>
HTML5 표준을 사용하겠다는 선언을 의미한다.
(브라우저가 최신 HTML5 기준으로 문서를 해석한다)
<html></html>
html 문서의 시작과 끝을 알려주는 태그이다.
* 모든 태그는 <>로 시작해서 </>로 끝난다. (일부 예외 있음)
페이지의 정보를 모두 작성했다면 마지막엔 </html> 로 문서의 끝을 알려준다.
<head></head>
문서의 기본 정보를 설정한다. (예: 제목, 인코딩, 언어 등)
화면에 직접 표시되지는 않지만 브라우저와 검색 엔진이 문서를 해석하고 표시하는 데 중요한 역할을 한다.
아래 표는 <head> 태그에 자주 사용되는 태그 목록
| 태그 | 설명 | 예제 |
| <title> | 브라우저 탭에 표시될 제목 설정 | <title>내 웹사이트</title> |
| <meta> | 문서 정보 설정 (인코딩, 설명, 키워드 등) | <meta charset="UTF-8"> |
| <link> | 외부 리소스 연결 (CSS, 아이콘 등) | <link rel="stylesheet" href="style.css"> |
| <style> | 내부 CSS 정의 | <style>body { color: blue; }</style> |
| <script> | JavaScript 코드 작성 또는 외부 스크립트 연결 | <script src="script.js"></script> |
| <base> | 문서의 기본 URL 설정 | <base href="https://google.com/"> |
<title></title>
브라우저 탭에 표시되는 제목을 설정하는 태그
<body></body>
브라우저에 출력될 정보들을 담는 콘텐츠 영역을 표시하는 태그
<h1></h1>
문서의 제목을 표시하는 태그
h1부터 h6까지 있으며, h1이 가장 크고, h6이 가장 작다.
<p></p>
문단 태그
<a></a>
하이퍼링크 태그
<a> 태그 내부에 이동할 사이트의 주소를 넣어서 사용한다.
이 외에도 이미지를 삽입할 수 있는 <img> 태그, 목록을 표시하는 목록 태그인 <ul>, <ol>, <li> 태그, 레이아웃 및 스타일링을 위한 <div>, <span> 태그 등이 있다.
다음 글부터는 간단한 페이지를 작성하면서 각 태그들의 기능들을 살펴보도록 하자.
'WEB > HTML' 카테고리의 다른 글
| [HTML] 이미지를 삽입해주는 <img> 태그를 배워보자 (0) | 2025.03.30 |
|---|---|
| [HTML] HTML 문서 안의 또 다른 HTML 문서 <iframe> 태그를 배워보자 (0) | 2025.03.25 |
| [HTML] 다른 웹페이지로 이동 시켜주는 <a> 태그를 배워보자 (0) | 2025.03.19 |
| [HTML] 의미없는 태그 <div> 태그를 배워보자 (0) | 2025.03.19 |
| [HTML] 제목을 나타내는 <h1></h6> 태그를 배워보자 (0) | 2025.03.18 |