HTML 기초
HTML?? (HyperTextMarkup Language) 웹 페이지의 틀을 만드는 마크업 단어
어떻게 HTML을 쓸수있을까?
HTML은 tag들의 집합!!
- Tag: 부등호(<>)로 묶인 HTML의 기본 구성 요소
- html 확장자 사용
<!DOCTYPE html> // 이 문서가 HTML 문서임을 적어놈
<html> // html 시작 태그, 문서 전체의 틀을 구성
<head> // head 태그는 문서의 메타데이터를 선언
<title>환영 합니다!</title> // 문서의 제목, 브라우저의 탭에 보여짐
</head> // </태그이름>은 해당 태그가 끝났음을 의미
<body> // body 태그는 문서의 내용을 담는 곳
<h1>어서 오세요</h1> // heading을 의미, 크기에 따라서 h1부터 h6까지 있음
<div>컨텐츠는 여기! // content divsion을 의미, 줄바꿈됨
<span>여기를 눌러보세요!</span> // 줄바꿈이 없는 content 컨테이너
</div> // div태그 끝
</body> // body태그 끝
<html> // html 태그가 끝self-closing tag
태그 내부에 내용이 없다면 <tag></tag>
그냥 <tag/>와 같이 표현 가능하다!!
<img src="park-logo.png"></img>
<img src="park-logo.png" /> '/' 생략해도 가능함!!각종 태그
<div> div 태그는 한줄을 차지한다</div>
<div>division 2</div>
<span>span 태그는 컨텐츠 크기만큼 공간을 차지</span>
<span>span 2</span>
<span>span 3</span>
<div>division 3 </div>
결과!!
div태그는 한 한줄을 차지한다
division 2
span 태그는 컨텐츠 크기만큼 공간을 차지 span2 span3
division 3
img:이미지 삽입
<img src="삽입 하고싶은 이미지 주소"> /닫는 태그 생략가능!
key=value 구조!!
a:링크 삽입
<a href="http://naver.com(내가 이동하고싶은 홈페이지주소)">네이버</a>
이상태에서는 바로 네이버홈페이지로 이동하게 됨으로 만약 새탭으로 네이버 창을 열고싶다면
target="_blank" 추가 해주면 좋다!!
<a href="http://naver.com(내가 이동하고싶은 홈페이지주소)" target="_blank">네이버</a>
ul,li:리스트 //ul과 li로 리스트 를 만들어낼수있다! ~~텍스트~~
<ul>
<li>리스트 1</li>
<li>리스트 2</li>
<li>리스트 3
<ul>
<li>리스트 3-1</li>
<ul>
<li>
<ul>
input,textarea: 다양한 입력 폼
<input type="text" placeholder="이곳에 입력하세요">
태그를 input으로 넣고 type은 텍스트라고 설정, 이렇게하면
네모난 text를 쓸수있는 폼이 생성하고 이폼에 text를 넣고싶으면
placeholder="쓰고싶은말"
type 특성은 여러가지 text,password,radio,checkbox 등등 나머지는 mdn에서 찾아서 사용해보자!
type="radio" >> 둘중에 하나를 선택하는 폼을 만들때 사용
type="checkbox" >> 체크할수있는 폼이 생성됨
input과 textarea의 차이점
input은 줄바꿈이 안됨 그 한줄로 입력 가능하지만
textarea는 폼안에서 Enter키로 줄바꿈이 가능하다
<textarea></textarea> // 이렇게 쓰면 폼이 생성
버튼 생성
<button>로그인</button> >> 로그인 이라는 이름이 있는 버튼 폼이 생성된다!!
코린이