TIL 39일차

◆ 로그인 홈페이지 디자인

• 모든 홈페이지의 화면은 N줄 1칸 형태라고 생각한다.
• 필요한 태그는 외부 div(전체 영역, Container)와 내부 div(줄, row) 두 가지이다.
• div는 기본적으로 폭이 100%이므로 원하는 크기로 변경 해야한다.

◆ container

• 표시될 폭과 정렬 방식을 가운데로 설정
• 가운데라고만 하면 너무 애매하므로 다음과 같이 세분화

1. 내용물(텍스트)을 가운데 정렬한다. (text-align: center;)
2. 자신(테이블)을 가운데 정렬한다. (margin auto;)

• auto는 자동으로 계산해서 가능한 값을 부여하라는 의미

◆ 입력창, 버튼에 관련된 디자인

• .form-input - 입력창
• .form-btn - 버튼
• 같은 형태로 쓰기 때문에 색상 등을 제외한 나머지 크기가 동일 해야한다.
• row와 row 사이에는 일정한 간격을 부여

• 키보드 F1키를 누른 후 FormatDocument 검색 후 클릭하면 정렬 기능 추가된다.

• html에서 none은 자바에서 null과 같다.

• 홈페이지에 기본 픽셀은 16px이다.

• 반드시 form-input과 form-btn 둘 다 똑같이 속성을 추가 해야한다.

  • font-size 크기
  • padding 넓이
  • border 테두리 굵기
  • border-redius: 0.1em (글자 크기의 비례하는 속성을 사용 권장)

• <label class="w-100">강의 유형</label>
  인라인 블럭이 아니므로 class="w-100"가 적용 되지 않는다.

• 디자인에서는 number보다 text를 선호한다.
  - type="text"로 할 경우 입력시 키패드가 영문이 우선으로 나온다.
  - type="number"로 할 경우 입력시 키패드가 숫자가 우선으로 나온다.
  - 그래서 디자인과 키패드 실용성의 따라 number와 text을 선택 해주면 된다.