본문 바로가기
SeSAC 클라우드 기반 JAVA 풀스택 웹개발/2. HTML & CSS

[SeSAC] HTML

by Coarti 2024. 10. 16.

HTML

문서와 내용을 구조화하기 위해 사용되는 언어이다.

HTML문서는 클라이언트 요청에 의해 서버에서 제공된다.

브라우저는 문서를 렌더링하여 DOM 트리 생성 후 프린트(출력) 된다.

이 DOM 트리는 JS를 통해 조작이 가능하다.

Tag

HTML 요소의 기능과 역할을 부여한다.

일반적으로 2가지 형태이다.

  • <태그이름 id="유일한이름" class="이름1 이름2 ... 이름N" 속성="값" 속성="값" ... >내용</태그이름>
  • <태그이름 id="유일한이름" class="이름1 이름2 ... 이름N" 속성="값" 속성="값" ... />
  • 닫는 태그와 여는 태그가 존재 할 경우 중첩하여 사용 가능

id

문서 내에서 중복없이 만들어지는 것을 권장한다.

고유한 식별자를 부여하여 페이지 내에서 유일하게 구분하기 위함이다.

class

여러가지 태그에 동일한 스타일을 적용하기 위해 사용된다.

사용방법

  • 여러 태그에 동일한 클래스 적용
  • 동일 태그에 여러 클래스 적용

HTML 문서 구조

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body></body>
</html>

HTML 문서 전체를 감싸는 root 요소이다.

스타일 시트, 스크립트, 메타 데이터 등 문서를 정의하는 정보를 담는다.

메타 데이터(Metadata)는 데이터를 위한 데이터로 어떤 데이터의 설명을 위해 존재한다.
HTML의 메타 데이터는 페이지의 정보를 제공하는 데이터다.

웹 페이지 내용이 작성되며 화면에 출력되는 부분이다.

form, input 태그

HTML는 수많은 태그들이 존재한다.
이 중 가장 중요한 태그가 무엇일까? 데이터를 다루는 태그이다. 우리가 보는 웹 페이지는 목적은 정보와 내용을 얻기 위함이기 때문이다.

<form action="" method="">
  <label for="id">아이디 :</label>
  <input type="text" name="id" id="id">
</form>

 

위 코드를 실행한 결과이다.

form

  • action : 속성을 제거하면 현재 URL에 데이터를 전송한다. 데이터 도착 URL를 작성하면 된다.
  • method : GET, POST 두 종류가 존재하며 기본값은 GET으로 동작하며 데이터가 URL에 출력된다.
    • GET method는 HTTP Method 중에 GET 방식을 사용하기 때문에 body가 존재하지 않는다. 따라서 URL을 통해 값을 전송한다.
    • POST method는 HTTP Method 중에 POST 방식을 사용하여 값을 담을 공간을 가지고 있다.

input

  • type : text, password, submit, button, checkbox, radio, email, file, range, search, tel, image, number, hidden, color, date, time, progress 등 다양하다.
  • name : 데이터가 전송될 때 어떤 이름으로 보낼지 지정한다. 비어있으면 값이 있어도 전송되지 않는다.
  • value : type에 따른 값들이 담긴다.

label

  • 라벨, 레이블 소속에 따라 발음이 달라진다.
  • for : input 태그의 id를 적으면 label 태그로 작성된 내용 클릭 시 연결된 input 태그로 포커싱된다.

예시

코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form>
      <h1>숙소 예약</h1>
      <h2>신상 정보</h2>

      <label for="name">이름 : </label
      ><input type="text" name="name" id="name" placeholder="이름 입력" /><br />
      <label for="email">이메일 : </label
      ><input
        type="email"
        name="email"
        id="email"
        placeholder="이메일 입력"
      /><br />
      <label for="file">예약사 사진 : </label
      ><input type="file" name="file" id="file" /><br />

      <hr />

      <h2>상세 정보</h2>
      <h3>선호 객실 타입</h3>
      <label for="city">도시뷰 : </label
      ><input type="radio" name="room_type" id="city" value="city"/>
      <label for="lake">레이크뷰 : </label
      ><input type="radio" name="room_type" id="lake" value="lake"/>
      <label for="mountain">마운틴뷰 : </label
      ><input type="radio" name="room_type" id="mountain" value="mountain"/>

      <h3>동행자 정보</h3>
      <label for="number">인원수 : </label
      ><input type="number" name="number" id="number" />

      <h3>기타</h3>
      <label for="etc">요청사항 : </label>
      <textarea name="etc" id="etc" cols="30" rows="10">YoYo</textarea>

      <hr />

      <input type="submit" value="전송" />
    </form>
  </body>
</html>

결과

728x90

'SeSAC 클라우드 기반 JAVA 풀스택 웹개발 > 2. HTML & CSS' 카테고리의 다른 글

[SeSAC] CSS(Flex)  (0) 2024.10.21
[SeSAC] CSS(박스 모델, 요소 조정)  (0) 2024.10.16
[SeSAC] CSS(선택자, 속성)  (0) 2024.10.16

관련글

티스토리툴바