[새싹 프론트엔드] 221025 TIL - HTML(3) 목록&폼 태그

뒹귤·2022년 10월 29일

html 새싹 프론트엔드

새싹 프론트엔드

목록 보기

7/41

오늘은 HTML5의 목록 태그를 배웠다.

목록 태그(List)

리스트 종류

순서 있는 리스트(ordered list) <ol></ol>
- <ol type=””> 으로 글머리 기호를 변경할 수 있다.
순서 없는 리스트(unordered list) <ul></ul>
정의 리스트(definition list) <dl></dl>
- 용어는 <dt>, 설명은 <dd>로 표현
```
<dl>
	<dt>용어</dt>
	<dd>설명</dd>
</dl>
```

리스트 꾸미기

리스트를 꾸미는 CSS 속성

속성 설명
list-style-type 아이템 마커 타입 지정
list-style-image 아이템 마커 이미지 지정
list-style-position 아이템 마커의 출력 위치 지정
list-style 단축 속성
list-style-type
- 마커의 종류를 지정할 수 있음
- 디폴트 값은 disc이며 circle, square, none, upper-roman, lower-alpha, decimal 등의 속성값을 지정할 수 있음

속성	설명
list-style-type	아이템 마커 타입 지정
list-style-image	아이템 마커 이미지 지정
list-style-position	아이템 마커의 출력 위치 지정
list-style	단축 속성

웹 사이트의 메뉴
주로 HTML의 링크 태그 <a> 를 사용하여 생성

수직 메뉴

/* css */
ul{ list-style-type: none; margin: 0; padding: 0; }
li{ baground: pink; width: 150px; }
li a{ color: black; text-decoration: none; }

<!-- html -->
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">자바스크립트</a></li>
</ul>

👉 결과

수평 메뉴 만드는 방법
- <li> 태그의 display 속성 값을 inline 으로 설정
  li{ display : inline; }
- float 속성 이용
  li { float : left; } // 모든 메뉴 왼쪽 정렬
  
  📍 float 속성으로 수평 메뉴 만들 때 주의사항
  - block 요소인 <li> 태그에 float 속성을 적용하면 <ul> 태그 영역에서 벗어나게 됨 → <ul> 태그 영역이 제대로 인식되지 않는 문제 발생
  - <ul> 태그에 overflow : hidden;을 적용해서 영역 확보

/* css */
ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
	baground: pink;
	overflow : hidden;
}

li{ 
	float: left;
	width: 150px;
}
li a{
	color: black;
	text-decoration: none;
}

<!-- html -->
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">자바스크립트</a></li>
</ul>

👉 결과

폼 태그(form)

폼 작성

폼 태그 <form> 태그 사이에 여러 폼 요소를 넣는다.
<form [속성=”속성값”]> 여러 폼 요소 </form>

<form name="fo " 웹서버 URL” method="get">
	...
</form>

name 속성
- 폼의 이름 지정
action 속성
- submit 버튼이 눌리면 폼 태그 안의 내용을 처리해 줄 서버 프로그램 지정
method 속성
- 폼 데이터를 웹 서버로 전송하는 형식
- get : 주소창에 사용자가 입력한 내용이 보임
- post : 주소창에 사용자가 입력한 내용이 보이지 않음 → 보안이나 데이터 양이 클 때 사용

[실습] 로그인 폼 만들기

✍️ 코드

<form name="fo" method="get">
  사용자 ID : <input type="text" size="15" value="" /><br />
  비밀 번호 : <input type="password" size="15" value="" />
  <input type="submit" value="완료" />
</form>

👉 결과

[실습] 폼 전송 과정 네이버 검색 사례로 이해하기

네이버 검색 서버 주소
https://search.naver.com/search.naver?query=css
검색어 → 키워드(query) = 검색어(css)
query = css

<form
  name="sform"
  action="https://search.naver.com/search.naver"
  method="get"
>
  <input type="text" name="query" />
  <input type="submit" value="검색" />
</form>

폼 전송 과정

폼 요소의 종류

https://www.w3schools.com/html/html_forms.asp
☝️ HTML 폼 요소의 종류는 정말 많다 ..

텍스트 입력

<input type=”text”> : 한줄 입력 창

<input type=”password”> : 암호 입력 창

<input type="text|password"
				name="요소이름"
				maxlength="문자개수" <!-- 입력할 수 있는 문자의 최대 개수 -->
				size="문자개수"      <!-- 입력 창의 크기. 단위는 문자 개수 -->
				value="초기텍스트">

<textarea> : 여러 줄 입력 창

<textarea cols="열 개수"
					rows="행 개수"
					name="요소이름"
					wrap="OFF|HARD|SOFT">  <!-- 자동 줄바꿈 처리 지정 -->
					초기 출력될 텍스트
</textarea>

👉 입력창을 비활성화 시키는 속성으로 disabled readonly 가 있는데, 차이점은 서버로 값을 보낼 때 disabled 의 값은 전송되지 않음

버튼 만들기
- 단순 버튼 <input type=”botton”> <button> 태그
  - 아무 기능이 없는 버튼
- submit 버튼 <input type=”submit”>
  - 클릭하면 브라우저가 폼 데이터를 웹 서버로 전송
- reset 버튼 <input type=”reset”>
  - 폼에 입력된 내용을 모두 지우고 초기화
- 이미지 버튼 <input type=”image”>
  - 기본적으로 submit 기능을 가짐
  - 따라서 이미지 버튼을 만들 때는 <button> 태그로 만드는 것이 적합
체크박스 <input type=”checkbox”>
- velue는 서버로 전송되는 값
- checked 속성은 체크가 된 것을 의미
라디오버튼 <input type=”radio”>
- name 값이 같은 라디오버튼 중 하나만 선택 가능

<input type="checkbox|radio"
	   name="요소이름"
	   value="요소값" <!-- 폼 요소가 선태된 상태일 때, 서버에 전송되는 값 -->
	   checked>      <!-- 초기에 선택 상태로 출력 -->

콤보 박스 <select>
- 드롭다운 리스트에 목록 출력
- 목록을 선택하는 입력 방식
- <option> 태그로 항목 표현

[실습] 콤보박스 만들기

✍️ 코드

<form>
  <select name="china">
    <option value="1">짜장면</option>
    <option value="2" selected>짬뽕</option>
    <option value="3">탕수육</option>
  </select>
</form>

👉 결과

<label> : 폼 요소의 캡션
- 캡션이란?
- <label> 태그로 캡션과 폼 요소를 한 단위로 묶음
  👉 캡션만 눌러도 폼 요소에 포커스가 감

<fieldset> , <legend>

- `<fieldset>` 태그는 `<form>` 요소에서 연관된 요소들을 하나의 그룹으로 묶을 때 사용
- `<legend>` 태그로 `<fieldset>` 요소의 캡션(caption)을 정의할 수 있음

폼 꾸미기

CSS 셀렉터 input[type=text] 로 폼을 꾸며준다.

[실습] 스타일로 폼 꾸미기

✍️ 코드

/* css */
form {
  background-color: lightyellow;
  padding: 20px;
  overflow: hidden;
  text-transform: capitalize;
}

input[type="text"],
input[type="email"],
textarea {
  margin: 10px;
}

input[type="text"]:focus,
input[type="email"]:focus {
  font-size: 120%;
}

input:hover,
textarea:hover {
  background-color: lightblue;
}

label {
  display: block;
  padding: 12px;
}

<!-- html -->
<form>
  <div class="div1">
    <label>
      <span>name</span>
      <input type="text" placeholder="name" />
    </label>

    <label>
      <span>email</span>
      <input type="email" placeholder="mail@naver.com" />
    </label>

    <label>
      <span>comment</span>
      <textarea
        name="comment"
        cols="30"
        rows="10"
        placeholder="메시지를 남겨주세요"
      ></textarea>
    </label>

    <div class="div2">
      <input type="submit" value="submit" />
    </div>
  </div>
</form>