5. HTML/CSS(form과 table)

■ form

form과 input 태그

<form>
  <input>
</form>

<input type="text">
<input type="email">
<input type="password">
<input type="radio">
<input type="file">
<input type="checkbox">
<input type="submit">
<select>
  <option>옵션1</option>
</select>
<textarea></textarea>

input 태그에는 다양한 종류가 있으니 필요할 때 찾아서 쓸 수 있어야 합니다.

 

 

input의 속성

<input placeholder="배경 글자" value="미리 입력된 값" name="서버에 보낼 인풋 이름">

input[type=email] {
  color : grey
}

form에서 유용하게 사용 가능한 css 셀렉터입니다.
input에서 type이 email인 요소만 따로 지정할 수 있습니다.

 

 

전송 버튼

<button type="submit">전송</button>
<input type="submit">

둘 중 하나를 쓰면 되고, form 태그 안에서 정상 작동됩니다.

 

 

label 태그

<input type="checkbox" id="subscribe">
<label for="subscribe">누르기</label>

label 태그와 for 속성을 활용하면 체크 박스를 누르지 않고 옆에 누르기를 클릭해도 체크가 됩니다.

input의 id와 for의 속성을 같게 만들면 됩니다.

 

 

■ Table

기본 테이블 구성

<table>
  <thead></thead>
  <tbody>
    <tr>
      <td>내용</td>
      <td>내용</td>
    </tr>
  </tbody>
</table>

tr은 행, td는 열, thead는 헤드 부분 영역 구분, td 대신 th를 사용하면 글자가 굵어집니다.

td 하나에 width 변화를 줘도 전체 열이 적용이 됩니다.

 

verticla-align

td, th {
  vertical-align : middle;
}

vertical-align 속성으로 테이블 내에서 상하 정렬이 가능하며 top, bottom, middle 중에서 선택할 수 있습니다.

큰 이미지 또는 큰 글씨 옆에 작은 글씨가 있다거나 할 때에도 사용 가능하며,

보통 span 태그에 넣어 높이 조절이 가능합니다.

 

 

 

nth-child 셀렉터

.cart-table td:nth-child(n) {
  color: red;
}

여러 요소 중에서 n번째 요소를 찾아 스타일을 주고 싶을 때 사용 가능합니다.

위에서는 n번째 열에 글씨들만 빨간색으로 효과를 주었습니다.

n 자리에 even을 넣으면 짝수만 odd를 넣으면 홀수에만 스타일을 줄 수 있으며,

3n+0을 넣으면 3의 배수에만 스타일을 줄 수도 있습니다.

 

 

테두리 색상과 병합

td, th {
  border-bottom : 1px solid black;
}
<td colspan="4"></td>

border-bottom을 쓰면 테두리 색상이 가로 줄에만 생깁니다.

colspan을 쓰면 숫자만큼 셀을 합쳐줍니다.