html 태그 정리

<br> 사용법 및 설명

글자를 쓰고 엔터를 치는 효과가 있다. 

 

사용방법 

예시 ) 안녕하세요 <br> 안녕하세요 라고 적는다면

결과 )

안녕하세요 

안녕하세요

 

예시 ) 반갑습니다. <br> 반가워요.<br> - <br>  반갑습니다.
결과 )

반갑습니다. 

반가워요.

-

 

반갑습니다.

 

이렇게 나옵니다.

---

<h1> 사용법 및 설명

페이지의 타이틀 글자크기 굵은 글자, 자동 줄바꿈 기능이 있다.

h1에서 h6까지 있으며, h1이 가장 큰 글자 이다. 숫자가 높아 질수록 글자가 작아진다. 

h1

h2

h3

h4

h5

h6

 

 

사용방법

<h1>h1의 제목 굵은 글자 자동 줄바꿈 </h1>

결과)

h1의 제목 굵은 글자 자동 줄바꿈

<h2>h2의 제목 굵은 글자 자동 줄바꿈 </h2>

결과)

h2의 제목 굵은 글자 자동 줄바꿈

---

<div> 내용을 하나로 묶을 때 사용 한다.

Division 의 약자이다. 영어 뜻은 나눔, 분할, 구분, 분배 등이다.

<div> 내용 내용 내용 내용 </div>

이렇게 사용하면 내용 내용 내용 내용 이후 줄 바꿈이 된다.

<div> style 사용 방법 

색상 변경

<div style="background-color:red">영역1번</div>

영역1번

<div style="background-color:green">영역2번</div>

영역2번

영역 가로 세로 설정 방법

<div style="width:100px; height:100px; background-color:green"> 영역 2번 </div>

---

<p> 는 하나의 문단을 만들때 사용한다.

 

결과 )

웹 개발 기초

 

HTML

CSS

자바스크립트

---

<b> 글자의 굵게 표시 할 때 사용 한다.

<i> 글자를 기울게 할 때 사용 한다.

<a> 하이퍼링크를 걸어줄때 사용 한다.

 <a href="https://www.google.co.kr/">구글 로 갑시다</a>

<img> 이미지를 넣을 때 사용 한다.

<table> 표를 만들때 사용 한다. 

<tr> 행을 만들때 사용한다.

<td> 열을 만들때 사용 한다. 

tr을 추가 할때 마다 밑으로 칸이 생긴다고 생각 하면 된다. 

td를 추가 할때 마다 옆으로 칸이 생긴다고 생각 하면 된다. 

tr 안에 td를 만든다면 

밑으로 칸이 하나 생기고, td를 만든 숫자 만큼 옆으로 칸이 만들어 진다고 생각 하면 된다.

<tr> <td>1</td> <td>2</td> <td> 3</td> </tr> 이렇게 사용 한다면

결과)

밑으로 하나 그옆으로 3개

1

2

3

<tr> 1 <td>2</td> <td> 3</td> </tr> <tr> 4 <td>5</td> <td> 6</td> </tr> 이렇게 사용 한다면

결과)

밑으로 하나 그옆으로 3개, 이후 밑으로 하나 그 옆으로 3개의 칸이 만들어 진다.

1	2	3
4	5	6

<span> div 이랑 다르게 줄 바꿈 기능은 없다.

<il> list의 약자이다. 목록을 만들때 사용 한다. 

<ol>
<li>목록1</li>
<li>목록2</li>
</ol>

<ol> 번호 대로 적어준다.
<ul> 순서에 상관 없이 모양으로 목록을 적어준다.

---

<form> 은 입력 양식을 의미 하며, 웹페이지에서 많이 사용 한다. 다른 페이지로 값을 보낼때 주로 사용 한다.
주로 회원가입 로그인 할 때 사용 한다.

<form> 사용 방법

결과)

<form> 

<input type="text" name="name" value="아이디 입력">

<input type="password" name="password" value="비밀번호 입력">

<input type="radio" name="gender" value="M">남자
<input type="radio" name="gender" value="F">여자

남자

여자

<input type="checkbox" name="part" value="eng">영어
<input type="checkbox" name="part" value="math">국어

영어

국어

<input type="submit" value="제출">

</form>

 

제출을 누르면 다른 페이지로 내용이 전달 된다.

 

---

select, option
<select> 및 <option>은 리스트를 밑으로 보여주는 옵션이다. 드롭다운 이라고도 한다. 

<select> 사용 방법 

 

<select>
<option value="집">집</option>
<option value="빌딩">빌딩</option>
<option value="아파트">아파트</option>
</select>