HTML
html이란?
HyperText Markup Language의 약자로 웹 페이지를 구성하는 마크업 언어이다.
프로그래밍 언어가 아닌 웹 페이지를 구성하는 뼈대가 되는 언어이다.
즉,
HTML은 웹 페이지의 구조를 설계하는 것이고,
CSS는 디자인 요소를 시각화 하는 스티일 시트 언어이고,
자바스크립트는 단순한 웹 페이지를 프로그램을 만들어 유저와 상호작용할 수 있게 해주는 언어이다.
HTML은 태그들의 집합이다!
예시
<html> <head> // html 시작 태그로, 문서 전체의 틀을 구성 <title>Page title</title> // 문서의 제목 </head> <body> // 문서의 내용을 담는 곳을 의미하는 태그 <h1>Hi, Mr.Cho</h1> // heading을 의미하며, 크기에 따라 h1~h6까지 있음 <div>Contents here // content division을 의미하며, 줄바꿈이 됨 <span>Here too!</span> // 줄바꿈이 없는 content 컨테이너 </div> </body> </html>
HTML에서 자주 사용되는 태그!
예시
<div> // 컨텐츠가 한 줄을 차지하는 태그 <span> // 컨텐츠의 크기만큼 공간을 차지하는 태그 <img> // 이미지 삽입 가능 태그 <a> // 페이지 이동이 가능한 URL링크 삽입 가능 태그 <ul>&<li> // 리스트 구성 가능 태그 <input> // 다양한 입력 폼 가능 태그 <textarea> // 줄바꿈이 되는 텍스트 박스 형성 태그 <button> // 버튼 형성 태그
div Vs span
아래의 태그 구성은
<div>div 태그는 한 줄을 차지한다</div> <span>span 태그는 컨텐츠 크기만큼 공간을 차지한다</span> <span>span2</span> <span>span3</span> <div>division3</div>아래처럼 웹 페이지에 나타난다
div 태그는 한 줄을 차지한다span 태그는 컨텐츠 크기만큼 공간을 차지한다 span2 span3division3
img:웹 페이지에 이미지 삽입
<img src = "이미지 링크">
a:웹 페이지에 링크 삽입
<a href = "https://naver.com" target="_blank">네이버</a>
ul, li: 리스트 형성
아래의 태그 구성은
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3 list <ul> <li>Item 3-1</li> </ul> </li> </ul>아래처럼 웹 페이지에 나타난다
- Item 1
- Item 2
- Item 3 list
- Item 3-1
ul, li: 리스트 형성
아래의 태그 구성은
<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 unchecked
button: 버튼 형성
아래의 태그 구성은
<button>누르세요</button>아래처럼 웹 페이지에 나타난다
누르세요
개발신생아