코딩 공부
<html> 태그 02 본문
*브라우저는 줄 바꿈을 무시합니다.
<title>이건 제목</title>
<meta charset="utf-8">을 쓰면 한글이 안 깨집니다.
이 두 태그들은 <head> 태그 안에 들어갑니다. 이 태그는 브라우저에 나타나지 않는 정보를 포함합니다.
<body>본문</body>
이 태그는 브라우저에 보이는 본문을 나타냅니다.
<body>와 <head> 둘 다 <html> 태그 안에 쓰입니다.
<!DOCTYPE html>어떤 방식의 html로 작성이 됐는지 알려주기 위해 html문서의 가장 상단에 쓰입니다.
<h1>해딩</h1>
웹브라우저에서 '헤딩'이라는 글을 크게 헤딩으로 표현합니다.
<strong>bold</strong>
웹브라우저에서 'bold'를 더 진하게 나타냅니다.
<a href="https://helloworld-ychun0.tistory" target="_blank" title="wow">이건 웹페이지 </a>
'이건 웹페이지'라는 글을 하이퍼링크로 표현하고 클릭했을 때 https://helloworld-ychun0.tistory로 이동합니다.
여기서 href와 target은 a태그의 속성입니다. href는 이동하는 웹사이트를 나타내고, target="_blank"는 새로운 탭에서 해당 웹사이트가 열리게 합니다. title 또한 a태그의 속성이고 커서를 링크 위에 올려놨을 때 나타나는 글입니다.
a태그는 anchor의 약자입니다
List
<ol>
<li>기술소개</li>
<li>기본문법</li>
<li>하이퍼텍스트와 속성</li>
</ol>
<ul>
<li>최진혁</li>
<li>최유빈</li>
</ul>
<ol>은 ordered list고 순서가 있는 리스트라는 뜻입니다.
<ul>은 unordered list고 순서가 없는 리스트라는 뜻입니다.
이 두 태그는 리스트를 하나로 묶기위해사용 됩니다.
<li>는 리스트의 한 항목을 나타냅니다.
Paragrahing
<p>문단</p>
<p>문단2</p>
위 태그는 문단과 문단 사이에 줄 바꿈을 통해 단락을 표현합니다.
<br>은 줄 바꿈을 할 때 사용됩니다.
<p> 태그는 줄 바꿈의 크기가 제한돼있지만 <br> 태그는 여러번 줄바꿈을 할 수 있습니다.
<br>태그는 시각적인 요소를 바꾸지만 <p> 태그는 문단을 나타내기에 정보를 표현하기에는 더 용이합니다.
Image
<img>는 이미지를 포함하기 위한 태그입니다.
<img src="img.jpg" width="200" length="300" alt="mountain" title="mountain">라고 하면 img.jpg라는 이미지를 보여줍니다. width와 length를 사용해서 이미지의 크기를 조절합니다. 하지만 width와 legth를 둘 다 바꾸면 이미지의 원래 비율을 바꾸기 때문에 하나만 사용하는 게 좋습니다. alt란 이미지가 깨졌을 때 나타나는 글입니다.
Table
<table border="2">
<thead>
<tr>
<th>이름</th> <th>성별</th> <th>주소</th> <th>회비</th>
</tr>
</thead>
<tbody>
<tr>
<td>최진혁</td> <td>남</td> <td rowspan="2">청주</td> <td>1000</td>
</tr>
<tr>
<td>최유빈</td> <td>여</td> <td>500</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">합계</td> <td>1500</td>
</tr>
</tfoot>
<td>는 table data의 약자입니다. 하나의 칸 안에 들어가는 내용을 적습니다.
<tr>은 table row의 약자입니다. 한 줄을 묶습니다.
<table>을 사용해야 하나의 테이블에 쓸 수 있습니다. table의 속성인 border는 테이블의 태두리의 두께를 정할 수 있습니다.
<thead>를 사용해서 테이블의 가장 중요한 부분을 표시합니다.
<th>를 사용해서 테이블의 제목을 더 진하게 표시합니다.
<tbody>를 사용해서 테이블의 제목을 제외한 것을 표현합니다.
<tfoot>는 테이블의 마지막 부분을 표시합니다.
<td rowspan="2"> <td>의 속성인 rowspan을 사용해서 두 행을 병합합니다.
<td colspan="3"> <td>의 속성인 colspan을 사용해서 두 칼럼을 병합합니다.
Form: text
<form action="http://localhost/login.php">
<p>아이디 : <input type="text" name="id" value="default value"></p>
<p>비밀번호 : <input type="password" name="pwd"></p>
<p>textarea:
<textarea cols="50" rows="10">default value</textarea>
<p>주소 : <input type="text" name="address"></p>
<input type="submit">
</form>
<input type="text" name="id" value="default value"> 사용자에게 부터 어떤 정보를 입력받을 때 사용합니다. text 속성은 text를 받을 수 있습니다. name속성은 서버로 전송할 때 사용자의 인풋에 이름을 붙여줍니다. value속성은 처음부터 쓰여저있는 값을 나타냅니다.
<input type ="password">를 사용해서 글자 수는 나오게 하고 글자는 나오지 않게 할 수 있습니다.
<intput text ="submit"> 사용자에게로 부터 받은 정보를 서버로 보냅니다. (버튼 생성)
<form action="http://localhost/login.php"> 를 사용해서 어떤 서버로 사용자의 정보를 보낼지 결정합니다.
<textarea cols="50" rows="10"> 여러 줄의 텍스트를 입력 가능하게 합니다. cols는 옆으로 들어가는 글의 양을 결정하고 rows는 줄을 결정합니다.
Form: choice
<select name="color">
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<select name="color">은 사용자의 인풋이 color라는 이름으로 서버로 전송되는 것을 의미합니다.
위 색상은 한 가지 색만 고를 수 있습니다.
<select name="color2" multiple>
<option value="red">붉은색</option>
<option value="black">검은색</option>
<option value="blue">파란색</option>
</select>
<input type="submit">
<select name="color2" multiple>에서 속성인 multiple은 선택지 중 여러 가지를 선택할 수 있게 합니다.
<p>
<h1>색상(단일선택)</h1>
붉은색 : <input type="radio" name="color" value="red">
검은색 : <input type="radio" name="color" value="black" checked>
파란색 : <input type="radio" name="color" value="blue">
</p>
<input type="radio" name="color" value="red"> radio는 <input> 태그의 속성이고 라디오 버튼을 나타냅니다.
라디오 버튼을 여러 개 만들었을 때 여러 개 중 하나만 선택되게 하려면 <input>의 다른 속성인 name을 통일하면 됩니다. 즉 라디오 버튼은 네임 값이 같은 그룹끼리 그루핑이 되고 같은 그룹이 선택되면 다른 선택을 해제합니다.
<p>
<h1>사이즈(다중선택)</h1>
95 : <input type="checkbox" name="size" value="95">
100 : <input type="checkbox" name="size" value="100" checked>
105 : <input type="checkbox" name="size" value="105" checked>
</p>
다중 선택을 하려면 체크박스를 씁니다. 디폴트로 선택되어있는 항목은 checked를 사용합니다.
*단일 선택=라디오 버튼 다중 선택=체크박스
Form: button
<form action="http://localhost/form.php">
<input type="text">
<input type="submit" value="전송">
<input type="button" value="버튼" onclick="alert('hello world')">
<input type="reset">
</form>
<input>의 속성인 type="submit"을 사용하면 사용자의 정보를 서버로 전송하게 됩니다. 하지만 type="button"은 자바스크립트를 사용해서 여러 가지 일을 하게 할 수 있습니다. <input>의 다른 속성인 <input type="reset">을 사용하면 사용자가 입력한 정보가 다 지워집니다.
Form: hidden
<form action="http://localhost/hidden.php">
<input type="text" name="id">
<input type="hidden" name="hide" value="egoing">
<input type="submit">
</form>
사용자 정보를 UI 없이 서버로 전송하려면 hidden이라고 하는 type의 input 태그를 쓰면 됩니다. 예를 들면 비밀번호 같은 개 URL상에 표시가 되면 안 되기 때문에 사용하기도 합니다.
Form: label
<label for="id_txt">text</label>:
<input id="id_txt" type="text" name="id">
이 코드는 'text'가 그 아래 있는 택스트 박스의 레이블이라는 것을 나타냅니다. 그래서 'text'를 클릭해도 바로 택스트 박스를 쓸 수 있습니다. 택스트 박스 외에 체크박스 등에 쓰일 수도 있습니다. 웹사이트의 사용성과 가치를 향상합니다.
Form: method
<form action="https://localhost/method.php" method="get"> 사용자 입력 데이터를 URL로 전송
<form action="https://localhost/method.php" method="post"> 자용자 입력 데이터를 다른 방법으로 숨겨서 전송
form을 이용해서 데이터를 전송한다고 하면 거의 항상 post를 사용합니다.
<form action="http://localhost/upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="profile">
<input type="submit">
</form>
파일 업로드
<form> 태그의 enctype 속성은 "multipart/form-data"여야 합니다. 파일을 전송할 때는 항상 이렇게 씁니다.
<intput> 태그의 속성을 type="file"로 하면 파일을 업로드를 할 수 있습니다.
'web' 카테고리의 다른 글
| <JavaScript> 웹브라우저 제어 / CSS 기초 (0) | 2019.12.09 |
|---|---|
| <JavaScript> 문자열과 숫자 / 변수와 대입 연산자 (0) | 2019.12.09 |
| <JavaScript> html과의 관계 (0) | 2019.12.09 |
| <html> 검색엔진 최적화 03 (0) | 2019.12.06 |
| <html> 개요 01 (0) | 2019.12.06 |