728x90
반응형
▶ HTML TAG
HTML에서 사용하는 명령어
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>|
태그
|
설명
|
|
<html> ... </html>
|
html 문서의 시작과 끝을 정의
|
|
<title> ... </title>
|
웹 브라우저의 제목 및 스타일 정의
|
|
<head> ... </head>
|
헤더의 시작과 끝을 정의
|
|
<body> ... </body>
|
본문의 시작과 끝을 정의
|
|
<h1> <h2> ... </h100>
|
제목을 정의
|
|
<font> ... </font>
|
글자 속성(크기, 색, 폰트 등)을 지정
|
|
<a> ... </a>
|
하이퍼링크를 걸어줌
|
|
<br>
|
줄 바꿈(개행)
|
|
<img/>
|
그림 파일을 삽입
|
|
<table> ... </table>
|
테이블(표) 생성
|
|
<tr> ... </tr>
|
표의 행을 생성
|
|
<td> ... </td>
|
표의 열을 생성
|
|
<!주석내용> , <!-- 주석내용 -->
|
한줄 주석, 여러 줄 주석
|
(+ 초반에 리눅스에서 html 파일을 코딩하면서 탭을 안 눌러 나중에 코드 수정할 때 헷갈려서 애를 먹은 적이 있다.. visual studio를 쓰다보니 자동적으로 들여쓰기가 되는 것에 너무 편해진 것이 문제다 ㅠㅠ 표를 만드는 경우 tr이나 td를 자주 쓰고 닫아주는 거에서 한 번 꼬이면 표가 망가지기 때문에 실수 하고 나선 꼭 코드 작성하면서 tab을 통해 가독성을 좋게 만들어줬다!)
clospan : 지정한 개수만큼 행을 확장
rowspan : 지정한 개수만큼 열을 확장
▶ iframe
iframe 태그를 통한 html 문서에 다른 html 문서를 삽입하여 보여줄 수 있음
두 개 이상의 iframe 태그를 사용할 때는 닫는 태그 사용
<iframe width="50%" height="50%" src="https://www.naver.com"> </iframe>|
속성
|
설명
|
|
src
|
불러올 페이지의 주소
|
|
width & height
|
너비와 높이 지정
|
|
scrolling
|
스크롤바 사용 여부
|
▶ form
Form 태그를 통해 클라이언트의 정보나 입력을 서버에 전달할 수 있음
<form method="post" action="">
<table border="1" width="200px" height="100px">
<tr>
<td> C </td>
</tr>
<tr>
<td> <input style="border:0" type="text" name="num1"> </td>
<td > <input style="border:0" type="password" name="num2"> </td>
<td> <input type="submit" value="입력"> </td>
</tr>
</form>|
태그
|
설명
|
|
<form> ... </form>
|
데이터를 서버로 전송하기 위한 폼을 전송
|
|
<input ../>
|
사용자의 입력을 받을 수 있는 태그
|
|
<select> ... </select>
|
하나 이상의 선택 목록 양식
|
|
<option> ... </option>
|
select 태그의 하위 태그로 선택지를 구성
|
|
<textarea> ... </textarea>
|
input 태그와 달리 여러 줄의 텍스트를 받을 때 사용
|
▶ DIV
Division의 약자로, 경계 또는 영역을 나누는 태그
하나 이상의 태그를 묶어서 스타일을 지정할 때 사용
주로 CSS와 연동하여 사용
<div style="border:solid 4px #A19CFF; width:400px ; height:250px ; padding:10px;"> </div>|
속성
|
설명
|
|
style
|
스타일 정의
|
|
width
|
가로 크기
|
|
neight
|
세로 크기
|
|
margin
|
외부 공백
|
|
border
|
테두리 설정 (solid, dashed, double, groove 등)
|
▶ SPAN
Div 태그와 마찬가지로 영역을 나눔
특정 구역의 CSS 스타일을 지정할 때 사용
Div 태그와는 다르게 줄바꿈이 없음
<span style="font-size: 15px; font-style: italic ; font-weight: bold; "> </span>|
속성
|
설명
|
|
padding
|
내부 공백
|
▶ 목록
리스트 태그라고 불림, 목록을 정의할 수 있음
<ul>
<h1> 제목 </h1>
<li> web공부 </li>
<li> web2 <li>
</ul>
<ol>
<li> 민영 </li>
<li> 코딩 </li>
</ol>
<dl>
<li> HTML css <li>
</dl>|
태그
|
설명
|
|
<ul> ... </ul>
|
Unorder list, 순서가 필요없는 목록
|
|
<ol> ... </ol>
|
Order list, 순서가 있는 목록
|
|
<dl> ... </dl>
|
Definition list, 용어를 설명하는 목록
|
|
<li> ... </li>
|
ul, ol, dl 태그의 하위 태그, 실제 목록 나열
|
728x90
반응형
'WEB > HTML, CSS, JS' 카테고리의 다른 글
| CSS, JAVA (0) | 2022.12.26 |
|---|---|
| HTTP Method (데이터 전송방식) (0) | 2022.12.05 |
| HTML 용어 이해 (0) | 2022.12.05 |
| Javascript 내장 함수 실습 (0) | 2022.12.04 |
