본문 바로가기

WEB/HTML, CSS, JS

HTML TAG

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