초등학생도 쉽게 따라 하는 웹페이지 만드는 언어인 HTML 명령어를 배워봅시다. 1주일 단기코스를 따라 하면서 HTML 언어가 무엇이고, 실제로 적용을 시켜나가면서 온갖 영어로 되어서 어렵기만 한 HTML언어를 쉽게 정복해 봅니다.
1일 차: HTML 소개 및 기본 구조
학습 목표: HTML이 무엇인지 이해하고 기본 구조를 익히기
HTML은 웹 페이지를 만들 때 사용하는 언어입니다.
HTML은 태그로 구성되어 있습니다. 태그는 <와 >로 둘러싸인 글자들입니다.
HTML 문서의 기본 구조를 살펴봅시다:
<! DOCTYPE html>
<html>
<head>
<title>My First HTML Page </title>
</head>
<body>
<h1>Welcome to My Website </h1>
<p>This is my first paragraph. </p>
</body>
</html>
연습: 위 코드를 메모장이나 텍스트 편집기에 복사하고, 파일 이름을 index.html로 저장한 후 웹 브라우저로 열어보세요.
2일 차: HTML 태그들 - 헤더와 단락
학습 목표: 헤더 태그(h1~h6)와 단락 태그(p)를 배우기
헤더 태그: <h1>은 가장 큰 헤더, <h6>은 가장 작은 헤더를 나타냅니다.
단락 태그: <p>는 단락을 나타냅니다.
html
<h1> This is a main header </h1>
<h2> This is a sub header </h2>
<p> This is a paragraph of text. </p>
연습: 여러 가지 헤더 태그와 단락 태그를 사용하여 웹 페이지를 작성해 보세요.
3일 차: 목록 만들기
학습 목표: 순서가 있는 목록(ol)과 순서가 없는 목록(ul) 배우기
순서가 있는 목록: <ol>은 숫자가 붙은 목록을 만듭니다.
순서가 없는 목록: <ul>은 점이 붙은 목록을 만듭니다.
목록 항목은 <li>로 표시합니다.
html
<ol>
<li> First item </li>
<li> Second item </li>
</ol>
<ul>
<li> Item one</li>
<li>Item two </li>
</ul>
연습: 두 가지 목록을 사용하여 자신만의 목록을 만들어 보세요.
4일 차: 링크 만들기
학습 목표: 하이퍼링크를 만들기
링크 태그: <a>를 사용하여 다른 페이지로 연결합니다.
href 속성을 사용하여 링크의 주소를 지정합니다.
html
<a href="https://www.example.com"> Visit Example.com </a>
연습: 자신이 좋아하는 웹사이트로 가는 링크를 만들어 보세요.
5일 차: 이미지 삽입
학습 목표: 이미지 태그(img) 배우기
이미지 태그: <img>를 사용합니다.
src 속성을 사용하여 이미지의 경로를 지정합니다.
alt 속성을 사용하여 이미지를 설명합니다.
html
<img src="https://www.example.com/image.jpg" alt="Description of the image">
연습: 웹에서 이미지를 찾아서 페이지에 삽입해 보세요.
6일 차: HTML 속성 이해하기
학습 목표: 태그에 속성을 추가하여 더 많은 정보를 제공하기
속성은 태그 내부에 추가 정보를 제공합니다.
<a>, <img> 태그에서 이미 사용해 본 속성들을 복습합니다.
html
<a href="https://www.example.com" target="_blank"> Open Example in New Tab </a>
<img src="https://www.example.com/image.jpg" alt="Image description" width="500">
연습: 속성을 사용하여 링크와 이미지를 조정해 보세요.
7일 차: 테이블 만들기
학습 목표: 테이블 태그(table, tr, td, th) 배우기
테이블은 <table> 태그로 시작합니다
1일 차: HTML 소개와 기본 구조
학습 목표: HTML이 무엇인지 이해하고, 기본 구조를 익히기
1. HTML이란?
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만드는 데 사용되는 언어야. HTML은 태그를 사용해서 텍스트, 이미지, 링크 등을 웹 페이지에 추가할 수 있어.
2. HTML 문서의 기본 구조
HTML 문서의 기본 구조는 다음과 같아. 이 구조는 모든 HTML 문서에서 동일하게 사용돼.
html
코드 복사
<! DOCTYPE html>
<html>
<head>
<title> My First HTML Page </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> This is my first paragraph. </p>
</body>
</html>
이 코드를 자세히 살펴볼게.
<! DOCTYPE html>: 이 줄은 문서의 형식을 HTML5로 지정하는 선언이야.
<html>: 이 태그는 HTML 문서의 시작을 나타내.
<head>: 이 부분은 문서에 대한 메타데이터(예: 제목, 스타일, 링크 등)를 포함해.
<title>: 이 태그는 웹 페이지의 제목을 지정해. 브라우저 탭에 표시돼.
<body>: 이 태그는 실제로 사용자에게 보이는 콘텐츠를 포함해.
<h1>: 이 태그는 가장 큰 헤더를 나타내.
<p>: 이 태그는 단락을 나타내.
3. 첫 번째 HTML 페이지 만들기
이제, 우리가 배운 구조를 사용해서 간단한 HTML 페이지를 만들어 보자.
Step 1: 메모장이나 텍스트 편집기를 열고, 아래 코드를 입력해.
html
<! DOCTYPE html>
<html>
<head>
<title> My First HTML Page </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> This is my first paragraph. </p>
</body>
</html>
Step 2: 파일 이름을 index.html로 저장해. 파일 형식은 '모든 파일'로 선택하고. html 확장자를 꼭 붙여야 해.
Step 3: 저장한 파일을 더블 클릭해서 웹 브라우저로 열어봐. 웹 페이지가 어떻게 보이는지 확인할 수 있을 거야.
4. 연습해 보기
이제, 연습을 통해 조금 더 익숙해져 보자.
연습 1: 새로운 HTML 파일을 만들고, <h1> 대신 <h2> 태그를 사용해 보자. <h2> 태그는 <h1>보다 작은 헤더를 나타내.
html
<! DOCTYPE html>
<html>
<head>
<title> My Second HTML Page </title>
</head>
<body>
<h2> Welcome to My Second Page </h2>
<p> This is another paragraph. </p>
</body>
</html>
연습 2: <p> 태그를 하나 더 추가해 보자. 새로운 단락을 추가할 수 있어.
html
<! DOCTYPE html>
<html>
<head>
<title> My Third HTML Page </title>
</head>
<body>
<h1> Welcome to My Website </h1>
<p> This is my first paragraph. </p>
<p>This is my second paragraph.</p>
</body>
</html>
이렇게 해서 첫날의 학습을 마쳤어. 오늘은 HTML의 기본 구조와 태그 사용법을 배웠고, 간단한 웹 페이지를 만들어보았어. 내일은 조금 더 다양한 태그들을 배워볼 거야. 잘했어!