19. 16
HTML HTML5
DOCTYPE
!DOCTYPE html PUBLIC -//W3C//DTD XHTML
1.0 Transitional//EN http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd
!DOCTYPE html
ENCODOING
meta http-equiv=Content-Type
content=text/html; charset=utf-8 /
meta charset=“utf-8”
LANGUAGE
html xmlns=http://www.w3.org/1999/
xhtml lang=ko xml:lang=ko
html lang=“kr”
JS
script src=scripts/dynamiclayout.js
type=text/javascript/script
script src=“script.js”/script
Stylesheet
link rel=stylesheet type=text/css
href=“css/wide.css /
link rel=“stylesheet” href=“stylesheet.css”
70. !DOCTYPE html
html lang=“kr”
head
title처음배우는 HTML/title
/head
body
header
nav/nav
/header
main
section
article/article
/section
/main
footer/footer
/body
/html
문서의 언어를 지정.
한국어가 기본이니 “kr
71. !DOCTYPE html
html lang=“kr”
head
meta charset=utf-8 /
title처음배우는 HTML/title
/head
body
header
nav/nav
/header
main
section
article/article
/section
/main
footer/footer
/body
/html
브라우저에서 문서를 읽어들
일때 필요한 문자인코딩을
UTF-8로 지정
이전에는 euc-kr등을 사용
해왔지만 요새는 거의 90%
정도 UTF-8을 사용
72. head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=“
ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“
meta name=keywords content=“
ABCD, About Coding, 재능기부, 기초코딩”
/head
점점 길어지니
일단 header부분만..
문서를 설명하는
description,
문서가 다루는 중요 키워드
keywords를 기입
73. head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=
meta name=keywords content=
/head
점점 길어지니
일단 header부분만..
문서를 설명하는
description,
문서가 다루는 중요 키워드
keywords를 기입
SEO(Search Engine Optimizer)적인
이야기로 잠깐 빠지지만..
문서를 설명할 수 있는 내용은
통상적으로 110자정도까지를 추천하며
검색엔진에 나타나는 2~3줄정도에 해당
74. head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=
meta name=keywords content=
/head
점점 길어지니
일단 header부분만..
문서를 설명하는
description,
문서가 다루는 중요 키워드
keywords를 기입
문서를 가장 잘 나타낼 수 있는
단어를 선정하여 4,5개정도로 정리하는것이
좋습니다. 하나의 페이지에서 다루는
기사의 내용을 숙지할 필요가 있습니다.
75. head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=“
ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“
meta name=keywords content=“
ABCD, About Coding, 재능기부, 기초코딩”
link rel=stylesheet type=text/css
href=stylesheet.css
script type=text/javascript
src=javascript.js/script
/head
이번 HTML시간에는 다루지
않는 내용이지만..
CSS(CasCading Style
Sheet)파일등 외부파일을
불러오기 위한 link,
사이트를 좀더 동적으로 움
직여주기위해 사용되는
JS(JavaScript)등을 불
러오는 script를 기입
76. !DOCTYPE html
html lang=“kr”
head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=“ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“
meta name=keywords content=“ABCD, About Coding, 재능기부, 기초코딩”
link rel=stylesheet type=text/css href=stylesheet.css
script type=text/javascript src=javascript.js/script
/head
body
header
nav/nav
/header
main
section
article/article
/section
/main
footer/footer
/body
/html
지금까지 작성한 코드
82. main
section
h2section의 타이틀/h2
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지
금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위
해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말
로는 부족한, 노트북의 미래가 여기 있습니다.
/p
article
h3article의 타이틀/h3
/article
/section
/main
문단을 뜻하는
p(paragraph) 기입
83. main
section
h2section의 타이틀/h2
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지
가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자 경험을
구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새
롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가 여기
있습니다.
/p
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지
가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자 경험을
구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새
롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가 여기
있습니다.
/p
article
h3article의 타이틀/h3
/article
/section
/main
문단을 뜻하는
p(paragraph) 기입
문단을 복사해서 추가시켜봅
니다.
84. 생략
.
.
.
가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자 경험
을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나
를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가
여기 있습니다.
/p
article
h3article의 타이틀/h3
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지
가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자 경험
을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나
를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가
여기 있습니다.
/p
/article
/section
/main
article 안에도 복사해서
추가합니다.
86. !DOCTYPE html
html lang=“kr”
head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=“ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“
meta name=keywords content=“ABCD, About Coding, 재능기부, 기초코딩”
link rel=stylesheet type=text/css href=stylesheet.css
script type=text/javascript src=javascript.js/script
/head
body
header
h1처음배우는 HTML/h1
nav
ul
li메뉴1/li
li메뉴2/li
/ul
/nav
/header
main
section
h2section의 타이틀/h2
p우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의
미래가 여기 있습니다./p
p우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의
미래가 여기 있습니다./p
article
h3article의 타이틀/h3
p우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지
않는 완벽한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한,
노트북의 미래가 여기 있습니다./p
/article
/section
/main
footer
Copyright @ All Rights Reserved.
/footer
/body
/html
중간확인
그럴저럭 HTML처럼 보이기
시작하는 듯한..
하지만,
조금씩 어디가 어딘지 잘 모
르겠는 듯한..
87. !—- 주석 -—
!—- /주석 -—
!—- start -—
!—- end -—
!—- 여부터 -—
!—- 여까지 -—
작성중인 영역이 어디인지,
다른곳과 구별주기 위해 주
석태그를 추가합니다.
어떤 룰이 있는건 아니지만
주석의 시작과 끝을 알 수
있는 방법을 사용합니다.
88. body
!— header —
header
nav/nav
/header
!— header —
!— main —
main
!— section —
section
article/article
/section
!— section —
/main
!— main —
!— footer —
footer/footer
!— footer —
/body
본인이 작성한 html에 추가
시켜보세요
89. !DOCTYPE html
html lang=“kr”
head
meta charset=utf-8 /
title처음배우는 HTML/title
meta name=description content=“ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“
meta name=keywords content=“ABCD, About Coding, 재능기부, 기초코딩”
link rel=stylesheet type=text/css href=stylesheet.css
script type=text/javascript src=javascript.js/script
/head
body
!-- header --
header
h1처음배우는 HTML/h1
nav
ul
li메뉴1/li
li메뉴2/li
/ul
/nav
/header
!-- /header —
!-- main --
main
!-- section --
section
h2section의 타이틀/h2
p우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자 경험을 구
현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가 여기 있습니다./p
p우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자 경험을 구
현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가 여기 있습니다./p
!-- article --
article
h3article의 타이틀/h3
p우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽한 사용자
경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말로는 부족한, 노트북의 미래가 여기 있습니다./p
/article
!-- /article --
/section
!-- /section --
/main
!-- /main —
!-- footer --
footer
Copyright @ All Rights Reserved.
/footer
!-- /footer --
/body
/html
좀더 복잡해진건가?
91. main
section
h2section의 타이틀/h2
img
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지
금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위
해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말
로는 부족한, 노트북의 미래가 여기 있습니다.
/p
article
h3article의 타이틀/h3
/article
/section
/main
p앞쪽에 이미지를 추가
92. main
section
h2section의 타이틀/h2
img src=“”
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지
금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위
해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말
로는 부족한, 노트북의 미래가 여기 있습니다.
/p
article
h3article의 타이틀/h3
/article
/section
/main
img파일이 위치한 곳을 지
정
html파일이 있는 폴더에 아
무 이미지나 가져다 놓고..
93. main
section
h2section의 타이틀/h2
img src=“macbook.png”
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지
금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위
해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말
로는 부족한, 노트북의 미래가 여기 있습니다.
/p
article
h3article의 타이틀/h3
/article
/section
/main
img파일이 위치한 곳을 지
정
html파일이 있는 폴더에 아
무 이미지나 가져다 놓고..
95. main
section
h2section의 타이틀/h2
img src=“macbook.png”
width=“400”
p
우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지
금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽
한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위
해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말
로는 부족한, 노트북의 미래가 여기 있습니다.
/p
article
h3article의 타이틀/h3
/article
/section
/main
너무 큰 이미지를 알맞게 수
정하기위해
width로 이미지의 폭을 조
정
width : 너비
height: 높이
일반적으로 한쪽만 지정하면
다른쪽은 auto값이 들어감
