Hyper Text Markup Language
-> hyper text : link (text를 초월하는)
-> markup 언어 : 구조적인 언어
-> 웹페이지를 만드는 언어
-> 문법이 간단함
HTML 문법
- 태그
- 속성
- 태그의 중첩
- 빈 태그
- 공백
- 주석
1. TAG
-> 태그는 무언가를 표시하기 위한 꼬리표, 이름
-> <h1>부등호 안에 태그 이름을 넣어 시작 태그 사용, 닫는 태그 전에 내용이 들어감
-> </h1> 슬래쉬를 붙인 닫는 태그로 마무리
-> markup 언어에서는 모두 태그를 사용한다
2. 속성 (attribute)
-> html이 갖는 속성
-> 추가 정보 제공 및 태그의 동작이나 표현을 조절할 수 있음
-> <h1 id="title"> 시작 태그 내에 들어감
-> 속성이름="값" 형식으로 사용, 공백이 들어가면 안된다
-> 여러 속성을 띄어쓰기로 구분하여 함께 사용 가능
-> global 태그와 특정 태그에서만 작동하는 속성으로 나뉜다
-> 필수 속성과 선택적 속성도 구분되어있음
3. 태그의 중첩 (nesting tags)
-> 태그는 중첩하여 사용 가능
-> 태그 내의 태그는 부모 태그를 벗어날 수 없다
-> 정해진 태그만 중첩 가능한 경우도 있음
4. 빈 태그
-> 시작 코드만 존재하는 태그
-> 닫는 코드와 내용 부분이 없음
-> <br> <img src="> 등
-> 속성을 통하여 화면에 나타나거나 용도가 있음
-> 사용자의 입력이 필요한 기능이 아닌 경우
-> replacement tag라고도 부른다
5. 공백
-> HTML은 1칸 이상의 공백을 무시한다
-> 개행 및 탭 또한 무시한다 (tag로 사용해야함)
6. 주석
-> <!-- 내용 -->
-> 화면에 노출되지 않는 메모
-> 나 혹은 다른 개발자들 과의 소통을 위한
HTML의 기본 구조
<!DOCTYPE html>
<!--
html5 표준 문서로 작성되었음을 알려주는 선언문
항상 최상단에 선언되어야함
여러종류가 있지만 html5스타일을 자주 사용함
웹표준 관련 검색으로 더 많은 정보 획득 가능
-->
<html lang="ko">
<!--
lang 속성으로 검색엔진 및 브라우저가 어떤 언어로 작성되었는지
-->
<head>
<!--
head 태그에는 메타 태그,타이틀 태그,링크, 스타일 태그 등
브라우져 화면에는 표시되지 않음
문서의 기본정보 설정, 외부 스타일시트, 자바스크립트 파일등을 연결
-->
</head>
<meta charset="UTF-8>
<!--
다양한 메타 태그의 속성이 있지만 charset은 UTF-8 자주 사용
-->
<title>
<!--
문서의 제목 지정
접근성, 검색엔진 최적화 측면에서 도움이 됨
-->
</title>
<body>
<!--
화면에 나타나는 내용이 들어가는 태그
대부분의 태그들이 body태그 안에 들어감
-->
</body>'웹UI' 카테고리의 다른 글
| HTML 폼(form) 요소 (0) | 2021.01.07 |
|---|
댓글