초오오오오오짜개발자의낙서장
HTML 기본 문서 구조 본문
- - 태그는 "<" 와 ">" 를 이용해 구분한다.
- 예를들어 이미지를 삽입할때 image의 약자인 img를 <와 > 사이에 넣어 <img> 로 만든다.
- 어떤 태그를 어느때 사용해야하는지는 명세서에 나와있으니 명세서를 미리 작성해놓는다.
- 태그는 소문자로 작성한다.
- HTML 태그는 대 소문자를 구별하진 않지만 HTML5 표준 명세에서는 태그와 태그 안에 사용하는 속성들은 모두 소문자로 사용을 권장한다.
| 권장 | 비권장 |
| <img src = "image/first.jpg">` | <IMG src = "image/first.jpg"> |
- 여는 태그와 닫는 태그를 정확히 입력한다.
- 여는 태그와 닫는 태그를 "반드시" 입력한다
- 여는태그에서 닫는 태그 까지를 태그의 적용 범위로 인식한다.
- <img>나 <br> 태그처럼 닫는 태그가 없기도 한다.
- 적당히 들여쓰기
- HTML 태그는 기본 속성상 어러번 띄어쓰기를 하더라도 한칸의 공백으로 인식한다.
- HTML 소스를 단계별로 들여 쓰면 태그간의 포함 관계를 눈으로 쉽게 확인이 가능하다.
- 태그는 속성과 함께 사용할 수 있다.
- HTML 태그는 단순히 태그 하나만 사용될 뿐만 아니라 태그에 여러 기능을 추가하는 속성과도 함께 사용이 가능하다.
- 예를 들어 이미지를 삽입할 때 <img>를 사용하는데 이미지 파일의 경로를 알려주는 src 속성과 이미지의 크기를 알려주는 width 속성 height 속성 이미지에 보조 설명을 붙여주는 alt 속성 등 여러 가지 속성이 함께 사용된다.
<img src = "images/first.jpg" width = "350" heigth = "290" alt = "시계 이미지">
- 포함 관계를 명확히 한다.
- HTML 태그는 한 태그 안에 다른 태그를 포함 시킬수 있다.
- 여는 태그와 닫는 태그 쌍을 정확히 맞추어 사용한 태그 용도에 맞게 적용할 수 있습니다.
<u><i> 만약 네가 나를 길들인다면 </i></u>
- 간단한 html 문서 만들기
- vscode 로 가서 hmtl 문서를 만든다음 ! + tab 을 입력하면 기본 형식이 완성된다.
- 웹 브라우저에서 표시되는 웹 문서 내용은 <body> 태그와 </body> 태그 사이에 입력한다.
- body 에 내용 작성을 완료했으면 우클릭후 Open with Live Server를 실행한다, 단축키는 Alt +L -> Alt + O
- HTML 문서 기본 구조 살펴보기
<!doctype html> 현재 문서가 html5 언어로 작성된 웹 문서라는 뜻이다.
<html>~</html> 웹문서의 시작과 끝을 나타내는 태그이다.
<head></head> 웹 브라우저가 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분이다. 웹브라우저에 표현되지는 않고 스타일 및 스크립트가 포함되기도 한다.
<body><~body> 실제로 웹 브라우저 화면에 나타날 내용이다.
- <!doctype> 문서 유형을 지정하는 선언문
- 문서 유형이랑 웹 브라우저에게 이제부터 처리할 문서는 HTML 문서이고 어떤 유형을 사용했으니 그 버전에 맞는 방법으로 해석하라 라고 알려주는 것.
- <html>태그 - 웹 문서 시작을 알리는 태그
- <html> 태그는 웹 문서가 시작된다는 뜻 </html> 태그는 웹 문서가 끝났다는 뜻
- <html lang = "ko"> 처럼 사용 언어를 지정할 수 있다.
- 사이트에서 특정 언어로 제한해 검색할때 그 대상이 될 수 있기 때문
- 화면 읽는 기능에서 국가 설정을 해놓으면 읽는 음성이 특정 억양이 될수 있다.
- <head> 태그 - 브라우저에게 정보를 주는 태그
- 웹 브라우저가 알아야할 정보들은 모두 <head> 부분에 입력한다
- 문서에서 사용할 외부 파일들도 이곳에서 링크 한다.
- <title> 태그 - 문서 제목
- 거의 모든 웹 브라우저의 제목 표시줄에 표시
- 검색 엔진에서 제목으로 검색이 된다.
- <meta> 태그 - 문자 세트를 비롯한 문서 정보
- 메타 태그는 웹 브아루저 화면에는 보이지 않지만 웹 문서와 관련된 정보들을 지정한다.
- 화면에 글자를 표시할 때 어떤 인코딩 방법을 사용할지 지정. ex) utf-8
- 모바일 기기를 고려해서 웹 문서를 제대로 표시할수 있게 한다. ex) viewport
- 메타 태그를 사용해서 웹 사이트의 키워드나 간단한 설명 제작자의 정보등을 지정해 검색 엔진에서 검색 단어로 쓸수 있다.
- <body>태그 - 실제 브라우저에 표시될 내용
- 실제 브라우저에 표시될 내용을 입력한다.
- 웹 문서에서 특수문자 및 특수 기호 사용하기
- HTML에서 공백이나 괄호 같은 문자들은 소스 기호로 인식하지 않고 그대로 화면에 표시하려고 할때 특수 기호를 이용해야한다.
- 엔티티 이름, 엔티티 기호 라고한다. W3C(www.w3c.org) 에서 제공하는 엔티티 코드 표는 https://dev.w3.org/html5/html-author/charref 에서 확인이 가능하다
'Programing Language > HTML CSS' 카테고리의 다른 글
| 텍스트 관련 태그들 (0) | 2025.03.09 |
|---|---|
| 01-4 웹문서 만들고 업로드 하기 (0) | 2025.03.02 |
| formaction (0) | 2024.08.11 |
| HTML 과 CSS를 실습 하기위한 개발환경 셋팅 (0) | 2024.07.12 |
| why html,css ? (0) | 2024.07.12 |