[HTML / CSS] 회원가입 폼 만들기

회원가입 폼을 html/css로 구현하는 과제를 진행하며 추가로 공부한 부분들을 정리해두겠다

 

CSS 단축 속성

table{
	"border: 1px solid lightgray;"
}

table{
	"border-width: 1px;
    border-style: solid;
    border-color: lightgray;"
}

 

width, style, color를 묶어서 나타낼 수 있는데, 이때 style 속성은 필수로 넣어야 하며, 생략할 경우 적용되지 않는다

참고: https://www.w3schools.com/css/css_border_shorthand.asp

 

 

table border 한 줄만 나오게 하기

border-collapse 속성을 활용하면 표와 셀 사이의 간격을 조정할 수 있다(기본값: separate)

• separate: 표와 셀 사이에 간격 O
• collapse: 표와 셀 사이 간격 X, border가 겹쳐서 보여진다

 

padding과 margin의 차이

출처: http://www.tcpschool.com/css/css_boxmodel_margins

 

 

<option selected>

select 태그를 이용해서 option들을 작성하면 기본적으로 맨 위에 있는 option이 선택되어 있다

<option selected="selected">직접입력</option>

option 태그 안에 selected 속성을 사용하면 원하는 option이 선택된 상태로 만들 수 있다

 

 

table 화면 중앙에 두기

<변경 전>

table{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
    border-style: none;
}

 

<변경 후>

table{
    width: 70%;
    margin: auto;
    text-align: center;
    border-collapse: collapse;
    border-style: none;
}

width: 70%; : 화면 너비의 70%를 차지

margin: auto; 를 사용해서 margin이 자동으로 배치되게 설정하면 자동으로 가운데로 간다

 

사용자 정보라고 나와있는 글자도 표에 맞게 이동시켜 준다

<h4 style="margin-left: 15%;">사용자 정보</h4>

위에서 table이 70%의 width를 가졌고, margin을 auto로 배치해 좌우 margin이 같으므로 텍스트 왼쪽에 15%의 margin을 주면 표와 딱 맞게 배치된다

+) 전체 창의 width가 작아 table이 70%의 width를 갖지 못하게 되면 텍스트 위치가 어긋나게 되기 때문에 다른 정렬 방법을 찾아봐야 할 듯 하다...

 

input text 크기 조절

입력창 크기가 다 똑같은 상태

<input type="text" size="6"></td>

1. size 속성으로 변경

대략 몇 글자 정도 칠 수 있는지를 기준으로 사이즈가 정해진다(실제 입력 가능한 글자 개수와는 관계 X)

<input type="text" style="width: 80px;"></td>

2. style 속성에서 width를 이용하여 변경

 

 

input text 최소/최대 글자수 지정

<td>
    <input type="number" maxlength="8" style="width: 65px;"><br>
    8자리 (예 : 19801211)</td>

minlength/maxlength 속성을 이용하면 최소/최대 글자수를 지정할 수 있다

 

 

input text 작성하지 못하게 막아두기

<input type="text"
    style="background-color: whitesmoke;
    border: 1px solid gray;" disabled>

<input type="text"
    style="background-color: whitesmoke;
    border: 1px solid gray;" readonly>

1. disabled를 이용: 입력창 자체가 클릭이 안 됨, form 데이터로 보지 않기 때문에 action 페이지에 전달되지 않는다

2. readonly를 이용: 입력창 자체는 클릭이 되지만 입력은 안 된다, form 전송이 가능하다

위쪽이 disabled, 아래쪽이 readonly

참고: https://kkotkkio.tistory.com/22

 

 

완성본