1. 태그
- 웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양하다. 태그는 이런 다양한 구성 요소를 정의하는 역할이다.
기본 형식은 괄호사이(<>)에 태그명을 넣는 형태이다.
| 형식 : <태그명> |
2. 속성
- 속성은 기능을 보충하는 역할을 한다. 쉽게 말해, 옵션이라고 생각하자. 속성은 사용해도 되고 안 해도 되고, 여러 개를 사용해도 된다.
하지만 태그 없이 단독으로 사용할 순 없다. 속성명과 속성값으로 구성된다.
| <태그명 속성명="속성값"> |
일반적으로 속성을 사용할 때, 속성명은 따옴표 없이 작성하고 값은 큰따옴표("")안에 작성한다.
속성값이 여러 개인 경우에는 하나의 큰따옴표 안에 쉼표(,)로 구분해 값을 나열하면 된다.
3. 문법
- HTML은 시작 태그(open tag), 종료 태그(close tag)로 구성 된다. 종료 태그는 태그명 앞에 슬래시(/)가 있다는 것만 다르고 시작 태그와 같다. 그리고 시작 태그와 종료 태그, 콘텐츠를 합쳐서 요소(element)라고 한다.
| <title>Hello HTML</title> |
앞에 <title>은 시작 태그이며, 끝에 슬래시(/)로 끝나는 </title>은 종료 태그이다. 태그들 사이에 있는 Hello HTML은 콘텐츠라고 한다.
시작 태그, 끝나는 태그, 콘텐츠를 합쳐 요소(element)라고 한다.
* 콘텐츠가 없는 문법
- 콘텐츠가 없는 문법은 앞뒤로 감싸야 할 콘텐츠가 없으므로 시작 태그만 사용한다. 그래서 내용이 비어 있다는 의미로
빈 태그(empty tag)라고도 한다.
EX) <br/>, <hr/>, <input/> 등이 있다.
4. 주석
- 단축키
주석 지정 Ctrl + /
주석 해제 Ctrl + /
- 주석(comment)는 실행결과가 표시되지 않지만, 코드에 메모나 설명을 남길때 사용한다.
<!-- 주석 내용 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<!-- 보여질 문구를 작성해 주세요 -->
<p>Hello HTML!</p>
</body>
</html>| 실행결과 : Hello HTML |
- 실행결과 "Hello HTML"만 출력 되는것을 확인 할 수 있을것이다.
'Front-end Developer > HTML' 카테고리의 다른 글
| 6.HTML의 부모, 자식, 형제 관계 / 줄 바꿈과 들여쓰기 (0) | 2022.10.23 |
|---|---|
| 4.HTML 태그를 사용하여 텍스트 만들기 <h>,<p>,<br>,<span> (0) | 2022.10.22 |
| 5. Html의 <div> 태그 (0) | 2022.10.22 |
| 3. HTML의 기본 구조 (html, meta, head, body) (0) | 2022.10.22 |
| 2. HTML의 특징 블록(block) 요소 vs 인라인(inline) 요소 (0) | 2022.10.22 |
