HTML < pre > 태그
정의 및 특징
< pre > 태그는 미리 정의된 형식(preformatted)의 텍스트를 정의할 때 사용합니다.
< pre> 요소 내의 텍스트는 시스템에서 미리 지정된 고정폭 글꼴(fixed-width font)을 사용하여 표현되며, 텍스트에 사용된 여백과 줄바꿈이 모두 그대로 브라우저 화면에 나타납니다.
이러한 < pre> 요소를 사용하면, 독특한 서식의 텍스트나 컴퓨터 코드 등을 HTML 문서에 그대로 표현할 수 있습니다.
style
- background-color
- color
- font-family
- font-size
- text-align
Formatting
• < b> - Bold text
• < strong> - Important text
• < i> - Italic text
• < em> - Emphasized text
• < mark> - Marked text : 노란 형관펜 효과
• < small> - Smaller text
• < del> - Deleted text
• < ins> - Inserted text
• < sub> - Subscript text : 살짝 밑으로 내려감
• < sup> - Superscript text
주석
< !-- -- >
Links
```
<a href="url" target="_self" > link text </a>
```- href : 절대 경로, 상대 경로 모두 가능
• The target attribute can have one of the following values:
• _self - Default. Opens the document in the same window/tab as i t was clicked
• _blank - Opens the document in a new window or tab
• _parent - Opens the document in the parent frame
• _top - Opens the document in the full body of the window
* href로 메일 속성 지정 : href="mailto:sample@gmail.com"Image
* href : 절대 경로, 상대 경로 모두 가능
* alt : 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시합니다.Table
- < table> 테이블을 만드는 태그
- < th> 테이블의 헤더부분을 만드는 태그
- < tr> 테이블의 행을 만드는 태그
- < td> 테이블의 열을 만드는 태그
<table border="1"> <tr> <th colspan="2">Person 1</th> <th>Person 1</th> <th rowspan="2">Person 1</th> </tr> <tr> <td>뭐지</td> <td>뭐지</td> <td>뭐지</td> </tr> </table>List
-
ul
-
ol
-
li
-
dl : description list
-
dt : define term in a description list
-
dd : describes term in a description list
<dl> <dt>Coffe</dt> <dd>- 커피입니다</dd> <dt>Milf</dt> <dd>- 우유 입니다.</dd> </dl>
-
Iframe
- src : iframe안에 나타낼 요소 (다른 웹 페이지 url 등)
- title : 항상 포함
- height, width
<iframe
src="index.html"
height="200"
width="300"
title="Iframe example"
style="border: solid 1px red"
target="_blank"
>
ddd
</iframe>
Head
* title 태그
* meta 태그Forms
input의 type들
* text
* radio
* checkbox
* submit
* button More input 태그 타입들
- Password (비밀번호 입력박스)
: 입력내용이 * 표시됨, value 사용불가
<input type="password" name=“비밀번호" size="5" maxlength="20 ">- Search (검색입력박스)
: X 표시가 있어 검색어 삭제가능
<input type="search" name=＂검색" size="5" maxlength="20">- URL/email (주소, 이메일입력박스)
: 입력값 유효한지 자동체크
<input type='url' name='주소' size='30' maxlength='100'>- 숫자와 관련된 input
<input type="number" min="0" max="10" value="1">
<input type="range" min="0" max="10" value="0">- 날짜와 관련있는 input
<input type="date"> - reset
<input type="reset" value="다시 입력"> - file 첨부
<input type="file"> - Hidden (보여지지 않게 서버에 넘겨지는 값)
<input type="hidden" name="my-hidden" value="서버로 전송할 값">input 태그의 유용한 속성
* placeholder
* required
* readonly 다양한 form 요소들
* Select 드롭 다운 메뉴 <label for="select-food">음식</label>
<select id="select-food">
<option value="apple">사과</option>
<option value="grape">포도</option>
<option value="peach">복숭아</option>
<option value="strawberry">딸기</option>
<option value="watermelon" selected>수박</option>
</select>- textarea : 여러줄 텍스트 입력
<textarea name="my-textarea" cols="10" rows="50"></textarea>- Progress bar : 진행 상황 표시
<label>진행 상황: <progress value="55" max="100"></progress></label>### Video & Audio ```
<audio controls>
<!-- <source src="horse.ogg" type="audio/ogg"> -->
<source src="music.mp3" type="audio/mpeg" autoplay />
</audio>
<audio src="music.mp3" controls autoplay></audio>
### Media : Plug-ins
form 태그의 action & method
Form 태그: 사용자 데이터를 입력 받아 저장, 검색, 업데이트 등 서 버에서 처리됨
< form action=＂data_process.php" method="post">
<input type="text" title="입력" name="input" />
<input type="submit" value="입력" />
</form >
1. method: 서버에 사용자 입력정보를 넘길때 “post”, “get” 방식이 있음 * get: 입력정보가 주소(i.e., url bar)에 나타나고 4096byte까지만 전송가능 * post: 입력정보가 드러나지 않고 사이즈 제한도 없음 2. action: 사용자 입력정보를 서버에서 처리할 주체
시맨틱 태그 예시
- header
- nav
- article
- section
- aside
- footer
