kaki1013
1. HTML 시작 본문
# HTML (HyperText Markup Language)
HTML : 웹 페이지를 만드는 데 사용하는 언어
모든 태그는 미리 정의되어 있음 & 각각의 태그와 속성을 사용하기만 하면 됨
웹 페이지는 HTML 문서라고도 불림 & HTML 태그들로 구성됨
각각의 HTML 태그는 웹 페이지의 디자인이나 기능을 결정하는데 사용
# HTML 태그(tag)
태그 이름을 꺾쇠 괄호(<>)로 감싸서 표현합니다.
보통 시작 태그(start tag, opening tag)와 종료 태그(end tag, closing tag)의 한 쌍으로 구성
종료 태그는 시작 태그와 전부 똑같지만, 태그 이름 앞에 슬래시(/)가 존재
문법
1. <태그이름> // 시작 태그
2. </태그이름> // 종료 태그
빈 태그(empty tag) : <img> <br> <hr> 등과 같이 종료 태그 없이 시작 태그만을 가지는 태그
# HTML 작성
HTML 문서는 윈도우의 메모장, 리눅스의 vi와 같은 기본 에디터로도 작성 가능
HTML 문서의 작성을 마친 후에 확장자를 .html로 저장하면 웹 브라우저에서 바로 확인 가능
# W3C (World Wide Web Consortium)
월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관
W3C가 관리하는 대표적인 웹 표준 : HTML, CSS, DOM, SVG, XHTML, XML
# HTML 기본 구조
다음은 HTML 문서의 기본적인 구조를 보여주는 그림입니다.
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시
<html> : HTML 문서의 루트(root) 요소를 정의
<head> : HTML 문서의 메타데이터(metadata)를 정의
- 메타데이터(metadata) : HTML 문서에 대한 정보(data) (웹 브라우저에는 직접적으로 표현되지 않는 정보)
- 이러한 메타데이터는 <title>, <style>, <meta>, <link>, <script>, <base>태그 등을 이용하여 표현 가능
<title> : HTML 문서의 제목(title)을 정의 & 다음과 같은 용도로 사용됨
- 웹 브라우저의 툴바(toolbar)에 표시됨
- 웹 브라우저의 즐겨찾기(favorites)에 추가할 때 즐겨찾기의 제목이 됨
- 검색 엔진의 결과 페이지에 제목으로 표시됨
<body> : 웹 브라우저를 통해 보이는 내용(content) 부분
<h1> ~ <h6> : 제목(heading)을 나타냄
<p> : 단락(paragraph)을 나타냄
# HTML 요소 구조
요소(element)는 여러 속성을 가질 수 있음
속성(attribute)은 해당 요소에 대한 추가적인 정보를 제공함
HTML 요소는 시작 태그로 시작해서 종료 태그로 끝남
속성은 HTML 요소 중에서도 언제나 시작 태그 내에서만 정의됨 & 속성 이름과 속성값(value)으로 표현
문법
<태그이름 속성이름="속성값">
# 속성에 관한 주의사항
1. 속성 이름은 언제나 소문자로 작성하자!
HTML5 표준에서는 속성 이름에 대소문자를 구분 X
→ W3C에서는 속성 이름에 대해서 소문자 작성을 권장
→ XHTML에서는 속성 이름을 더욱 엄격하게 소문자로만 사용해야 함
2. 속성값은 언제나 따옴표로 감싸자!
HTML5 표준에서는 속성값에 따옴표 사용을 강제 X
But 속성값을 따옴표로 감싸지 않으면, 다음과 같은 예상치 못한 오류가 발생 가능
→ 속성값을 감쌀 때는 보통 큰따옴표("")가 사용되며, 작은따옴표('')도 사용 가능
<img src="quotes.jpg" alt="이미지가 없어요">
<img src="quotes.jpg" alt=이미지가 없어요>
위의 예제와 같이 속성값에 띄어쓰기가 들어가게 되면, 반드시 따옴표를 사용해야 정확한 값을 저장할 수 있음
참고: <img>태그의 alt 속성은 이미지를 불러올 수 없는 상황에서 이미지 대신 보이는 문자열을 설정 가능
'버그바운티 스터디 > HTML' 카테고리의 다른 글
| 6. HTML 확장 (0) | 2023.07.06 |
|---|---|
| 5. HTML 입력 양식 (0) | 2023.07.06 |
| 4. HTML 공간 분할 (0) | 2023.07.06 |
| 3. HTML 기본 요소 (0) | 2023.07.05 |
| 2. HTML 텍스트 요소 (0) | 2023.07.05 |
