Basic html
- 3. 시작하기전에 3
- 5. 한번
- 6. 해
- 7. 보실래요?
- 9. 6
- 11. HTML을 공부할 때 유의점 8
- 12. HTML을 공부할 때 유의점 9
- 13. HTML을 공부할 때 유의점 10
- 14. HTML을 공부할 때 유의점 11
- 16. 13
- 17. 14
- 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=gbk""Transcript_link__MLbGS" href="/slideshow/basic-html-45819408/45819408#20">17
- 21. 18
- 23. 20
- 24. 21
- 25. 22
- 26. 23
- 27. 24
- 28. 25
- 29. 26
- 30. 27
- 31. 28
- 33. 30
- 34. 31
- 35. 32
- 36. 33
- 37. 34
- 38. 35
- 39. 36
- 40. 37
- 41. 38
- 42. 39
- 44. 41
- 45. 42
- 46. 43
- 48. 45
- 49. 46
- 50. 47
- 51. 48
- 53. 50
- 54. 51
- 55. 52
- 56. 53
- 59. tag … /tag
- 60. HTML의 가장 기초는 tag의 열고 닫기 tag ABCD - About CODING /tag 페이지에 뭔가가 이상하다면 제일먼저 tag 가 제대로 닫혀 있는지 확인하시기 바랍니다.
- 61. html … /html body … /body p … /p div … /div span … /span
- 63. !DOCTYPE html 먼저 HTML 문서를 정의합니 다.
- 64. !DOCTYPE html html/html 먼저 HTML 문서를 정의
- 65. !DOCTYPE html html head/head body/body /html 문서를 정의하기 위한 head영역과 화면에 출력시켜주는 body영역
- 66. !DOCTYPE html html head title처음배우는 HTML/title /head body header/header main/main footer/footer /body /html 페이지의 제목을 브라우저에 알려주기 위한 title, 본문에서는 페이지의 제목등을 넣어주기 위한 header, 페이지의 컨텐츠를 넣어주기 위한 main, 페이지의 관련정보를 넣어주 기위한 footer를 작성
- 67. !DOCTYPE html html head title처음배우는 HTML/title /head body header nav/nav /header main section/section /main footer/footer /body /html Global Navigation 에 해당하는 nav, 업계에서는 통상 줄여서 gnv라고도 합니다. 페이지의 기본적인 영역, 1 장, 2장에 해당하는 section을 기입
- 68. !DOCTYPE html html head title처음배우는 HTML/title /head body header nav/nav /header main section article/article /section /main footer/footer /body /html 블로그의 기사등 독립적으로 가져다가 다른곳에 사용해도 무방한 article 을 기입 뭐 빼먹으신거 없으신가요?
- 69. !DOCTYPE html html head title처음배우는 HTML/title /head body header nav/nav /header main section article/article /section /main footer/footer /body /html 블로그의 기사등 독립적으로 가져다가 다른곳에 사용해도 무방한 article 을 기입 피눈물을 흘리기 전에 파일저장합시다. 본인이 찾기 쉬운 장소에 study라는 폴더를 만들고 abcd.html이라고 만들어서 저장하시기 바랍니다.
- 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 name="keywords" content="“ ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“ meta " content=“ ABCD, About Coding, 재능기부, 기초코딩” /head 점점 길어지니 일단 header부분만.. 문서를 설명하는 description, 문서가 다루는 중요 키워드 keywords를 기입
- 73. head meta charset=utf-8 / title처음배우는 HTML/title meta name=description name="keywords" content="meta " content= /head 점점 길어지니 일단 header부분만.. 문서를 설명하는 description, 문서가 다루는 중요 키워드 keywords를 기입 SEO(Search Engine Optimizer)적인 이야기로 잠깐 빠지지만.. 문서를 설명할 수 있는 내용은 통상적으로 110자정도까지를 추천하며 검색엔진에 나타나는 2~3줄정도에 해당
- 74. head meta charset=utf-8 / title처음배우는 HTML/title meta name=description name="keywords" content="meta " content= /head 점점 길어지니 일단 header부분만.. 문서를 설명하는 description, 문서가 다루는 중요 키워드 keywords를 기입 문서를 가장 잘 나타낼 수 있는 단어를 선정하여 4,5개정도로 정리하는것이 좋습니다. 하나의 페이지에서 다루는 기사의 내용을 숙지할 필요가 있습니다.
- 75. head meta charset=utf-8 / title처음배우는 HTML/title meta name=description name="keywords" content="“ ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“ meta " content=“ ABCD, About Coding, 재능기부, 기초코딩” link rel=stylesheet type=text/css href=stylesheet.css script type=text/javascript src=/slideshow/basic-html-45819408/45819408/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 name="keywords" content="“ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“ meta " content=“ABCD, About Coding, 재능기부, 기초코딩” link rel=stylesheet type=text/css href=stylesheet.css script type=text/javascript src=/slideshow/basic-html-45819408/45819408/javascript.js/script /head body header nav/nav /header main section article/article /section /main footer/footer /body /html 지금까지 작성한 코드
- 78. header h1처음배우는 HTML/h1 nav/nav /header 페이지의 가장 중요한 제목 을 h1으로 작성하며 통상적 으로 title과 같은 내용을 기입 H1은 페이지에서 단 한번만 사용합니다. HTML5에서는 중복사용도 가 능하지만 기계가 아닌 사람 이 HTML문서를 볼경우 이해 하기 힘들어지는 경우가 있 습니다.
- 79. header h1처음배우는 HTML/h1 nav ul li메뉴1/li li메뉴2/li /ul /nav /header gnv에 해당하는 메뉴는 일 반적으로 list tag를 사용 하여 기입
- 81. main section h2section의 타이틀/h2 article h3article의 타이틀/h3 /article /section /main section의 타이틀을 지정 ‘제1장의 제목은…’정도로 해석하면 좋을듯 article의 타이틀을 지정 1.1 등의 소제목정도 H1을 문서에서 한번만 사용 한다면 H2부터 H3, H4, H5, H6는 몇번을 사용해도 상관없습니다.
- 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 안에도 복사해서 추가합니다.
- 85. footer Copyright @ All Rights Reserved. /footer footer에 저작권정보를 기 입
- 86. !DOCTYPE html html lang=“kr” head meta charset=utf-8 / title처음배우는 HTML/title meta name=description name="keywords" content="“ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“ meta " content=“ABCD, About Coding, 재능기부, 기초코딩” link rel=stylesheet type=text/css href=stylesheet.css script type=text/javascript src=/slideshow/basic-html-45819408/45819408/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 name="keywords" content="“ABCD - 서로가 서로를 돕는다. 재능기부 플랫폼“ meta " content=“ABCD, About Coding, 재능기부, 기초코딩” link rel=stylesheet type=text/css href=stylesheet.css script type=text/javascript src=/slideshow/basic-html-45819408/45819408/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 좀더 복잡해진건가?
- 90. 이런 모습인가요? 페이지가 심심한… 이미지 추가를Ħ
- 91. main section h2section의 타이틀/h2 img p 우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지 금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽 한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위 해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말 로는 부족한, 노트북의 미래가 여기 있습니다. /p article h3article의 타이틀/h3 /article /section /main p앞쪽에 이미지를 추가
- 92. main section h2section의 타이틀/h2 img src=/slideshow/basic-html-45819408/45819408/“” p 우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지 금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽 한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위 해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말 로는 부족한, 노트북의 미래가 여기 있습니다. /p article h3article의 타이틀/h3 /article /section /main img파일이 위치한 곳을 지 정 html파일이 있는 폴더에 아 무 이미지나 가져다 놓고..
- 93. main section h2section의 타이틀/h2 img src=/slideshow/basic-html-45819408/45819408/“macbook.png” p 우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지 금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽 한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위 해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말 로는 부족한, 노트북의 미래가 여기 있습니다. /p article h3article의 타이틀/h3 /article /section /main img파일이 위치한 곳을 지 정 html파일이 있는 폴더에 아 무 이미지나 가져다 놓고..
- 94. 너무 큰..
- 95. main section h2section의 타이틀/h2 img src=/slideshow/basic-html-45819408/45819408/“macbook.png” width=“400” p 우리는 새로운 MacBook을 통해 불가능에 대한 도전을 시작했습니다. 지 금까지 가장 가볍고 가장 콤팩트한 Mac 노트북이면서도 무엇 하나 빠지지 않는 완벽 한 사용자 경험을 구현하는 것. 훨씬 가볍고 얇을 뿐 아니라 더 뛰어나게 만들기 위 해 모든 요소 하나하나를 새롭게 구상해야만 했습니다. 그저 새로운 노트북이라는 말 로는 부족한, 노트북의 미래가 여기 있습니다. /p article h3article의 타이틀/h3 /article /section /main 너무 큰 이미지를 알맞게 수 정하기위해 width로 이미지의 폭을 조 정 width : 너비 height: 높이 일반적으로 한쪽만 지정하면 다른쪽은 auto값이 들어감
- 97. 94
- 98. 95
- 100. 97