TIL54일차

◆ <input> 타입

1. "input type=button"은 클릭했을 때

• JavaScript 함수를 호출하거나, 폼 제출을 막기 위한 용도로 사용됩니다.
• 클릭했을 때 자바스크립트 코드에서 원하는 동작을 수행하게 하려면 이벤트 핸들러를 사용해야 합니다.

2. "input type=submit"은 폼을 제출할 때

• 이 버튼을 클릭하면 폼의 내용이 서버로 전송되어 처리됩니다.
• 이때, "form" 태그의 "action" 속성에 지정된 URL로 이동하거나, "form" 태그의 "onsubmit" 이벤트 핸들러에서 정의한 동작을 수행합니다.

◆ float와 flexbox

• float 속성과 flexbox는 둘 다 CSS를 사용하여 요소들을 배치하는 방법입니다.
• 최근에는 float 속성보다 flexbox를 더 많이 사용하고 있습니다.

1. float
   1) 요소를 왼쪽이나 오른쪽으로 부동시켜서 배치하는 방법입니다.
   2) 주로 이미지나 텍스트를 표시하는데 사용됩니다.
   3) 요소가 다른 요소들을 감싸지 않고 부유하여 배치되므로, 다른 요소들이 이를 인지하지 못하고 배치되는 경우가 발생할 수 있습니다.
   4) 요소들이 가변적인 크기를 가질 때 배치가 어렵거나 복잡해질 수 있습니다.
   5) 주로 이미지나 텍스트와 같은 정적인 요소들을 배치할 때 사용합니다.

2. flexbox
   1) 요소를 행(row)이나 열(column)로 배치하는 방법입니다.
   2) 요소들을 감싸는 컨테이너와 그 안에 포함된 아이템으로 구성됩니다.
   3) 컨테이너에 display:flex 속성을 지정하면, 자식 아이템들을 유연하게 배치할 수 있습니다.
   4)justify-content : 아이템들의 가로 정렬5) align-items : 아이템들의 세로 정렬또한, 6) 화면 크기에 따라 요소들이 자동으로 배치되도록 만들 수 있습니다.
   7) 동적인 요소들을 유연하게 배치할 때 사용됩니다.

◆ html 태그

1. <input> 태그
   1) 사용자로부터 데이터를 입력 받는 태그이다.
   2) type 속성을 이용하여 입력 방식을 지정할 수 있다.​
   3) ex) type="text" 텍스트 입력, type="password" 비밀번호 입력, type="checkbox" 체크박스 입력

2. <textarea> 태그
   1) 여러 줄의 텍스트를 입력 받는 태그이다.
   2) 태그와 달리, 텍스트 영역의 크기를 지정할 수 있다.
   3) rows와 cols 속성을 이용하여 지정할 수 있습니다.

3. <button> 태그
   1) 버튼을 생성하는 태그이다.
   2) type 속성을 이용하여 타입을 지정할 수 있다.
   3) ex) type="submit"은 폼을 제출하는 버튼, type="reset"은 입력 내용을 초기화하는 버튼, type="button"은 기능이 지정되지 않은 일반 버튼
   

4. <select> 태그
   1) 여러 개의 선택지를 제공하여 하나를 선택하는 드롭다운 메뉴를 생성하는 태그입니다.
   2) <option> 태그를 이용하여 각 선택지를 정의합니다.
   3) selected 속성을 이용하여 기본 선택값을 지정할 수 있습니다.
   

5. 태그
   1) 입력 요소와 해당 요소에 대한 설명을 제공하는 데 사용되는 태그입니다.
   2) for 속성을 이용하여 입력 요소의 id 값을 지정하여 두 요소를 연결할 수 있습니다.

◆ 선택자

1. class 선택자
   1) .multi-line-control: 클래스 속성 값이 multi-line-control으로 지정된 요소를 선택한다.
   2) 이때 선택하려는 속성 값 앞에 마침표를 추가해서 작성한다.
   3) 한 페이지 내에서 여러 번 반복이 필요할 경우 사용한다.
   4) 속성 값을 두 개 이상 가질 수 있어서 한 태그 내에서도 여러 종류의 스타일 규칙을 적용할 수 있다.
   5) 글자색이나 글자 굵기 등 나중에 다른 곳에서도 적용할 수 있는 스타일을 지정한다.

2. id 선택자
   1) #content-input: id 속성 값이 "content-input"인 요소를 선택합니다.
   2) 이때 선택하려는 속성 값 앞에 #을 추가해서 작성한다.
   3) 한 페이지 내에서 유일하게 한 번 적용할 경우 사용한다.
   4) 웹 문서 안에서 요소의 배치 방법을 지정할 때 사용한다.
   5) ID선택자의 우선순위가 클래스 선택자의 우선 순위보다 높다.

3. 속성 선택자
   1) textarea[name="content"]: 속성 선택자를 이용하여 name 속성이 "content"인 <textarea> 요소를 선택한다.
   2) 태그 안의 특정 속성 값의 조건에 따라 다양한 스타일을 지정할 수 있다.