이번 수업에서는 html 나머지 부분을 배웠고 css도 조금 진도를 나갔다.
사용자 입력 form 태그 & input 태그
form 태그
form 태그는 사용자로부터 입력받는 요소들을 감싸는 태그이다. 화면에 드러나지 않는 추상적 태그이다. 사용자가 폼에 데이터를 입력하고 제출 버튼을 누르면, 서버라는 컴퓨터에게 데이터가 넘어간다. 예를 들어, 로그인 시 아이디와 비밀번호를 입력하고 버튼을 누르면, 서버는 데이터베이스에서 해당 아이디와 비밀번호를 찾아 로그인 성공 혹은 실패를 처리해준다.
action과 method 속성은 서버와 연관되어 있어 서버 없이는 사용할 수 없다.
- action 속성: 사용자가 폼에 입력한 값을 전달할 주소
- method 속성: 사용자가 폼에 입력한 값을 전달할 방법
<form action="" method="">form 요소
form 태그 안에는 사용자의 입력값을 받는 요소들이 있다. input, textarea, select 등 다양한 태그들이 있으며, 이들은 name 속성을 가질 수 있다. 이 name 속성은 서버와 연관되어 있다. 서버를 위해 인풋창의 이름을 알려주는 역할을 하기 때문이다.
input 태그
- disabled 속성: 편집을 불가능하도록 막는다. 백엔드에서도 막아줘야 한다.
- placeholder 속성: 미리보기 텍스트(안내문구)
Text<input type="text" name=""><br>
Text2<input type="text" name="" disabled><br>label 태그
label 태그의 for 속성값과 input 태그의 id 속성값을 일치시키면, label 글씨를 클릭했을 때 input 창에 포커싱 된다. 사용자가 편리하게 사용할 수 있어 웹 접근성에 적합하다.
Radio, Checkbox input
radio,checkbox에서name은 카테고리화 해주는 역할이다.- 같은
name속성값을 부여해서 “카테고리”화 해야 한다.
<h5>당신의 취미는 무엇인가요?</h5>
<input type="checkbox" name="interest" id="" value="basketball" checked>농구
<input type="checkbox" name="interest" id="" value="movie">영화
<input type="checkbox" name="interest" id="" value="lay-down">누워있기여기서 checked 속성은 해당 옵션이 기본으로 체크되어 있도록 해준다. checkbox와 달리 단일 값을 고를 수 있게 하려면 radio로 만들어야 한다.
textarea 태그
textarea 태그는 input보다 더 많은 양의 내용(여러 줄)을 입력받을 수 있는 요소이다.
cols,rows: 가로, 세로 길이를 나타냄- 유저가 마우스 커서를 이용해 우측 하단을 조절하면 크기 변경 가능
<textarea name="" id="" placeholder="문의 사항을 입력해주세요" cols="30" rows="10"></textarea><br>select 태그
select 태그는 선택 메뉴(드롭 다운)를 만드는 태그이다.
<select name="">
<option value="">옵션1</option>
<option value="">옵션2</option>
</select>button 태그
버튼은 두가지 가 있다
- 단순 버튼: 클릭 가능한 버튼
- 제출 버튼:
폼을 제출하는 버튼
<!-- i) 단순 버튼: 클릭 가능한 버튼 -->
<input type="button" value="단순 버튼1">
<button type="button">단순 버튼2</button>
<br>
<!-- ii) 제출 버튼: "폼"을 제출하는 버튼 -->
<input type="submit" value="제출 버튼1">
<button type="submit">제출 버튼2</button>table 태그
표를 만들 때 사용하는 태그이다. 먼저 행을 쓰고 행의 자식 요소로 칸을 넣어주는 것이 기본이다!
<table>
<tr>
<th>제목1</th>
<th>제목2</th>
</tr>
<tr>
<td>내용1</td>
<td>내용2</td>
</tr>
</table>표를 감싸는 태그
<table>
표 내부의 행(가로)
<tr>
행 내부의 제목 칸 (bold체)
<th>
행 내부의 일반 칸
<td>
속성
border: 표의 테두리를 설정cellspacing: 셀(칸) 사이의 간격을 설정cellpadding: 셀(칸)의 내부 여백을 설정align: 표의 가로 정렬을 설정width: 표의 너비를 설정height: 표의 높이를 설정bgcolor: 표의 배경색을 설정
HTML5 시맨틱 태그
HTML 요소는 시맨틱하게 작성되어야 한다. 의미 있는 태그를 적절하게 활용하여 구조를 작성하면 유지보수성이 높아지고, SEO(검색 최적화)에도 유리하다.
header: 헤더, 로고, 메뉴 아이템 등을 담는 태그footer: 푸터를 나타내는 태그aside: 사이드바를 표현하는 태그article: 독립적인 콘텐츠 블록을 나타내는 태그section: 섹션을 나타내는 태그nav: 네비게이션(다른 곳으로 이동 가능한 링크들)을 담는 태그
CSS(Cascading Style Sheets)
CSS는 HTML 요소의 스타일을 정의하는 데 사용된다.
인라인 방식
- 재사용이 불가능하다
- 같은 스타일을 가진 태그를 사용하려고 해도 코드 복붙이 필요하다.
<h1 style="color:blue">CSS 사용법을 익혀봅시다!</h1>
<h2 style="font-size: larger">Hello world!</h2>내장 방식
- style 태그 이용
- 다른 html 파일에 쓰려면 이것도 불편하다. 유지보수가 어려움.
<style>
ul {
background-color: aqua;
}
h1, h2 {
color: pink;
}
div {
height: 100px;
}
</style>링크 방식
- 모든 스타일을 하나의 CSS 파일에 넣고 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식이다.
- 재사용도 가능하고 스타일 변경도 발생해도 편함
<link rel="stylesheet" href="./index.css">느낀점
html form에 대해 알고 있다고 생각했는데 다시 공부해보니 대충 이해하고 넘어간 부분도 있다는 걸 깨달았다. 이렇게 수업 들으면서 구멍난 부분을 채워나갈 수 있어서 좋다!
