학습-비기너 트랙
7. HTML 의 기초
1. 오늘의 학습 키워드
오늘은 오즈코딩스쿨 학습-비기너 트랙 일곱 번째 시간으로 HTML 기초에 대해 학습했습니다. 사실 오늘 학습을 마치면... 치킨 쿠폰이 기다리고 있지 않을까 하는 소소한 기대감도 함께 가지고 있습니다😄
그런 마음 덕분인지 오늘도 더 집중해서 열심히 학습을 시작해 보겠습니다.
2. 오늘 학습 한 내용
HTML(HyperText Markup Language)이란? 웹 페이지를 만들기 위한 기본적인 마크업 언어를 말합니다. 이 언어를 사용하면 웹 페이지의 구조와 콘텐츠를 정의가 가능하여 HTML을 통해 텍스트, 이미지, 링크 등 다양한 요소들을 웹 문서에 배치하고 구성할 수 있습니다. HTML문서는 브라우저에 의해 해석되고 사용자들에게는 시각적으로 표현됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<h1>안녕하세요!</h1>
<p>이것은 간단한 HTML 문서의 예시입니다.</p>
</body>
</html>이 구조에서:
- !DOCTYPE html : 문서가 HTML5로 작성되었음을 선언합니다.
- html lang="ko" : 문서의 언어를 한국어로 지정합니다.
- head : 메타데이터와 문서의 설정 정보를 포함합니다.
- meta charset="UTF-8" : 문자의 인코딩 방식을 UTF-8로 설정하여 한글이 정상적으로 표시되도록 합니다.
- title : 브라우저 탭에 표시될 문서의 제목을 지정합니다.
- body: 사용자에게 직접적으로 보여지는 콘텐츠를 포함합니다.
✨ 여는 태그와 닫는 태그
요소는 여는 태그와 닫는 태그로 구성되어 있습니다. 여는 태그는 요소의 시작점을 의미합니다. 여는 태그란 요소의 시작점을 의미합니다.
h1 요소를 예로 들면,
<h1>은 여는 태그, </h1>은 닫는 태그입니다.여는 태그와 닫는 태그 사이에는 텍스트를 넣을 수도 있고, 또는 자식 요소를 추가할 수도 있습니다.
🎯 그렇지만 HTML 요소를 모두 외워야 할까요?
HTML 요소의 종류와 각각의 특징을 영어 단어 외우듯이 다 외울 필요는 없습니다. 필요할 때마다 검색해서 사용하는 습관을 먼저 들이는 것이 좋은 습관입니다. 자주 사용하다보면 자연스럽게 다 외울 수 있게 됩니다. 아래에는 HTML을 학습할 수 있는 대표 사이트입니다.
👉 MDN
👉 W3school
3. 실습 과제 및 느낀 점
👉 아래의 과제를 수행한 후 과제를 제출 합니다.
-
설치 해둔 VSCode에디터를 엽니다.
-
여러분이 cli 과제하며 만들어 두셨던
Beginner-track폴더내부에beginner.html파일을 만듭니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML 이론학습</title>
</head>
<body>
<!-- 이곳에 작성하세요. -->
</body>
</html>beginner.html파일에 위 코드를 붙여 넣습니다.
- 3~5번의 내용을 태그 내부에 작성 해 보세요.
-
<h1>요소를 사용해서 문서의 제목을 작성하세요.- 제목은 ‘오늘의 할 일’로 작성하세요.
- 제목은 ‘오늘의 할 일’로 작성하세요.
-
<h1>요소로 만든 제목을 하이퍼링크로 변경하세요.- URL은
https://ozcodingschool.com/을 사용하세요.
- URL은
-
순서가 없는list를 4개 만들고 각 list를 아래 조건에 맞게 작성하세요.- HTML 예습하기
- MDN 사이트 접속하기
- w3school 사이트 접속하기
- 실습 도전하기
✅ 과제 완성 화면
💪 실습한 후 느낀 점
오늘은 드디어 코드 에디터인 VSCode를 직접 사용해 HTML 파일을 작성해보는 시간을 가졌습니다. 너무 오랜만에 사용하는 프로그램이라, 간단한 HTML 파일 하나를 만드는 작업조차 새롭게 느껴졌습니다.
HTML은 겉으로 보기에는 쉬워 보여도, 막상 직접 작성하려고 하면 기본적인 문법조차 헷갈릴 때가 종종 있습니다. 이럴 때는 잠시 고민해보다가 모르는 부분은 과감히 검색하고,직접 작성해보며 익숙해지는 과정이 무엇보다 중요하다는 것을 다시금 느꼈습니다.
오늘은 비교적 간단한 HTML 문서 작성이기도 했고, 예전에 HTML 파일을 만들어본 경험 덕분인지
앞서 진행했던 ‘CLI 환경 알아보기’나 ‘Git & GitHub 설정’보다 조금 더 수월하게 학습을 마칠 수 있었습니다.
하지만 이제 다음 학습에서는 CSS와 JavaScript 학습이 시작됩니다. CSS는 이전에 접해본 적이 있어서 어느 정도 익숙하지만, HTML보다 조금 더 복잡하고 헷갈리는 부분이 많았던 것으로 기억합니다. JavaScript는 거의 처음 배우는 수준이라 다소 걱정도 되지만, 기초부터 차근차근 쌓아가다 보면 어느 순간 익숙해질 것이라 믿고 있습니다.
내일도 게을리하지 않고, 꾸준히 학습을 이어가야겠습니다. 💪🔥
