HTML 구성
HTML 기본 구조와 문법
1. HTML 정의
- 웹 페이지의 틀을 만드는 마크업 언어(태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어)
- tag들의 집합
- tag : 부등호(<>)로 묶인 html의 기본 구성 요소 열고 닫기
- html 확장자 사용
- 속성(attribute) : attribute name(속성 이름)과 attribute value(속성 값) 으로 구성
div*2>li*1>ol*2 //tap을 누르면 아래처럼 자동완성
<div>
<li>
<ol></ol>
<ol></ol>
</li>
</div>
<div>
<li>
<ol></ol>
<ol></ol>
</li>
</div>
id
- id(#name) : 한가지만 지정, 하나의 문서에 고유한 id 하나만 사용 가능
<h4 id="navigation-title">This is the navigation section.</h4>//CSS에 적용시
#id {
color: black;
}
class
- class(.name) : 그룹으로 묶어서 스타일 지정
<ul>
<li class="Tower-item">CatTower1</li>
<li class="Tower-item">CatTower2</li>
<li class="Tower-item">CatTower3</li>
</ul>//CSS에 적용시
.Tower-item {
text-decoration: underline;
}- 여러 class를 하나의 요소에 적용하기 위해서는 공백으로 적용하려는 class의 이름을 분리
<li class="Tower-item selected">CatTower3</li>//CSS에 적용시
.selected {
font-weight: bold;
color: #009999;
}
2. HTML 기본 구조 : Tree Structure
<HTML 문서 시작 선언> //! tap을 누르면 자동완성
<html>
<head>
<title> meow is black cat </title>
</head>
<body>
<h1> Hello meow </h1>
<div> meow's toys here
<span> Here too! </span>
</div>
</body>
</html>
*닫는 태그가 없는 경우 : self-closing tag
<img src = "meow.png"></img> //태그 내부에 내용이 있는 경우
<img src = "meow.png" /> //태그 내부에 내용이 없는 경우
자주 사용하는 HTML 요소
1. div VS span
- div : 한줄을 차지
- span : 컨텐츠 크기만큼 공간을 차지
<div> div 태그는 한줄을 차지합니다 </div>
<span> span 태그는 컨텐츠 크기만큼 공간을 차지합니다 </span>
2. img
- 닫는 태그 필요 없음 : self-closing
- src 속성을 이용
<img src = "meow.png" />
// src는 속성(태그에 속성이 들어감), 속성 값이 "meow.png"
3. a : Link
- 하이퍼링크로 작동
- href 속성을 이용
- target = "_blank" : 새 탭으로 이동하고자 할 때 사용
<a href = "spiritfestival.tistory.com" target = "_blank">공개처형 일기장</a>
4. ul & li
- Unordered List & List Item
- ul이 아닌 ol(Ordered List) 사용 가능 : numbering된 리스트
<ul>
<li>CatTower1</li>
<li>CatTower2</li>
<li>CatTower3
<ul>
<li>CatTower3's House type 1</li>
<li>CatTower3's House type 2</li>
</ul>
</li>
</ul>
5. input
- Input(Text, Radio, Checkbox)
<input type = "text" placeholder = "Where is meow?"> //text대신 password 가능
<input type = "radio" name = "choice" value = "meow" > meow
<input type = "radio" name = "choice" value = "despair" > despair
<input type = "checkbox"> 절망에 절규하는 미야우*Radio : 그룹을 설정(name = "choice")하여 하나만 선택 가능
*Checkbox : 여러개 선택 가능
6. textarea
- Multi-line Text Input
- 여는 태그, 닫는 태그 필요
- input과 달리 줄바꿈(Multi-line)이 가능한 입력 form
<textarea></textarea>
7. button
- 여는 태그, 닫는 태그 필요
<button> 절망 호출 </button>
8. script
- 자바스크립트 실행을 위해 사용
<script src="despair-java-script.js"></script>
9. p
- paragraph
- 하나의 문단을 표현
- div와의 차이점 : p는 div를 포함할 수 없지만, div는 p를 포함할 수 있음
<p><div>Hello meow!</div><p> //불가
<div><p>Hello meow!</p></div> //가능
10. section
- 웹 페이지의 큰 의미단위가 될 수 있는 어떤 것이든 묶어서 하나의 구역을 구분하는데 사용
- 시맨틱 엘리먼트의 일부
- div는 어떤 큰 구역을 구분하기 위하여 사용되는 것은 지양, 이 대신 section 사용
HTML5의 시맨틱 태그
- article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, tima 등
div 태그와 같지만 태그를 부르는 이름이 다름 - non-semantic 테그 : 자신의 컨텐츠에 대해 설명해주지 않음
- semantic 태그 : 자신의 컨텐츠를 명확히 정의
- HTML5 이전 : div와 span에 id와 class를 붙여 구역을 나눔
<div id = "" class = "">
<div class="header"> //HTML5 이전
<header> //HTML5 시맨틱
Reference
반응형
'CodeStates > React' 카테고리의 다른 글
| [React] State & Props (0) | 2022.02.21 |
|---|---|
| [React] Single-Page Application (0) | 2022.02.21 |
| [React] React 기초와 프로젝트 시작방법 (0) | 2022.02.16 |
| [DOM] Document Object Model (0) | 2022.02.14 |
| [CSS] Cascading Style Sheets (0) | 2021.12.20 |
댓글