-
HTML
- HyperText Markup Language의 약자
- 웹 페이지의 틀을 만드는 마크업 언어
웹 브라우저 상에서 화면에 보이는 사이트 혹은 웹 앱을 표현하는 도구
HTML은 tag들의 집합, 트리 구조
Tag: 부등호(< >)로 묶인 HTML의 기본 구성 요소
<!DOCTYPE html> <html> <head> <title>page title</title> </head> <body> <h1>Hello world</h1> <div> contents here <span>tool here</span> </div> </body> </html>이 문서가 HTML 문서임을 명시 html 시작 태그로, 문서 전체의 틀을 구성 head 태그는 문서의 메타데이터를 선언 문서의 제목, 브라우저의 탭에 보여짐 </태그이름>은 해당 태그가 끝났음을 의미 body 태그는 문서의 내용은 담는 곳 heading을 의미하며, 크기에 따라 h1부터 h6까지 있음 content division을 의미, 줄 바꿈됨 줄 바꿈이 없는 content 컨테이너 div 태그가 끝났음을 의미 body 태그가 끝났음을 의미 html 태그가 끝났음을 의미많이 사용하는 HTML 태그
태그설명 설명 div Divison span Span img Image a Link ul & li Unordered List & List Item input Input (text, radio, checkbox) textarea Multi-line Text Input button Button div VS span
<div>div 태그는 한 줄을 차지</div> <div>division</div> <span>span 태그는 컨텐츠 크기만큼 공간을 차지</span> <span>span 1</span> <span>span 2</span> <div>division 1</div>div 태그는 한 줄을 차지divisionspan 태그는 컨텐츠 크기만큼 공간을 차지 span 1 span 2
division 1img: 이미지 삽입
<img src="https://cdn.pixabay.com/photo/2016/04/09/07/32/laptop-1317581_960_720.jpg" />
a: 링크 삽입
<a href="https://google.com" target="_blank">구글</a>Google
www.google.com
ul, li 리스트
<ul> <li>Item 1</li> <li>Item 2</li> <li> Item 3 has list <ul> <li>Item 3-1</li> </ul> </li> </ul>- Item 1
- Item 2
- Item 3 has list
- Item 3-1
input, textarea : 다양한 입력 폼
<input type="text" placeholder="type here" /> <div> <input type="radio" name="choice" value="a" /> a <input type="radio" name="choice" value="b" /> b </div> <textarea></textarea> <div> <input type="checkbox" checked /> checked <input type="checkbox" /> unchecked </div>a bchecked uncheckedbutton : 버튼
<button>클릭</button>자바스크립트를 HTML에서 사용하는 방법
HTML 내부에 작성
<!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> console.log('write your JS here'); </script> <body> </html>HTML 외부에 작성
- script 태그의 src 속성 이용
index.html
<script src="main.js"></script>main.js
console.log("write your JS here");'Note' 카테고리의 다른 글
재귀함수 (0) 2020.10.27 고차함수, 콜백함수 (0) 2020.10.27 Scope, Closure (0) 2020.10.27 CLI (0) 2020.10.27 객체 (0) 2020.10.27