반응형
HTML 이란?
- 웹 사이트의 틀을 만드는 언어
HTML의 특징
- 확장명을 .html로 저장
- 문서를 작성할 수 있는 프로그램이라면 어디든지 작성이 가능
- 대소문자를 구별하지 않음
- 태그 형태로 괄호(<명령어>)를 사용하여 표현
- <명령어> 시작태그, </명령어> 종료태그로 구성되어 있음
HTML을 사용하기 위한 툴
* 비주얼 스튜디오 코드
https://code.visualstudio.com/download
User Installer 64bit 다운
HTML 시작하기
- HTML 형식은 아래와 같다
<html>
<head>
<title>문서의 제목</title>
</head>
<body>
HTML 문서 작성
</body>
</html>예시)
✔ HTML의 특수문자
- 개행 : <br>
- 주석 : <!--주석입력-->
- 띄어쓰기 :
- <(기호) : <
- >(기호) : >
ex) <예시> : <예시>
예시)
✔ HTML5의 문서 구조
- <!DOCTYPE html>
- 문서의 선언
- HTML 버전 5를 나타냄
- <html lang="en">
- lang 속성은 웹 접근성에 관한 명시
- 스크린 리더에서 언어를 인식하여 자동으로 음성을 변환하거나 해당 언어에 적합한 발음을 제공
- 한국어로 설정하려면 lang="ko"
- <meta charset="UTF-8">
- meta 태그는 <head> 태그에 정보를 추가하기 위한 태그
- <meta name="Author", Keywords, Description, ... 의 값을 설정
- charset 속성은 문자를 인코딩할 때 문자코드를 설정하는 역할을 지정(UTF-8)
- 우리나라 윈도우 기본 문자셋인 EUC-KR을 사용해도 되지만, 다국어로 인코딩 하기 위해서는 UTF-8 문자셋을 사용하기를 권장함
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- 모바일로 최적화된 사이트에 포함하는 meta 속성 설정
- viewport : 가상의 화면
✔ HTML 속성
- 속성은 해당 요소에 대한 추가적인 정보를 제공
<img src="apple.png">
---- --- ---------
요소 속성 속성값
- 속성에 대한 값은 꼭 따옴표를 사용해야 하는것은 아니지만, 속성값에 띄어쓰기가 있을 경우 문제가 발생할 수 있으므로 따옴표 사용을 권장함("",'' 둘다 사용가능)
<img src=apple.png> (O)
<img src=맛있는 사과.png> (X)
<img src="맛있는 사과.png"> (O)
반응형
'개발 > html' 카테고리의 다른 글
| HTML - 이미지태그 (0) | 2023.07.11 |
|---|---|
| HTML - 목록 태그 (0) | 2023.07.11 |
| HTML - 글자 태그 (0) | 2023.07.11 |