위 글은 공부했던 내용을 새롭게 정리하는 글로, html 관련 내용을 포함합니다.
HTML 이란?
html 이란, HyperText Markup Language의 약자로, 말 그대로 웹 문서를 만들기 위한 마크업 언어의 일종입니다.
웹 개발을 하기 위해 필요한 가장 기본적인 요소로, 단순한 형태로 웹 페이지를 구성할 수 있습니다.
HTML의 구성
HTML은 태그로 구성되어 있으며, 태그 안에 새로운 태그를 중첩시켜 구성합니다.
가장 밖에는 html의 범위를 표시하는 <html> 태그가, html 태그 안에는
속성을 지정하는 <head>와 본문을 의미하는 <body>가 존재하며,
body 태그 내에 다양한 태그를 작성하여 웹 사이트를 만들 수 있습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World</h1>
<p> 웹 개발의 첫 시작입니다 </p>
</body>
</html>
실행 결과
Hello World
웹 개발의 시작입니다
html 태그
html 태그는 부등호로 감싸 표시하며, 여는 태그 (<tag>) 와 닫는 태그 (</tag>), 그 사이의 내용으로 구성됩니다.
하지만 태그중에는 내용이 없는 태그도 존재하는데, 이러한 태그는 여는 태그로만 존재하기도 합니다.
내용에는 새로운 태그를 추가하여 중첩시킬 수도 있습니다.
위의 코드를 기반으로 조금 수정해보았습니다.
예시 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello World</h1>
<div>
내용 : div 태그와 p태그는 여는태그와 내용, 닫는 태그로 존재합니다.
<p> 중첩된 태그 : 아래의 img 태그는 여는태그만 존재합니다. </p>
<img src="이미지 url을 입력해보세요">
</div>
</body>
</html>
실행 결과
Hello World
내용 : div 태그와 p태그는 여는태그와 내용, 닫는 태그로 존재합니다.
중첩된 태그 : 아래의 img 태그는 여는태그만 존재합니다.
html에 대한 내용은 이정도만 다루고,
태그에 대한 내용은 이후에 하나씩 다뤄보도록 해보겠습니다.
'웹 프론트 엔드 정리본' 카테고리의 다른 글
| css 알아보기 - 선택자 : 전체선택자 * 와 타입선택자, class와 id (0) | 2024.09.30 |
|---|---|
| css 알아보기 - 스타일과 css (0) | 2024.09.30 |
| html 알아보기 - 시멘틱 웹과 div 태그 (1) | 2024.09.26 |
| html 알아보기 : 글씨 태그 - inline속성 태그 (0) | 2024.09.24 |
| html 알아보기 : 글 태그 - 제목과 문단, preformat 태그 (0) | 2024.09.23 |
