안녕하세요!
<코딩 자율학습 HTML+CSS+자바스크립트> 멘토를 담당하게 된 박브레드입니다.
오늘은 두 번째 날입니다. 2장에선 HTML 문서 작성을 위한 기본 내용을 공부해요!
어렵지 않으니 같이 시작해 볼까요?
오늘 공부할 내용은 다음과 같습니다.
🏃 공부할 내용(46~57쪽)
1. HTML의 기본 구성 요소
2. HTML의 기본 구조
3. HTML의 특징 파악하기
1. HTML의 기본 구성 요소
1.1 태그
웹 페이지를 구성하는 요소는 텍스트, 이미지, 버튼 등 매우 다양합니다.
태그는 이런 다양한 구성 요소를 정의하는 역할을 하며, HTML 문법을 이루는 가장 작은 단위입니다.
기본 형식은 다음과 같아요!
<태그명>
예시로는 1장에서 배웠던 <title></title>, <p></p> 등이 있겠죠?
이런 것들을 모두 태그라고 합니다.
1.2 속성
속성은 태그에 어떤 의미나 기능을 보충하는 역할을 합니다. 쉽게 말해, 옵션이라고 생각해도 됩니다.
그래서 속성은 사용해도 되고 안 해도 되고, 여러 개를 사용해도 되지만 단독으로 사용할 수는 없습니다!
속성은 다음과 같이 속성명과 속성값으로 구성됩니다.
<태그명 속성명="속성값">
예시로는 ! 치면 나온 첫 줄에 <html lang="ko">가 있습니다.
여기서 속성명은 lang이고 속성값은 ko가 됩니다.
1.3 문법
다른 언어에도 문법이 있듯이, html에도 문법이 있습니다.
크게 콘텐츠가 있는 문법과 콘텐츠가 없는 문법으로 나뉘게 되는데 두 가지 경우를 살펴봅시다.
- 콘텐츠가 있는 문법
콘텐츠가 있는 문법에서는 다음과 같이 콘텐츠 앞뒤를 태그로 감쌉니다. 이때, 앞에 넣는 태그는 시작 태그, 뒤에 넣는 태그를 종료태그라고 해요. 종료태그는 태그명 앞에 /(슬래시)를 꼭 붙여줘야 오류가 나지 않습니다!
<title>My First Web Page!</title>
💡 멘토 TIP
1장에서 Auto Rename Tag라는 확장 프로그램을 설치했으니 다음과 같이 title을 치시고 tab 또는 enter만 누르셔도 시작태그, 종료태그가 있는 태그가 작성됩니다. p나 다른 태그도 마찬가지겠죠?
또 다른 방법으로는 <title> 시작태그만 작성하셔도 자동으로 </title> 종료태그가 작성됩니다.
이처럼 Auto Rename Tag는 엄청 편리한 확장 프로그램입니다🔥
- 콘텐츠가 없는 문법
콘텐츠가 없는 문법은 앞 뒤로 감싸야할 콘텐츠가 없으므로 시작 태그만 사용합니다. 그래서 내용이 비어있다는 의미로 빈 태그라고도 합니다. 콘텐츠가 없는 문법은 시작 태그가 곧 요소여서 다음 문법에서 br 태그를 br 요소라고도 할 수 있습니다.
<br>
1.4 주석
주석은 실행결과엔 표시되지 않지만, 코드에 메모나 설명을 적고 싶을 때 사용됩니다.
<!-- 와 --> 사이에 작성하면 해당 내용은 주석으로 처리됩니다.
<!-- 주석 내용 -->
다음 사진처럼, "웹 페이지에 표시 안 되는 주석"이라고 적었는데 화면상에 표시 안 되는 거 보이시죠?
이처럼 주석을 설정할 수 있습니다.
🤓 1분 퀴즈
HTML 문법을 이루는 가장 작은 단위는 무엇인가요?
태그 <= 드래그해서 확인해 주세요
2. HTML의 기본 구조
HTML 문서는 기본 구조 안에서 작성됩니다.
기본 구조는 다음 사진과 같은데 더 자세히 살펴봅시다.
2.1 DTD
DTD란 Document Type Definition이라고 하는데 웹 브라우저가 처리할 HTML 문서가 어떤 문서 형식을 따라야 하는지 알려주는 것입니다. 다음처럼 DTD를 작성하면 웹 브라우저는 HTML 문서를 최신 형식인 HTML5 문서 형식으로 해석합니다.
<!DOCTYPE html>
2.2 html 태그
html 태그는 HTML 문서의 시작과 끝을 의미합니다. 따라서 모든 태그는 html 태그 안에 작성해야 합니다.
2.3 head 태그
head 태그는 HTML 문서의 메타 데이터를 정의하는 영역입니다. 메타데이터라는 것은 HTML 문서에 대한 정보입니다. 보통 meta, title, link, style, script 등의 태그를 사용해 HTML 문서의 여러 정보를 정의합니다.
- meta 태그
문자 집합(charset)을 정의하는 메타데이터 태그입니다. 과거에는 EUC-KR을 주로 사용했지만, 최근에는 더 많은 언어를 허용하기 위해 UTF-8만 사용한다고 하네요!
<meta charset="UTF-8">
다음 태그는 인터넷 익스플로러의 렌더링 엔진을 강제로 최신 렌더링 엔진으로 지정하는 메타데이터를 나타냅니다. 구 버전의 렌더링 엔진을 사용하는 프로젝트가 아니라면 해당 태그를 정의하는 것이 좋습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
마지막으로 기기의 화면 너비에 맞추기 위해 사용하는 메타데이터 태그입니다. 뷰포트는 웹 페이지에 접속했을 때 사용자에게 보이는 화면 영역을 의미하는데, 이에 관한 내용은 추후에 배울 예정입니다!
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
- title 태그
HTML 문서 제목을 지정하는 데 사용합니다. 1장에서 실습해 봤었는데 익숙하지 않나요?
모든 HTML 문서는 반드시 title 태그를 사용해 문서의 제목을 지정해야 해요!
<title>My First Web Page!</title>
2.4 body 태그
body 태그는 웹 브라우저에 노출되는 내용을 작성하는 영역입니다. 따라서 웹 브라우저에서 표시되는 모든 내용은 body 태그 영역 안에 작성하셔야 됩니다.
🤓 1분 퀴즈
다음 중 HTML 기본 구조의 구성 요소가 아닌 것을 고르시오. 5 <= 드래그해서 확인해 주세요
1. DTD
2. html
3. title
4. body
5. p
3. HTML의 특징 파악하기
이 부분은 추후에 CSS 배울 때 중요하니 열심히 봐주세요🔥
3.1 블록 요소와 인라인 요소
- 블록 요소
body 태그에서 사용하는 태그 중에서 웹 브라우저의 공간 유무에 상관없이 div 태그나 p 태그처럼 사용할 때마다 줄바꿈 되는 태그가 있습니다. 이런 태그를 블록 요소라고 합니다.
- 인라인 요소
블록 요소와 반대로 a태그나 span태그처럼 공간이 부족할 때만 줄 바꿈되는 태그가 있는데 이런 태그로 작성한 코드를 인라인 요소라고 합니다.
아직 이해가 안 되더라도 걱정하지 마세요😁
3장 실무에서 자주 사용하는 HTML 필수 태그 다루기에서 더 자세히 배울 예정이고, 실습도 할 거예요!
3.2 부모, 자식, 형제 관계
다음과 같은 코드를 보시면, html 태그 안에 head 태그와 body 태그가 있습니다. 이 태그들은 html 태그의 자식이 되고, 반대로 html 태그는 이 태그들의 부모가 되겠죠? 그리고 head 태그와 body 들은 형제 관계가 됩니다.
나머지 코드들도 마찬가지입니다!
3.3 줄 바꿈과 들여쓰기
HTML 문서에 태그를 작성할 때는 되도록 줄 바꿈과 들여쓰기를 하는 것이 좋습니다. 강제 규칙은 아니고, 가독성을 위해 암묵적으로 지키는 규칙이라고 생각하면 됩니다. 다음 사진과 같으면 가독성이 매우 안 좋습니다.
💡 멘토 TIP
Prettier라는 code formatter를 설치하시면 파일을 저장할 때 자동으로 줄 바꿈과 들여쓰기를 해줍니다!
매우 편리한 확장 프로그램이니 한 번 설치해 보세요~
지금까지는 괜찮죠? 다음 장에서는 실무에서 자주 사용하는 HTML 필수 태그를 다룰 예정입니다.
오늘 이해 못 하셨더라도 다음 장에서 차근차근 배우면 되니까 괜찮아요 :)
제가 공부한 내용은 보고 궁금한 점이 있으면 댓글 남겨주세요.
확인하고 답변해 드리겠습니다.
그럼 내일 다시 만나요 😁
✅ 정리
1. 태그
2. 속성
3. 문법
4. 주석
5. HTML의 기본 구조
6. 블록 요소와 인라인 요소
7. 부모, 자식, 형제 관계
8. 줄 바꿈과 들여쓰기
'🍞 대외활동 > 길벗 블로깅 멘토' 카테고리의 다른 글
| [HTML+CSS+자바스크립트] 5장 CSS 선택자 다루기 (~169p) (0) | 2023.02.19 |
|---|---|
| [HTML+CSS+자바스크립트] 4장 웹 스타일링을 위한 CSS 기초 배우기 (~139p) (3) | 2023.02.19 |
| [HTML+CSS+자바스크립트] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(~127p) (2) | 2023.02.19 |
| [HTML+CSS+자바스크립트] 3장 실무에서 자주 사용하는 HTML 필수 태그 다루기(~81p) (0) | 2023.02.18 |
| [HTML+CSS+자바스크립트] 1장 Hello, HTML + CSS + 자바스크립트 (~44p) (0) | 2023.02.18 |
