[HTML / CSS] 로그인 창 만들기

*는 모든 항목에 동일하게 주는 옵션이다.

box-sizing을 border-box로 설정함으로써 픽셀 간 계산을 좀 더 가시적으로 쉽게 하도록 했다.

폰트도 설정해 주었으며 모서리 부분을 전체적으로 둥글게 옵션을 줬다.

 

login-form 클래스는 아이디 비밀번호를 입력하는 박스와 로그인 박스를 포함한다.

이 박스들은 공통적으로 가운데 정렬(block display 이므로 auto), 300px의 크기, 테두리 없음 아래 마진 10px라는 값을 가지고 있다.

 

text field 클래스는 아이디와 비밀번호 글자박스에 대한 클래스이다. 

아이디 글자와 비밀번호 글자는 서로 박스에서부터 10px만큼 띄어져있다.

테두리도 없으며 아래 마진이 10px만큼 띄어지도록 했다.

 

submit-btn 클래스는 로그인 박스에 대한 클래스로 아래와 같이 출력되도록 수정했다.

 

links a도 아래와 같이 출력되도록 바꾸어 준다.