1. HTML : 웹 페이지의 구조를 담당하는 마크업 언어.
HTML은 웹 페이지의 내용과 뼈대를 정해진 규칙대로 기술하는 언어
[HTML의 기본 구조와 문법]
[TREE STRUCTURE / 트리 구조]
EX)
<!DOCTYPE html> : 이 문서가 HTML 문서임을 명시
<html> : html 시작 태그로, 문서 전체의 틀을 구성
<head> : head 태그는 문서의 메타데이터를 선언.
<title>Page title</title> : 문서의 제목, 브라우저의 탭에 보여짐.
</head> : </태그이름>은 해당 태그가 끝났음을 의미
<body> : body 태그는 문서의 내용을 담는 곳
<h1> Hello world </h1> : heading을 의미하며, 크기에 따라 h1 ~ h6 까지있음.
<div> Contents here : content division을 의미하며, 줄바꿈됨.
<span> Here Too! </span> : 줄바꿈이 없는 content 컨테이너
</div> : div 태그가 끝났음을 의미
</body> : body 태그가 끝났음을 의미
</html> : html 태그가 끝났음을 의미
[HTML 문법 특징]
A 태그가 선언되면, A 태그가 종료되기 전까지 다른 태그가 먼저 종료되는 경우는 없다.
단 SELF-CLOSING TAG의 경우, <tag>, </tag> => <tag 내용 />으로 표현 가능.
EX) <img src = “codestates-logo.png”> </img> => <img src = “codestates-logo.png” />
코드 작성 예시 <div> <input type =”radio”> 입력한 부분의 이름 </div>
[자주 사용되는 HTML 요소]
<div> : Division : div 태그는 한 줄을 차지한다.
<span> : span : span 태그는 컨텐츠 크기만큼 공간을 차지한다.
<img> : Image : <img src””, 닫는 태그가 필요 없다.
<a> : Link 삽입 : ex) <a href=http://naver.com>네이버</a>
<ul> & <li> : Unordered List & List Item : ul은 순서가 없는 데이터를 표현하는 요소.
<input> : Input (Text, Radio, Checkbox) [Text] : 타이핑 내용 입력하는란, [Radio] : 선택사항 중 1개만 클릭 가능, [CheckBox] : 생성된 란들 1개 이상 클릭 가능한 점.
<textarea> : Multi-line Text Input : 줄 바꿈이 가능한 입력 폼을 생성.
<button> : Button : 클릭할 수 있는 버튼 생성.
<p> : Paragraph (문단) : 하나의 문단을 표현하기 위함.
<section> : 시맨틱 요소. 웹 페이지의 큰 의미 단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분.
자체적으로 이름을 가지는 태그 Ex) <Article>, </Article>
<h1> ~ <h6> : 제목
<pre> : 작성된 채로 공간 요소를 유지
<br> : 공간띄우기 ?
'백엔드 학습 과정 > Section 1 [HTML, Linux, Git, Java]' 카테고리의 다른 글
| 6. Git & Github (1) | 2022.10.29 |
|---|---|
| 5. Linux (2) | 2022.10.25 |
| 4. 와이어 프레임 & 목업 (0) | 2022.10.25 |
| 3. 레이아웃 : 화면 나누는 법 (0) | 2022.10.25 |
| 2. CSS (0) | 2022.10.25 |
