728x90
1. HTML
: Hypertext(정보의 연결) Markup(정보처리언어기술) Language 의 약자. 웹을 위한 언어.
(참고1) 웹문서의 구성
1) 구조 => HTML
2) 디자인 => CSS
3) 동작 => script
(참고2) HTML 문서 기본구조
1 2 3 4 | <!doctype> <!-- html 문서 타입지정 --> <html> <!-- 문서의 시작 선언 --> <head> <!-- 문서의 정의, 환경설정(스타일, 스크립트 등등) --> <body> <!-- 웹브라우저에 보여지는 콘텐츠를 작성 --> |
- 웹브라우저는 기본구조를 작성하지 않고 단일태그만으로 구성해도 정상적으로 태그를 해석한다.
(참고3) 계층구조 이해하기
1 | [ { ( ) } ] |
- 조상 > 부모 > 자식
- 코딩의 가독성을 높이기 위해서 tab 으로 들여쓰기 작성
2. 규칙
- HTML은 tag(태그)라는 명령으로 구성됨
1 | <시작태그>콘텐츠</종료태그> |
- 요소(Element), 태그(Tag)는 시작태그, 종료태그로 구성
- 종료태그 앞에는 /를 사용
- 웹브라우저에서 표시되는 콘텐츠는 무조건 태그로 감싸서 구성
3. 예외
- 종료태그가 없는 구조
1 | <태그 /> |
- 자신 스스로 /를 사용하여 종료를 표시함(콘텐츠를 포함하지 않는 구조)
- 스스로 콘텐츠를 생성
4. 속성을 사용하는 구조
- 모든 태그는 속성을 1개 이상 가지고 있으며, 태그와 속성사이는 공백으로 구분하고 속성값은 ""로 감싸서 표현한다.
1 | <시작태그 속성1="속성값" 속성2="속성값">콘텐츠</종료태그> |
5. Enter, Tab, Space
- html 엔터, 탭, 스페이스는 공백하나로 인식
1 2 | <시작태그 > <!-- 공백1 --> <시작태그 > <!-- 공백1 --> |
6. HTML 주석 달기
- 문서에는 영향을 주지 않으며 간단한 도움말을 작성할때 사용한다.
1 2 3 4 5 | <!-- 주석 --> <!-- 블록 주석 --> |
7. 태그의 종류
- heading tag (제목 태그)
- paragraph tag (문단 태그)
- image tag (이미지 태그)
- link tag (링크 태그)
- list tag (목록 태그)
- table tag (표 태그)
- form tag (양식 태그)
- multimedia tag (비디오 사운드 태그)
- group tag (그룹 태그)
- etc....
반응형