HTML TAG

<!DOCTYPE html>
<html>
<head>
<meta charset=EUC-KR">
<title>Insert title here</title>
<!-- CSS / JavaScript -->

</head>
<body>
<!-- 
	화면출력 부분 ==> HTML : <> 태그+속성
	<문자 관련>
	<목록>
	<입력>
	<이동>
 -->

</body>
</html>

태그의 역할

  • <DOCTYPE>
    • HTML 시작 : 브라우저
    • 버전에 맞게 해석해서 사용할 수 있게 알려줌

  • <HTML> : 문서의 시작점(생략가능)

  • <head> : 문서의 정보

  • <meta> : 문서정보(EX.한국어)

  • <title> : 제목, 생략가능

  • <body> : 화면에 출력될 내용

태그의 종류

  • <> : 여는 태그
    • <div> , <table>
  • </> : 닫는 태그
    • </div> , </table>
  • </> : 단독 태그
    • <br/> , <img src="" width="" height=""/>, <input/>
    • 태그와 속성
    • 형식 : <태그 속성="" 명="값">
      • 속성의 값을 쓸때, " "를 써도 되고 안써도 됨
      • 속성의 값에 띄어쓰기로 이루어져 있으면 반드시 " "로 묶어줘야함
    • 닫는 태그가 없음(닫지 않아도 됨)

태그의 형태

  • block : 밑으로 붙여나가는 형식 style="display : block;"
  • inline : 옆으로 붙여나가는 형식 style="display : inline;"

HTML 에서 지원하는 태그

문자관련

  1. 제목을 출력하는 태그 : <h1> ~ <h6>
    • 숫자가 작을수록 글씨가 커짐
    • block 형식
  2. 단락을 나누는 태그 : <p>
태국에서 충격적인 납치사건이 발생하고 마지막 청부살인 미션을 끝낸 암살자 인남(황정민)은 그것이 자신과 관계된 것임을 알게 된다.

인남은 곧바로 태국으로 향하고, 조력자 유이(박정민)를 만나 사건을 쫓기 시작한다. 한편, 자신의 형제가 인남에게 암살당한 것을 알게 된 레이(이정재).

무자비한 복수를 계획한 레이는 인남을 추격하기 위해 태국으로 향하는데...
  1. 다음줄에 출력하는 태그 : <br>
태국에서 충격적인 납치사건이 발생하고 마지막 청부살인 미션을 끝낸 암살자 인남(황정민)은 그것이 자신과 관계된 것임을 알게 된다.
인남은 곧바로 태국으로 향하고, 조력자 유이(박정민)를 만나 사건을 쫓기 시작한다. 한편, 자신의 형제가 인남에게 암살당한 것을 알게 된 레이(이정재).
무자비한 복수를 계획한 레이는 인남을 추격하기 위해 태국으로 향하는데...

  1. 수평선을 그려주는 태그 : <hr>

  2. 인용문 첨부 : <blockquote>

  3. 있는 그대로 출력하는 태그 : <pre>
    • 댓글에서 주로 사용함
  4. 강조체 : <strong> 글자가 오는 자리</strong>

  5. 이탤릭체 : <i> 글자가 오는 자리</i>

  6. 강조&이탤릭체 : <em> </em>

  7. 형광밑줄 : <mark> </mark>

  8. 윗첨자, 아랫첨자 : <sup> , <sub>

목록출력

  • ul , li
    • unorder-list
    • 순서없는 목록
    • 메뉴 만들때 주로 사용
<h3>과정</h3>
<ul>
    <li>JSP</li>
    <li>스프링</li>
    <li>코틀린</li>
</ul>
  • ol , li
    • order-list
    • 순서 있는 리스트
<h3>과정2</h3>
<ol>
    <li>JSP</li>
    <li>스프링</li>
    <li>코틀린</li>
</ol>
  • dl , dt , dl
    • description-list
    • 들여쓰기
<dl>
  <dt>감독</dt>
  <dd>감독명></dd>
</dl>

표를 만드는 태그

  • table , tr , td , th
<table>
  <tr> => ROW
    <td> => 실제 데이터</td>
  </tr>
</table>
  • <caption> : 테이블 제목

입력관련 태그

  • <input type="">

1. 입력(한줄) :

  • <input type="text"> : 한줄 문자열 (id , 이름)
  • text (ID,이름..)
  • password (비밀번호 입력창)

  • <input type="password"> : 비밀번호 입력

  • file : 파일 업로드할때 브라우징하는 버튼
  • <input type="file"> : 파일 업로드
  • image : 사진

  • <input type="image"> :

  • email
  • date

  • <input type="date"> : 달력

  • hidden : 감춰두고 실행 (사용자는 못보는데 소스 상에는 존재하는 버튼)
  • <input type="hidden"> : 사용자는 볼 수 없고 데이터만 존재할 때

2. 버튼

  • button : 일반 버튼
  • submit : 전송 버튼 (데이터)
  • reset : 초기화
  • radio
  • checkbox
<!-- name이 같으면 같은 그룹에 묶여서 중복체크 불가해짐 -->
성별:<input type=radio name=sex>남자<input type=radio name=sex>여자<br>
취미:<input type="checkbox">등산<input type="checkbox">개발

3. 여러개 입력

  • textarea

4. 목록

  • select : 콤보박스
  • <select> : 콤보박스
  • <textarea> : 여러줄 문자열 입력

이동관련 태그

  • <a href="이동할 파일명"> : 일반 하이퍼링크
  • <form action="이동할 파일명"> : 데이터 전송과 동시에 이동

기타 태그

  • <img> : 이미지출력
  • <img src="파일 경로명">
  • <div> : 화면 분할 , 카드…. (table보다 시멘틱 언어임) => CSS
  • <span> : 특정 부분만 변경 => CSS