웹 개발에는 3가지 언어를 사용한다
- HTML : 웹페이지의 구조를 담당하는 마크업 언어
- CSS : 디자인요소를 시각화하는 스타일시트 언어
- JS : 단순한 웹페이지를 프로그램으로 만들어 유저와 상호작용하게 하는 프로그래밍 언어
HTML
HyperText Markup Language
HTML은 tree 구조로 이루어져 있다.
<head> <!-- 문서의 메타데이터를 선언 --!> <title> 페이지 제목 </title> </head> <body> <!-- 문서 본문 --!> <h1> h1~h6으로 문서 헤딩 </h1> <div> contents division . 줄바꿈 가능 </div> <span> 줄바꿈이 없는 콘텐츠 컨테이너 </span> </body>
태그
-
Opeaning tag
<head>, <body> 등 태그 시작 -
Closing tag
</head>, </body> 등 태그 종료 -
Self Closing tag
<img src ='a.jpg' /> 등 자동으로 태그가 종료되는 것들
가장 자주 사용되는 태그
<div> contents division. 줄바꿈 가능 <span> 줄바꿈 불가. div태그 하위에만 위치할 수 있다 <img> 이미지 <a> 링크 <ul> 미지시 리스트 <li> 리스트 아이템 <input> input (text, radio, checkbox 등) <textarea> Multi-line text input <button> 버튼 <p> 문단 <section> 구역
링크
a 태그를 이용하면 링크를 만들 수 있는데
<a href ="http://naver.com/">네이버</a> 이렇게 하면 그 창에서 그대로 링크를 연다. 만약 새 창에서 열도록 하려면 <a href ="http://naver.com/" target="_blank">네이버</a> 이렇게 타켓을 지정해주면 새 창에서 열린다.
리스트
<ul> <li> Item 1 </li> <li> Item 2 </li> <li> Item 3 </li> <ul> <li> Item 3-1 </li> </ul> </ul> 리스트는 먼저 ul인지 ol인지 선택하고 그 밑에 리스트 항목을 적어주면 된다. ul로 선언하면 리스트 넘버링이 기호로 표시되고, ol로 선택하면 숫자로 표시된다
- Item 1
- Item 2
- Item 3
- Item 3-1
텍스트박스
<input type ="text" placeholder="텍스트"> <input type="password">
체크박스
<input type ="checkbox" checked> 선택된 체크박스 <input type ="checkbox"> 미선택 체크박스
선택된 체크박스
미선택 체크박스
라디오박스
둘 중 하나만 선택할 수 있는 버튼
라디오박스는 중간에 name 부분에 같은 그룹끼리 묶어줘야 연동하여 작동한다.
<input type ="radio" name="groupname_1" value="radio_1"> 첫번째 선택 버튼 <input type ="radio" name="groupname_1" value="radio_2"> 두번째 선택 버튼
첫번째 선택 버튼
두번째 선택 버튼
Textarea
textbox와 다르게 줄바꿈이 가능하고, 여는 태그와 닫는 태그가 모두 있어야만 한다.
<textarea></textarea>
버튼
<button>버튼에 표시할 내용</button>
버튼에 표시할 내용
하루하루 배울때마다 기록하는 일기장