<h1>홈페이지 만들기</h1>
<h2>뭐부터 시작?</h2>
<p>
프론트엔드 언어를 배워야 함! <a href="http://google.com">구글링</a>
</p>
<p></p>
는 기본 바탕글이라고 생각하면 된다.href="주소"
새 창을 띄우고 싶다면 target="_blank"
를 추가하자.
<p>
프론트엔드 언어를 배워야 함! <a href="http://google.com" target="_blank">구글링</a>
</p>
이미지를 볼 수 있다.
<img src="https://guide-images.cdn.ifixit.com/igi/BLjmqJ6chlskwIOP.large" height="200px" />
height
는 그림의 세로 길이를 200픽셀
로 규정한다는 의미다.순서를 가지고 정렬한다.
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ol>
ul
는 unordered list
로 순서가 없는 리스트이다.ol
은 ordered list
로 순서가 있는 리스트이다.표를 만들 수 있다.
<h2>언어의 역할</h2>
<table border="1">
<thead>
<tr>
<td>언어</td>
<td>역할</td>
</tr>
</thead>
<tbody>
<tr>
<td>HTML</td>
<td>문서 내용을 작성</td>
</tr>
<tr>
<td>CSS</td>
<td>문서 디자인을 담당</td>
</tr>
<tr>
<td>JS</td>
<td>문서 기능을 부여</td>
</tr>
</tbody>
</table>
border="1"
은 1픽셀 굵기의 선이 나온다는 뜻이다.thead
는 테이블의 헤더이다.tbody
는 테이블의 내용이다.tr
은 한 줄이다.td
사이에 내용을 넣는다.사용자가 직접 입력을 할 수 있는 칸을 만든다.
<h2>질문하기</h2>
작성자 : <input type="text" />
질문 내용 : <textarea></textarea>
<input type="">
text
: 한 줄의 글
date
: 날짜
checkbox
: 체크박스
radio
: 라디오박스
textarea
는 enter
키도 사용하여 여러 줄을 입력할 수 있다.
div
태그블럭을 나눌 수 있다.
<h2>사용해본 것들은?</h2>
<div><input type="checkbox"><label>C언어</label></div>
<div><input type="checkbox"><label>Java</label></div>
<div><input type="checkbox"><label>HTML/CSS</label></div>
<div><input type="checkbox"><label>JS</label></div>
<div><input type="checkbox"><label>SQL</label></div>
div
사용 전
div
사용 후