01. 기본 문법
<h1>hello world!</h1> (이를 h1 요소라고 부를수 있음)
<태그>내용</태그>
이 전체를 요소(element)라 칭함
태그와 요소의 의미는 유사해서 혼용해서 사용할 수도 있다,
앞 태그는 시작(열린)태그
뒷 태그는 종료(닫힌) 태그
가운데의 내용은 요소의 내용(Contents)
02. 부모와 자식 관계의 이해
<div> 부모 요소
<div></div> 자식 요소
</div>
부모 자식 관계 / 상대적인 관계
보통 자식 요소를 들여쓰기 (indent) (tab 키) 를 이용해 구분한다.
코드를 이쁘게 작성하는 행위는, 유지보수 단계에서 2명 이상의 인원 보게 되기 때문에 필수적인 습관.
<div> 상위 요소
<div> 상위 요소 / 하위요소
<div></div> 하위 요소
</div>
</div>
03. 빈 태그
<태그> </태그> ?? 이놈은 어디에?
빈(empty) 태그
작성 방식
1. <태그> 편리함 <html 1~5)
2. <태그/> 안전함 (xhtml, html5) xml이라는 좀더 엄격한 문법이 적용됫기에 /로 명확히 빈태그임을 표현.
되도록 붙히도록 연습.
<태그 속성="값">내용</태그>
ex) 속성 값 attribute value
<link rel="stylesheet" href="./main.css">
태그(전체 요소)의 기능의 확장을 위해 속성과 값을 입력함
<img />
빈 태그의 경우 내용을 입력할 수 없기에 속성과 값을 넣는게 거의 디폴트
img src="" alt="">
이렇게 요소에 필수적으로 들어가야하는 속성을 '필수 속성'이라 칭함.
<input /> -> <input type="text"/> <input type="checkbox"/>
04. 글자와 상자
요소가 화면에 출력되는 특성. 크게 2가지로 구분.
인라인(inline) 요소 : 글자를 만들기 위한 요소들.
블록(block) 요소 : 상자(레이아웃)를 만들기 위한 요소들.
'인강 > Fastcampus 프론트엔드 초격차' 카테고리의 다른 글
| ch 4 웹에서 시작하기 (0) | 2021.06.06 |
|---|---|
| ch3 무작정 시작하기 (0) | 2021.06.06 |
| Vscode 단축키 (0) | 2021.06.06 |
| 자료 링크 (0) | 2021.06.02 |
| Vscode, 특수 기호, 오픈 소스, (0) | 2021.06.02 |
댓글