티스토리 뷰
패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 4일차입니다!
지난 3일 동안 이 강의를 본격적으로 듣기 전에 개요를 학습했는데요.
오늘은 HTML 기본 강의를 수강했답니다.
오늘은 기본적인 HTML의 구조-문법부터 각 태그, 요소, 속성, 컨텐츠 등이 어떤 것인지 알아보는 시간을 가졌어요.
(01. 기본 문법 / 02. 속성(Attributes)과 값(Value) / 03. 부모 요소(ParentElement), 자식 요소(ChildElement) / 04. 빈 태그(Emptytag) / 05. DOCTYPE(DTD))
기본 용어들을 알지 못하면 다른 사람에게 내가 짠 코드를 설명할 때 버벅이게 되지요.
정확한 기본 용어들과 닫는 태그가 없는 태그들을 명칭하는 '빈 태그'라는 용어, 그리고 DOCTYPE의 역할에 대하여 공부했어요.
특히 DOCTYPE이 어떤 것인지는 종종 면접에서도 질문이 나온다고 합니다!
HTML 용어 개념
<section class="Earth">
<h1>People</h1>
</section>
위 예시를 참고하여 개념을 설명하면,
◾ 태그: <section>,</section> 등 - 열린 태그와 닫는 태그가 있음. 빈 태그라는 것도 있음 (ex- <img />)
◾ 요소: 태그와 비슷하게 쓰이지만 <h1>People</h1> 전체를 뜻함. 태그는 요소에 속하는 것. (People은 컨텐츠)
◾ 속성: class, id와 같이 태그(요소)의 기능을 확장하기 위한 것
◾ 값: 속성에 해당하는 값, 나중에 이 값에 해당하는 태그를 찾는 데에 쓰임.
위 section 태그는 h1 태그를 컨텐츠로 사용하고 있다.
◾ 부모 요소: section 태그에 해당하는 것
◾ 자식 요소: h1 태그에 해당하는 것
◾ 상위 요소: 부모+a 의 조상 요소들을 말함
◾ 자식 요소: 자식-a 의 후손 요소들을 말함
➡ 나중에 CSS, JS 등에서 부모/자식 요소를 다룰 때 중요하게 사용됨!
◾ 빈 태그: HTML5 버전에서는 <img src="img/abc.jpg"> 또는 <img src="img/abc.jpg" /> 형태를 모두 사용함.
➡ 대신 사용할 형태를 정하여 통일성 있게 사용하기!
문서의 범위
◾ <html>: HTML 문서의 전체 범위
◾ <head>: 정보 범위, 웹 화면을 구성하기 위한 기본 설정의 나열.
◾ <body>: 구조 범위, 웹 화면을 구성하는 내용이나 레이아웃 등이 해당함. (화면에서 보이는 것들)
DOCTYPE
◾ DTD(Document Type Definition)라고도 함
◾ 마크업 언어에서 문서의 형식(버전)을 지정함
◽ <!DOCTYPE html>은 이 HTML 문서가 HTML5 버전으로 해석된다는 것을 말함.
내용 학습 출처: https://heropy.blog/2019/04/24/html-css-starter/
강의 링크: https://bit.ly/3m0t8GM
'[패캠] 프론트엔드 패키지 > HTML' 카테고리의 다른 글
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 (0) | 2020.10.30 |
|---|---|
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 (0) | 2020.10.29 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 (0) | 2020.10.28 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션 (0) | 2020.10.27 |
| [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 5회차 미션 (0) | 2020.10.23 |