2023. 11. 27. 23:47ㆍDaily Codig Reminder
태그방식: 줄바꿈 기준
1)인라인 방식: 줄안바뀜
2)블럭방식: 자동 줄바뀜
상대경로/ 절대경로
<img src="/01HTML_CSS/images/001.png">
<img src="http://localhost:8085/01HTML_CSS/images/001.png">
5. br 태그
<p> 캅이바라 </p>
<p> 커피바라 </p> <br>
블럭방식
엉 덩이 (이렇게 길게 띄워도 반영안됨 따라서 사용해 한칸더 띄움) 덩이
<br> 띄문 문 <p> 엉덩바라 </p>
6. 텍스트 포맷용
<body> <b>문자열을 진하게</b><br>
<strong> 문자열 강조</strong><br>
<i>문자열을 이탤릭체로</i><br>
HTML5 <sub>아래첨자로</sub><br>
NTML5<sup>위첨자로</sup><br>
<address> 서울시 강남구 역삼동 34-21번지 </address>
<del>2000원</del>1000원<br>
<ins>밑줄 쫘악~~</ins>
<i><b><ins>서울시 강남구 역삼동 34-21번지</ins></b></i><br> </body>
7. a태그 ★★★★★
<a href="target.html" title="target.html 로컬 페이지"> 로컬 페이지 이동</a><br>
- target 속성
- 링크된 문서를 어디에서 실행 시킬지를 지정할 수 있다.
_blank: 새로운 윈도우 창 또는 tab에 문서를 open한다.
_self: default로서 현재 클릭한 창 또는 tab에 문서를 open한다. - <p id="top"> 문서의 위</p>
<a href="#java">자바행 이동</a><br>
<a href="#oracle">오라클행 이동</a><br>
<a href="#bottom">아래로 이동</a><br>
<a id="html">다른행</a>
<p>test</p>
<a id="oracle">여기서부터는 오라클행</a>
<a id="html">다른행</a>
<p>=================================
Oracle<br> </p> <a id="java">여기서부터는 자바행</a>
<p>Java <br></p> <a href="#top">위로 이동</a><br>
<p id="bottom"> 문서의 마지막</p>
<a href="sample06_a3_target.html#java”>sample06_a3_target.html의 java의 id로 이동</a><br>
→ 다른 html의 java 자리로 이동
<a href="../sample06_a3.html#java">sample06_a2.html의 java의 id로 이동</a><br> → 상위 폴더의 html 파일에 이동 <a href="test/target3.html#html">다른 html의 id로 이동</a><br> → test 파일의 html 로 이동
</body> </html>
8. table 태그 ★★★★★
tr: 표 내부 행
th: 표 내부 제목 열
td: 표 내부 일반
<table border ="1">
<tr> <th>1열 제목</th>
<th>2열 제목</th> </tr>
<tr> <td>1행 1열</td>
<td>1행 2열</td>
</tr> <tr> <td>2행 1열</td>
<td>2행 2열</td> </tr>
</table>
→ border 있으면 선있고 없으면 선없
<table border="1"> <tr>
<td> <a href="test/target3.html" target="_blank"> target3 </a> </td> </tr>
<tr> <td><a href="https://www.google.co.kr/">구글 </a></td> </tr>
<tr> <td><a href="https://www.naver.com/"><img src="../images/001.png"></a></td> </tr>
</table>
<table border ='1'> <tr>
<th>이름</th> <th colspan="2">전화번호</th> </tr>
<tr> <td>홍길동</td> <td>55577854</td> <td>55577855</td> </tr> </table><br/>
<table border ='1'> <tr> <th>이름</th> <td>홍길동</td> </tr>
<tr> <th rowspan="2">전화번호</th> <td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
<table border ='1'> <tr> <th>이름</th>
<td>홍길동</td> </tr>
<tr> <th rowspan="2">전화번호</th> <td>55577854</td>
9. 리스트
<ol start="3"> → 3부터 카운
<li>푸바오</li>
<li>카피바라</li>
<ol start="1">
<li>햄스터</li>
<li>거북이</li>
</ol> </ol>
들여쓰기
<dl> <dt>HTM5L이란</dt>
<dd>홈페이지를 만드는..</dd>
<dt>WWW이란</dt>
<dd>world widw web</dd> </dl>
div 태그& span태그 그룹화할 수 있는 태그.
- block level은 브라우저에서 보여질 때 new line를 생성해서 보여준다.
예> <h1><p><ul><table><div>
- inline level은 new line없이 보여준다.
예> <b><td><a><img><span>
<div>
<h1>오만과 편견</h1>
<div> <h2>1권</h2>
<div> <h3>1장</h3>
<p>돈 많은 독신남에게 아내가 필요하다는 것은....</p>
<p>이런 진실은 주변 이웃들의 마음 속에 단단히 박혀...</p>
</div> </div> </div>
<link rel="stylesheet" type="text/css" href="../css/span.css">
11. 폼태그 ★★★★★ ★★★★★
<form>
서버 프로그램파일에 전송할 데이터 기재
</form>
get방식이 기본방식
post는 숨겨서 … password 숨겨
<input type="text" name:"userid" value="abcd"> <br>
value 는 기본적으로 abcd 띄워놓기
-텍스트필드
<form name="myForm" action="test/target.html" method="get">
아이디: <br>
<input type="text" name:"userid" value="abcd" maxlength="4"> <br>
패스워드 입력:<br>
<input type="text" name="passwd"><br>
패스워드 확인:<br>
<input type="password" name="passwd"><br>
-체크박스
<input type="checkbox" name:"fruits" value="apple"> 사과 <br>
<input type="checkbox" name="fruits" value="banana"> 바나나<br>
<input type="checkbox" name="fruits" value="orange">오렌지<br>
<button>전송</button>
<input type="reset" value="초기화">
-라디오버튼
<input type= "radio" name="gender" value="female">남자<br>
<input type= "radio" name="gender" value="male">여자<br>
-select (드롭다운)
<select name="cars">
<option value="volvo">볼보</option>
<option value="saab">사브</option>
<option value="fiat">피아트</option>
<option value="audi" selected="selected">아우디</option> </select>
-textarea
<textarea name="message" rows="10" cols="30">여러라인사용가능</textarea>
히든
<!--브라우저에 안보이는 hidden--> <input type="hidden" name="age" value="20">
'Daily Codig Reminder' 카테고리의 다른 글
| CSS+ JAVA (1) | 2023.11.29 |
|---|---|
| CSS (0) | 2023.11.28 |
| html - head (0) | 2023.11.24 |
| 뷰, 시퀀스, 시노님 (1) | 2023.11.23 |
| DDL , 뷰 (0) | 2023.11.22 |