1. HTML의 기본 개념
HTML은 HyperText Markup Language의 약자로, 웹 페이지의 기본 구조를 구성하는 언어입니다.
HTML은 마크업 언어로서, 브라우저에게 각 요소의 역할을 지시하는 태그(tag)로 이루어져 있습니다.
- 태그(Tag): HTML은 <태그명>내용</태그명>과 같은 형태로 요소를 정의합니다. 예를 들어 <p>안녕하세요</p>는 <p> 태그 안에 "안녕하세요"라는 텍스트를 담은 단락 요소입니다.
- 요소(Element): HTML의 기본 구성 요소로, 태그를 통해 문서 내의 각 부분을 정의합니다. 각 요소는 열림 태그와 닫힘 태그로 감싸져 있습니다.
2. HTML 문서의 기본 구조
HTML 문서는 다음과 같은 구조로 이루어져 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
</body>
</html>각 요소의 설명
- DOCTYPE: <!DOCTYPE html>은 HTML5 표준을 선언하며, 브라우저가 HTML5의 규칙을 따르도록 합니다.
- html 태그: <html>로 문서가 시작하고 </html>로 끝납니다. 웹 페이지의 모든 내용은 <html> 태그 안에 들어갑니다.
- head 태그: <head> 태그에는 웹 페이지의 제목과 메타데이터가 들어갑니다. 이 데이터는 화면에 직접 표시되지는 않지만, 브라우저가 웹 페이지 정보를 이해하는 데 사용됩니다.
- body 태그: <body> 태그는 실제 화면에 표시되는 콘텐츠를 포함합니다. 여기에 텍스트, 이미지, 링크, 버튼 등 사용자에게 보이는 모든 요소를 넣습니다.
3. Visual Studio Code에서 HTML 파일 생성하기
- 파일 생성: VS Code를 열고 New File을 클릭하여 파일 이름을 index.html로 저장합니다.
- Emmet으로 기본 템플릿 생성: Emmet이라는 기능을 사용해 기본 HTML 구조를 빠르게 만들 수 있습니다.
- index.html 파일을 열고 !을 입력한 후 Enter를 누르면 Emmet이 HTML 기본 구조를 자동으로 채워줍니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
4. HTML의 주요 태그
HTML에는 웹 페이지를 구성하는 다양한 태그들이 있습니다. 아래는 자주 사용되는 기본 태그들과 그 예시입니다.
<!-- 제목 태그 -->
<h1>Main Title</h1>
<h2>Subtitle</h2>
<!-- 단락 태그 -->
<p>This is a paragraph.</p>
<!-- 링크 태그 -->
<a href="https://www.example.com">Visit Example</a>
<!-- 이미지 태그 -->
<img src="image.jpg" alt="Description of the image">주요 태그 설명
- 제목 태그 (<h1> ~ <h6>): <h1>은 가장 큰 제목, <h6>은 가장 작은 제목입니다. 제목 태그는 페이지의 제목을 정의할 때 사용되며, 검색 엔진 최적화(SEO)에도 중요한 역할을 합니다.
- 단락 태그 (<p>): <p> 태그는 문단을 나타냅니다. 각 문단을 개별적으로 구분하여 콘텐츠를 명확하게 표현할 수 있습니다.
- 링크 태그 (<a>): <a> 태그는 다른 페이지나 외부 사이트로 연결되는 링크를 만듭니다. href 속성을 통해 링크할 주소를 지정할 수 있습니다.
- 이미지 태그 (<img>): <img> 태그는 웹 페이지에 이미지를 추가합니다. src 속성은 이미지 경로를, alt 속성은 이미지 설명을 나타냅니다.
5. 주의해야 할 HTML 규칙과 자주 하는 실수
HTML 작성 시 초보자가 자주 실수하는 부분과 기본 규칙을 숙지해 두면 좋습니다.
- 모든 태그는 열고 닫는 쌍으로 작성:
- <h1>Welcome</h1>처럼 열림 태그와 닫힘 태그는 쌍으로 작성합니다. 다만, <img>, <br>, <hr> 같은 빈 태그(Self-Closing Tag)는 닫힘 태그가 없습니다.
- 대소문자 규칙:
- HTML은 대소문자를 구별하지 않지만, 관습적으로 소문자를 사용합니다. 예를 들어 <H1>보다는 <h1>을 권장합니다.
- 태그 안에 다른 태그를 넣을 때 규칙 지키기:
- <p> 태그 안에 다른 블록 요소(<div>, <h1>, <ul> 등)를 넣지 않는 것이 원칙입니다.
- 예를 들어, <p><div>안됨</div></p>는 잘못된 구조입니다. 대신 <div> 요소를 별도로 사용합니다.
- 속성 작성 시 따옴표 사용:
- 속성 값을 작성할 때는 따옴표로 감싸야 합니다. 예시는 아래에.
<a href="https://www.example.com">Example</a>- 하나의 <html> 문서에는 <body> 태그가 하나만 있어야 함:
- <body> 태그는 웹 페이지의 본문을 담는 유일한 태그이므로 여러 개를 사용하면 안 됩니다.
6. Live Server로 실시간 미리보기
VS Code의 Live Server 확장 프로그램을 사용하면 HTML 코드를 작성하면서 실시간으로 결과를 볼 수 있습니다.
- Live Server 설치: VS Code의 Extensions 탭에서 Live Server를 검색하여 설치합니다.
- 실시간 미리보기: index.html 파일에서 우클릭 후 Open with Live Server를 선택하면 웹 브라우저에서 실시간으로 미리보기가 가능합니다. 코드를 수정할 때마다 브라우저가 자동으로 갱신되어, 바로 결과를 확인할 수 있습니다.
*참고하면 좋을 사이트
https://codediaries.tistory.com/29
우리가 공부할 HTML tag list
HTML(Hyper Text Markup Language) HTML 웹문서는 브라우저에서 읽을 수 있는 텍스트로 이루어진 마크업 언어입니다.일반 문서를 만들듯이 큰제목, 두번째 제목... 내용, 이미지, 섹션, 머릿말, 꼬릿말등
codediaries.tistory.com
https://blog.naver.com/wangsohee/221316770021
[HTML5] 기초 - 1. 기본 요소 및 태그
HTML5의 기본요소HTML 문서는 기본적으로 엘리먼트들의 모임이다. 엘리먼트는 아래 형식으로 명세...
blog.naver.com
728x90
'개발하는 디자이너 > 01. 디자이너가 알아두면 좋을 개발 상식' 카테고리의 다른 글
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 07. CSS 실습 (3) | 2024.11.18 |
|---|---|
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 05. CSS 기본 개념과 문법 이해하기 (0) | 2024.11.12 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 04. Figma에서 UX/UI 디자이너가 개발자와 소통 잘하는 법 (컴포넌트 네이밍) (1) | 2024.11.11 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 03. HTML으로 웹페이지 기본 구조 작성해보기 (1) | 2024.11.08 |
| 프로덕트 디자이너가 알아두면 좋을 개발 상식 02. HTML 기본 요소 (0) | 2024.11.07 |