이해가 쉬움
정형화된 문법
쓰이는 문법만 맨날 쓰임
그래서 쉽게 가르칠것
그 '형식'에 집중할 것(문법 '종류' 단순 나열x)
자주 쓰이는 문법 위주 설명
HTML (Hyper Text Markup Language)
: Hyper Text = Link
: Markup Language = 컴퓨터가 알아들을 수 있는 언어 but 프로그래밍 언어랑은 다름.
제일 쉽게 HTML 파일 만들기
1.
메모장을 킨다.
2.
내용을 적는다.
3.
인코딩을 UDF-8 로 한다.
4.
확장자를 .html 로 저장한다.
제목 표시
부제목 표시
눈사람 사진
첫 번째 문단
줄바꿈
두 번째 문단
굵은 글씨
링크 www.likelion.net
리스트 - 순서 있는 것과 없는 것
1.
글
2.
글을 감싸는 틀(제목, 첫문단...)
3.
틀에 붙는 부가설명(눈사람 사진, 링크...)
→ HTML 코드로
1.
글
2.
태그
3.
속성
<h1> 제목 1번 크기(가장 큼)
<h2> ...<h6>(가장 작음)
<p> 단락
<br> 줄바꿈
<strong> 굵은 글자 - 메모장 html 작성시 굵기 동일
<ol> 순서 있는 리스트
<ul> 순서 없는 리스트
<li> 리스트의 각 항목
<a href="링크"> 하이퍼링크
<img.src="파일명"> 이미지
등!
태그의 종류를 나열하듯 외우며 공부하지 말고
문법형식과 동작방식에 집중
1.
직접 쳐보는게 중요해요
2.
HTML은 중요한 기초!
과제
대원칙! HTML로 꾸미려 들지 말자
HTML은 애초에 '꾸미는 언어'가 아님
꾸미는 언어는 CSS!
문서의 일부를 설명해주기 위한 HTML(저번 시간)
문서의 전체를 설명해주기 위한 HTML(이번 시간)
→
HTML 코드
1.
"이거 HTML(로 작성된) 문서야!" 알려주는 태그 : <!DOCTYPE html>, <html>, <html lang="ko">
2.
직접 화면에 등장하지는 않지만 이 문서를 설명하는 태그 ex) 이 문서를 한 마디로 설명하는 문서의 'Title', 인코딩 방식(UTF-8)... : <head>
3.
직접적으로 화면에 등장하는, 문서에서 보이는 태그 ex) h1, p, li... : <body>, <h1>, <a>, <li>, <img> 등
Visual Studio Code 사용법 설명 (Live Server 설치)
사용자로부터 입력받는 태그 : <form action = "전송받을 대상">
사용자→<form>→HTML→<form action = "전송받을 대상">→입력값 처리 프로그램
<!DOCTYPE html>
<html lang = "ko">
<head>
<meta charset = "utf-8">
<title>나를 소개해요</title>
</head>
<body>
<h1>조여정을 소개합니다</h1>
<h2>조여정을 소개해요</h2>
<form action="전송받을 대상">
아이디 : <input type = "text" name = "myid">
비밀번호 : <input type = "password" name = "mypw">
<input type = "submit">
</form>
<br>
<img src = "snowman.jpg" width = 300>
<form action = "전송받을 대상">
<h2>나의 일기장<h2>
제목 : <input type = "text" name = "diarytitle"> <br>
<select>
<option value = "goodday">좋은날</option>
<option value = "sadday">슬픈날</option>
<option value = "soso">그저그런날</option>
</select> <br>
내용 : <br>
<textarea cols = "30" rows = "20"></textarea>
<br> <input type = "submit">
</form> <br>
<h2>나의 일대기</h2>
<ol>
<li><a href = "1.html">유년기</a></li>
<li><a href = "1.html">질풍노도의 시기</a></li>
<li><a href = "1.html">방황기</a></li>
<li><a href = "1.html">지금</a></li>
</ol>
</body>
</html>
HTML
복사