안녕하세요. 조신선입니다. 오늘은 HTML 기초 문법에 대한 포스팅을 하도록 하겠습니다.
HTML (Hypertext Markup Language)은 웹 페이지의 구조와 내용을 정의하는 마크업 언어입니다. HTML은 웹 브라우저에게 어떤 내용을 표시하고 어떻게 구조화할지를 알려줍니다. 아래는 HTML의 기초적인 문법을 설명해드리겠습니다.
1. 태그 (Tags): HTML은 태그를 사용하여 요소를 정의합니다. 예를 들어, <p> 태그는 단락을 정의하고, <h1> 태그는 제목을 정의합니다.
<p>이것은 단락입니다.</p>
<h1>이것은 제목입니다.</h1>
2. 속성 (Attributes): 태그에는 속성을 추가하여 추가적인 정보를 제공할 수 있습니다. 예를 들어, <img> 태그에는 src 속성을 사용하여 이미지의 파일 경로를 지정합니다.
<img src="image.jpg" alt="이미지 설명">
<a href="https://www.example.com">이곳을 클릭하세요</a>
3. 요소 (Elements): 태그와 그에 대한 속성, 내용을 합쳐서 요소를 형성합니다. 예를 들어, <a href="https://www.example.com">이곳을 클릭하세요</a>는 <a> 태그를 사용하여 링크를 생성하는 요소입니다.
<a href="https://www.example.com">이곳을 클릭하세요</a>
<div>
<p>이것은 그룹화된 단락입니다.</p>
</div>
4. 중첩 (Nesting): 요소는 중첩될 수 있습니다. 즉, 한 요소 안에 다른 요소를 포함할 수 있습니다. 예를 들어, <div> 태그 안에 <p> 태그를 중첩하여 단락을 그룹화할 수 있습니다.
<a href="https://www.example.com">이곳을 클릭하세요</a>
<div>
<p>이것은 그룹화된 단락입니다.</p>
</div>
5. 기본 구조: HTML 문서의 기본 구조는 <!DOCTYPE>, <html>, <head>, <title>, <body> 등의 태그로 이루어집니다. 이들은 HTML 문서의 시작, 헤더, 제목, 본문 등을 정의하는 데 사용됩니다.
<!DOCTYPE html>
<html>
<head>
<title>웹 페이지 제목</title>
</head>
<body>
<h1>웹 페이지 본문</h1>
<p>이것은 본문의 내용입니다.</p>
</body>
</html>
6. 주석 (Comments): <!-- --> 태그를 사용하여 주석을 추가할 수 있습니다. 주석은 브라우저에는 표시되지 않고, 개발자가 코드에 메모를 추가할 때 사용됩니다.
<!-- 이 부분은 주석입니다. -->
<p>이것은 단락입니다.</p>
7.기본 태그: HTML에는 다양한 태그가 있습니다. 예를 들어, <h1>부터 <h6>까지의 제목 태그, <p> 태그의 단락, <img> 태그의 이미지, <a> 태그의 링크 등이 있습니다.
<h1>이것은 제목 1입니다.</h1>
<p>이것은 단락입니다.</p>
<img src="image.jpg" alt="이미지 설명">
<a href="https://www.example.com">이곳을 클릭하세요</a>
이는 HTML의 기초적인 문법에 대한 간략한 설명이며, 실제로는 더 다양한 태그와 속성들이 있습니다. HTML은 웹 페이지의 구조와 내용을 정의하는 중요한 언어이며, 웹 개발의 기초로 배울 필요가 있는 언어입니다.
마지막으로 5번 코드를 실행하면 어떻게 화면에 표시되는지 이미지로 보여드리겠습니다.
이렇게 HTML언어만 배우면 웹페이지가 아주 단조로워 질 수 밖에 없는데요.
다음에는 웹페이지를 꾸미는 CSS 기초 강의를 올려보도록 하겠습니다.
'programming > JavaScript' 카테고리의 다른 글
| [웹개발/html] 1탄_프론트_OPENAI API를 활용한 '오늘의 운세보기' 웹페이지 개발 (1) | 2023.05.05 |
|---|---|
| [JAVA/API활용] kakao maps API 활용해서 지도 만들기!! (0) | 2023.04.21 |
| node js 기초 문법 강의&필수 모듈(ex:express) 이용 방법 (0) | 2023.04.19 |
| HTML, CSS, JS의 관계 & codepen.io 활용방법 (0) | 2023.04.18 |
| JS 기초 문법 (0) | 2023.04.18 |