반응형
- HTML은 Hyper Text Markup Language입니다.
- HTML은 웹사이트를 만들 때 사용하는 언어이지요.
- 웹 페이지의 내용이나 구조 등등에 대한 설명을 담고 있습니다.
모든 HTML의 문서는 기본적으로 아래와 같이 구성이 되어있습니다. <head></head> 사이에 웹 페이지의 정보를 담을 수 있고요, <body></body> 사이에 웹 페이지의 구조와 콘텐츠 내용을 담습니다.
|
<!DOCTYPE html> |
<!DOCTYPE html>은 이 문서가 html5 문서임을 정의합니다. |
HTML의 역사
WWW World Wide Web, 오랜 역사를 간직한 HTML, 쉬워서 아직까지 쓰입니다. 스티븐잡스가 2014년 애플에 도입한 HTML5(관련포스팅)는 어도비의 플래쉬를 없애고, 더 빨라졌으면 더 가벼워졌습니다.
| 발행년도 | HTML 버전 |
| 1989 | 팀버너스리가 WWW을 발명 |
| 1991 | 팀버너스리가 HTML을 발명 |
| 1993 | 데이브가 HTML 플러스 초안을 만듬 |
| 1995 | HTML 2.0이 나옴 |
| 1997 | HTML 3.2 등장 |
| 1999 | HTML 4.01 등장 |
| 2000 | XHTML 1.0 등장(HTML에 대한 XML구문) |
| 2008 | HTML5의 첫 도안이 나옴 |
| 2012 | WHATWG의 HTML5 (웹 하이퍼텍스트 애플리케이션 테크놀로지 워킹 그룹) |
| 2014 | HTML5가 드디어 상용화 |
*WHATWG(web hypertext application technology working group)은 HTML 및 관련 기술을 발전시키는 데 관심이 있는 사람들의 모임입니다. 2004년 애플, 모질라재단, 오페라 소프트웨어의 개인이 설립하였습니다. 그중의 편집장 이안 힉슨이 구글로 이직하면서 구글도 일원이 되었습니다.
HTML을 배우기 위한 에디터를 설치해주세요.
메모장을 사용하셔도 되고, 노트패드++라는 프로그램을 사용하셔도 됩니다. 저는 ATOM을 사용하겠습니다. 이것저것 기능도 많고, 편리하게 작성이 가능해서 추후 프런트엔드로, 웹퍼블리셔로 진로를 희망하신다면 아톰이 국민 에디터라고 생각하시면 될 듯합니다. 왜냐면 html 코드는 엄청나게 길기 때문에 일일이 다 타이핑을 통해서 넣어주다 보면 지치기 마련이거든요. 그래서 아톰은 그렇게 지치고, 상처 받아버린 개발자들의 손목을 보호하고자 여러 좋은 "플러그인"기능을 지원하고 있습니다. ATOM의 설치 및 사용방법은 (아톰-관련포스팅) 클릭해서 확인이 가능합니다.
유용한 아톰의 플러그인 목록
- atom-beautify / 언어 정렬, 필수 앱
- highlighted-selected / 현재 위치, 클릭된 단어 표시
- minimap / 전체 코드 간략 프리뷰
- autoclose-html / 열면 자동으로 닫아줌
- code-peek / 다른 파일의 함수 식을 가지고 옴
- markdown-priview-enhanced
- pigments / 코드로 된 색의 색상을 보여줌
- atom-html-preview / 만든 코드를 실행해서 미리 보기 제공
- emmet / 공부를 좀 해야 하지만 매우 유용해질 앱
HTML을 시작하면 반드시 보게 되는 Lorem ipsum
로렘 입숨은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 글귀입니다. 바쁘게 작업을 하다 보면 생각보다 뭘 써야 할지 난감해지는 경우가 있습니다. 그래서 급히 "블라블라블라"라는 식으로 적기도 하는데요. 하시다 보면 깨닫습니다. 그것조차 스트레스인 경우가 있죠. 그래서 우리는 표준 블라블라인 로렘 입숨, 줄여서 립숨을 사용합니다.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis sed nisi vel tincidunt. Aenean nisl augue, tincidunt sed consequat vel, bibendum non mi. Integer ullamcorper vestibulum ullamcorper. Ut vehicula cursus pellentesque. Ut eleifend arcu sit amet neque consequat interdum. Phasellus tempor libero neque, ac interdum augue dapibus at. Nulla porttitor porta nisi non imperdiet. Nullam posuere pretium nulla ultricies tincidunt.
Ut ultrices massa ac sem semper, vel venenatis lorem dignissim. Donec malesuada dignissim magna, at condimentum mi dictum quis. Proin quis elementum nulla, id blandit ante. Aliquam erat volutpat. Fusce vitae aliquam quam. Maecenas non maximus justo, eu maximus est. Phasellus luctus mi eget cursus auctor. Nam in erat justo. Vivamus orci libero, aliquam sit amet nunc sit amet, vulputate vehicula sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus viverra fringilla venenatis. Nulla et pulvinar libero, sit amet semper tellus.
Donec id augue eget ante pellentesque posuere. Aenean leo felis, porta vel efficitur in, molestie ac urna. Ut viverra tempus euismod. Duis efficitur tincidunt odio vitae scelerisque. Phasellus sollicitudin nunc et diam porta, vitae fringilla sapien pharetra. Praesent faucibus ligula et odio condimentum, sed fringilla mi egestas. Proin dui est, tincidunt eget tortor at, pulvinar tincidunt augue. Quisque molestie magna et est scelerisque, vel varius quam mollis. Fusce cursus gravida neque, et suscipit quam tempus et. Fusce quis lacus ut metus pharetra molestie.
Curabitur suscipit quis orci et tempor. Suspendisse quis lectus sit amet diam eleifend porttitor nec quis risus. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Suspendisse neque sapien, feugiat eu ullamcorper vitae, interdum eget velit. Curabitur tellus ligula, vehicula in condimentum quis, vulputate et est. Aliquam a commodo lorem. Mauris luctus lectus eget elit dignissim ullamcorper. Etiam efficitur purus ullamcorper erat tempus consectetur. Suspendisse tincidunt enim nec finibus maximus. Donec eget blandit augue. Donec vel sem eros. Sed auctor blandit cursus. Pellentesque vel magna est. Etiam a nulla eleifend, semper quam quis, sollicitudin risus.
Mauris placerat, ipsum ut pellentesque cursus, orci nisl gravida felis, eu convallis orci turpis a risus. Sed vel ligula tortor. Suspendisse in quam quis nisi porta pulvinar. Vivamus eget venenatis quam, a facilisis turpis. Donec suscipit, neque ac pellentesque luctus, erat libero tristique lacus, eget egestas magna turpis quis velit. Mauris vel ligula faucibus, iaculis quam nec, sagittis nunc. Suspendisse a iaculis arcu. Duis dui purus, elementum vel mi nec, consequat condimentum justo. Quisque quis urna accumsan urna finibus bibendum eget a tellus. Nulla eget nisi eget diam ultricies accumsan cursus ut ex. Vivamus sit amet eros in diam sagittis dignissim ut et odio. Proin ornare ornare dolor sed consectetur. Vivamus efficitur, mi non pellentesque mattis, enim odio aliquam ex, id viverra diam neque nec mauris. Fusce pharetra diam id lorem consectetur, eu dictum metus tincidunt.
더보기
| <body> |
| <div class="container"> |
| <h1>Lorem ipsum</h1> |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis sed nisi vel tincidunt. Aenean nisl augue, tincidunt sed consequat vel, bibendum non mi. Integer ullamcorper vestibulum ullamcorper. Ut vehicula cursus pellentesque. Ut eleifend arcu sit amet neque consequat interdum. Phasellus tempor libero neque, ac interdum augue dapibus at. Nulla porttitor porta nisi non imperdiet. Nullam posuere pretium nulla ultricies tincidunt.</p> |
| <p>Ut ultrices massa ac sem semper, vel venenatis lorem dignissim. Donec malesuada dignissim magna, at condimentum mi dictum quis. Proin quis elementum nulla, id blandit ante. Aliquam erat volutpat. Fusce vitae aliquam quam. Maecenas non maximus justo, eu maximus est. Phasellus luctus mi eget cursus auctor. Nam in erat justo. Vivamus orci libero, aliquam sit amet nunc sit amet, vulputate vehicula sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus viverra fringilla venenatis. Nulla et pulvinar libero, sit amet semper tellus.</p> |
| <p>Donec id augue eget ante pellentesque posuere. Aenean leo felis, porta vel efficitur in, molestie ac urna. Ut viverra tempus euismod. Duis efficitur tincidunt odio vitae scelerisque. Phasellus sollicitudin nunc et diam porta, vitae fringilla sapien pharetra. Praesent faucibus ligula et odio condimentum, sed fringilla mi egestas. Proin dui est, tincidunt eget tortor at, pulvinar tincidunt augue. Quisque molestie magna et est scelerisque, vel varius quam mollis. Fusce cursus gravida neque, et suscipit quam tempus et. Fusce quis lacus ut metus pharetra molestie.</p> |
| <p>Curabitur suscipit quis orci et tempor. Suspendisse quis lectus sit amet diam eleifend porttitor nec quis risus. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Suspendisse neque sapien, feugiat eu ullamcorper vitae, interdum eget velit. Curabitur tellus ligula, vehicula in condimentum quis, vulputate et est. Aliquam a commodo lorem. Mauris luctus lectus eget elit dignissim ullamcorper. Etiam efficitur purus ullamcorper erat tempus consectetur. Suspendisse tincidunt enim nec finibus maximus. Donec eget blandit augue. Donec vel sem eros. Sed auctor blandit cursus. Pellentesque vel magna est. Etiam a nulla eleifend, semper quam quis, sollicitudin risus.</p> |
| <p>Mauris placerat, ipsum ut pellentesque cursus, orci nisl gravida felis, eu convallis orci turpis a risus. Sed vel ligula tortor. Suspendisse in quam quis nisi porta pulvinar. Vivamus eget venenatis quam, a facilisis turpis. Donec suscipit, neque ac pellentesque luctus, erat libero tristique lacus, eget egestas magna turpis quis velit. Mauris vel ligula faucibus, iaculis quam nec, sagittis nunc. Suspendisse a iaculis arcu. Duis dui purus, elementum vel mi nec, consequat condimentum justo. Quisque quis urna accumsan urna finibus bibendum eget a tellus. Nulla eget nisi eget diam ultricies accumsan cursus ut ex. Vivamus sit amet eros in diam sagittis dignissim ut et odio. Proin ornare ornare dolor sed consectetur. Vivamus efficitur, mi non pellentesque mattis, enim odio aliquam ex, id viverra diam neque nec mauris. Fusce pharetra diam id lorem consectetur, eu dictum metus tincidunt.</p> |
| </div> |
| </body> |
| </html> |
반응형
'HTML' 카테고리의 다른 글
| 티스토리, HTML을 사용해서 게시판 속에 링크걸기 (2) | 2021.01.18 |
|---|---|
| HTML 요소, 속성, 머리글, 문단 (0) | 2020.08.31 |
댓글