hover
.top-left span:nth-of-type(1):hover{
color : red;
}⇨ class = "top-left" 의 자식 요소 중
⇨ nth-of-type(1) 첫번째 자식에게
⇨ hover 이벤트를 만든다.
bootstrap-icon
form
action="./result.html"
form 태그는 type="submit"을 가진 input 태그를 통해 정보를 제출했을 때 어디로 요청을 보낼 건지를 표현.
method="get"
form 태그를 제출할 때 어떤 형식으로 보낼건지.
method
get : url, ?, &, name=사용자가 입력한 값
사용자가 입력한 정보를 url에 담아 전송
정보는 ?와 &으로 구분
post : url에 보내지 않음.
서버에 연결해 정보를 받아오는 것.input
type 과 name을 필수로 받음.
name 은 페이지가 전송하는 정보에 따라 필요 없을 수도 있으나, input 태그 자체가 정보를 전달하고 정보에 대한 구분자(name)까지 포함된 태그이므로 필요하다고 보는 것이 옳다.
value 속성을 사용해 사용자가 입력한 값을 저장한다.
placeholder 사용자의 행동을 유도하는 문구를 작성해둘 수 있다.
type
text : 일반 텍스트
password : 점점으로 표현됨
email : @가 포함된 이메일 형식인지 확인
submit : input이지만 button 형식으로 표현됨.
이때는 value에 값을 넣어 글자를 쓸 수 있다. 
<input type="submit" value="로그인">
> result.html로 제출
<input type="button" value="로그인">
> 버튼을 눌러도 반응 없음
<button type="submit">로그인</button>
> result.html로 제출
<button >로그인</button>
> result.html로 제출
Q. input 과 button 으로 submit 하는데 차이가 무엇이 있는가?
별 차이 없다.
select
미리 사용자에게 선택지를 주고
사용자가 선택한 선택지를 전송할 수 있다.
< option > 와 함께 사용된다.
<form action="./result.html" method="get">
<select name="color" id="">
<option value="red">red</option>
<option value="blue">blue</option>
<option value="green">green</option>
</select>
<input type="submit" value="제 출">
</form>
multiple 속성을 사용하면 ctrl을 누른채로 마우스로 다중 선택이 가능하다.
그러나 이는 직관적인 설명이 되지 않는다.
radio는 동일한 name 그룹 내에서 하나만 선택 할 수 있다.
label
-
label로 input을 감싼다.
-
label 속성의 for과 연결하려는 input의 name을 동일하게 지정하여 연결한다.
-
1번의 경우 label(상의)을 누르면 chekcbox가 활성화되지만, 2번은 정확히 checkbox를 눌러야 한다.
textarea
input과 동일하게 '제출'이 됐을 때
'name'을 통해 사용자가 입력한 값을 받을 수 있고
id를 부여하여 label과 연결할 수 있다.
cols 가로에 받을 수 있는 글자 수
rows 몇 줄 받을 건지
보통은 text area는 마우스로 영역 크기를 변경할 수 있다.
width나 height를 직접 줄 수도 있고
resize : none; 을 통해서 리사이즈를 막을 수도 있다.
Q. 왜 hidden을 써서 검색시 쿼리를 구분하는가?
사용자 경험을 확인하기 위해서가 아닐까
button ☆☆
<input type="button" value="버튼">
<button>버튼</button> input 버튼은 value를 통해서만 버튼명을 설정할 수 있고, 텍스트만 가능하다.
하지만 button 태그를 이용하면 텍스트도 가능하고, button 태그 안에 다른 태그를 넣을 수 있기 때문에 이미지를 넣어 버튼으로 만들 수도 있다.
<button>
<img src="경로">
</button>그러나 보통 이미지 보다는 svg(벡터)를 많이 넣는다.
head
1.css 파일들 <link>
2.style
3.title
4.meta tag
5.favicon : ico(png,jpg도 가능)
⇨브라우저별로 다르게 보이기 때문에 '파비콘제너레이터'를 사용해 설정을 한번에 만들 수 있다.
<link rel="icon" type="image/x-icon" href="경로">