[ HTML ] 실습 및 태그 정리

청년취업사관학교 SeSAC 과정에서 간단한 프론트엔드 페이지를 제작해 보았다.
해당 페이지를 제작하며 사용한 태그 및 속성에 대하여 기록을 해보려 한다.
개념 공부를 한 직후라서 쉽게 만들었지만, 시간이 조금 흐르면 분명 까먹을 것이기에...

해당 페이지의 완성본은 아래와 같다.

숙소 예약하기

<h2>숙소 예약하기</h2>

• 간단하게 <h2> 태그만을 이용하여 서식을 지정하였다.

체크인, 체크아웃

<label for="checkin">체크인:</label>
<input type="date" id="checkin" required /><br />
<label for="checkout">체크아웃:</label>
<input type="date" id="checkout" required /><br />

1. 단순 글씨라서 <p> 태그를 사용해 표현할 수도 있었지만, 글씨를 눌렀을 때 textbox를 활성화 시키기 위해 <label> 태그를 사용하였다.

2. <label> 태그의 for 속성의 내용과 <input> 태그의 id 속성의 값이 같으면 위 1번의 요구사항이 충족된다.

3. required 속성이 붙어 있으면 입력이 강제되는 항목이다.

성인, 어린이

<label for="adult">성인:</label>
<input type="number" min="1" id="adult" value="1" required />
<label for="children">어린이:</label>
<input type="number" min="0" id="children" value="0" required />

• <label> 태그를 사용한 이유는 위의 체크인, 체크아웃 항목과 동일하다.

• <input> 태그에는 number 속성을 이용하여 인원 수를 선택할 수 있도록 하였다.

• <input> 태그의 min 속성을 이용하여 최소 인원의 수를 지정하였다.

min 속성을 사용할 수 있는 <input> 태그의 타입으로는

• number
• date
• range

까지 밖에 아직 모릅니다...

선호객실타입

<input type="radio" id="standard" name="room" />
<label for="standard">스탠다드</label>
<input type="radio" id="deluxe" name="room" />
<label for="deluxe">디럭스</label>
<input type="radio" id="suite" name="room" />
<label for="suite">스위트</label>

• <input> 태그의 타입 중 하나인 radio는 checkbox 타입과 유사하게 사용된다.

• 이런 radio 타입의 특징은 중복 선택이 가능하다는 것이다.

  • 이를 방지하기 위해 <input> 태그의 name 속성을 이용한다.
  • name 속성의 값을 모두 똑같은 값으로 입력하면 중복 선택을 할 수 없다.

요청사항

<label for="require">요청사항</label>
<textarea 
  id="require" 
  placeholder="특별히 요청하고 싶은 내용을 적어주세요"
  rows="10"
  cols="20"
></textarea>

• <textarea> 태그는 메모장과 같은 기능을 제공한다.

• <textarea> 태그의 rows 속성은 텍스트 입력에 대한 행의 최대 길이를 지정한다.

• <textarea> 태그의 cols 속성은 텍스트 입력에 대한 열의 최대 길이를 지정한다.

추가 지식

• <label> 태그 내에 <input> 태그를 삽입할 수 있다.

  • 이러한 방법을 사용하면 <label> 태그의 for 속성과 <input> 태그의 id 속성 간의 연결 없이도 포커싱 기능을 사용할 수 있다.

예시

<label>
  요청사항
  <textarea 
    placeholder="특별히 요청하고 싶은 내용을 적어주세요">
  </textarea>
</label>