오늘은 HTML, CSS를 활용해서 회원가입창과 을 다시 실습해 보도록 할 것이다.
요새 나오는 구조와는 다르고 예전에 사용했던 기본 구조들이지만
처음에 어떻게 구조를 하는지 알 수 있을 것 같다.
보통 이런 회원가입창과 을 만들 때 table 태그를 이용하여 만드는 게 편할 것이다.
그러므로 본 실습을 시작하기앞서 table태그가 어떤 건지 다시금 보는 시간을 가질 것이다.
※Table태그
table - 블록레벨
부모로만 사용 가능
thead, tbody , tfoot :여기서 보통 tbody로 많이 사용한다.
tr - table 또는 tbody시리즈의 자식으로만 사용 가능(행)
가로 전체 한 줄을 의미
th - tr의 자식으로만 사용 가능
제목
글자 두껍게, 가운데정렬
td - tr의 자식으로만 사용 가능(열)
일반폰트, 왼쪽정렬
border(table태그 안에서 사용):요소의 테두리에 관련된 속성(굵기, 모양, 색상)을 지정할 때 사용합니다.
-border-width:선의굵기 예) px, em, rem... border-width:1px , 10px 등
*em:부모대비 글씨크기 설정 (자식박스에 font-size를 걸어놓고 부모박스에서 font-size을 바꾸면 자동으로 바뀐다.
*rem:html대비 글씨크기 설정 (em이랑 쓰는 방법은 동일한데 누굴 기준으로 하는지 에 따라 다르다 rem은 html 기준으로 바뀐다.
-border-style:스타일지정 예 border-style:solid
none:border표시하지 않습니다.
solid:실선 모양으로 나타냅니다
dashed:파선 모양으로 나타냅니다.
double:이중실선모양으로 나타냅니다
dotted:점선모양으로 나타냅니다
-border-color:색상을 나타냅니다 예) border-color
border-top color, border-bottom color, border-right color, border-left color
*border축약(한 줄로 표현가능):border:[width][style][color] 예) border:1px solid red;
-옵셔널 요소(없어도 상관없는 요소)
1) caption: 표 제목
table의 자식으로만 사용 가능
어디에 명시하던 표 상단 가운데 배치
2) colgroup: 여러 열들을 묶어서 css 관리 가능
tr과 구조가 같게 작성
col: 각 th나 td를 의미
*fieldset 태그
-구역을 표시해 줌(해당 영역 괄호 안에 묶어줌.)
부모로만 사용 가능
block 레벨
legend: 자식으로만
해당 영역의 제목
*textarea 태그
-메모, 게시판 본문
엔터, 빈칸 사용 가능
inline 레벨
기본으로 사이즈 제공되지만 CSS로 관리할 것.
사이즈 조정이 가능하지만 웬만하면 막을 것.
#resize:none; - 사이즈 조절하는 기능 막음.(고정시켜 놓는다)
*required 속성(input 속성으로 쓰임)
해당 필드를 빈칸불가
form태그 안에서 submit 버튼 눌렀을 때만 동작 (해당칸은 빈칸불가라고 뜸)
※회원가입 페이지
(html구조)
1) 우선 구조는 form 태그 안에 table 태그를 감싸서 안에 tr(*9개)-(행을 의미)과 td(*18개)-(tr의 자식으로 아이디 줄과 그 옆에 내용칸을 나눈다)를 활용하여 만들어준다. 중간에 비어져있거나 글씨만 있는 칸도 tr, td로 넣어주었다.
2) 뒤에 파선이 있는 부분은 input을활용해서 해줄 것이고 form을 눌렀을 시 정보전달이 잘됬는지 확인하기 위해 name 속성도 같이 넣어준다.
3) 아이디는 text 속성을 쓰고, 패스워드는 password 속성을 쓰고 , 중간에 글자는 td에 p태그를 활용해 글자를 묶어주자.
4) 패스워드 확인 도 password 속성 사용, 이메일은 text 속성 을해주고 input을 2개 연이어 만들어 중간에 @를 넣고
나중에 css로 앞. 뒤 text 란 50%씩 깎아해 준다.
5) 주소도 text 속성을 쓰고 중간에 비어져있는 부위는 tr td로 공란으로 해둔다.
그리고 모든 input 속성에 requried를 선언해 submit 버튼을 눌렀을 시 비어있는 칸이 있으면 '작성해야 된다는' 메시지를 준다.
6)'가입' 부분도 table 태그 안에 넣고 th(굵은 폰트, 가운데정렬)을 활용하고 'colspan=2'를 넣어 행을 1개로 합쳐서 표현한다.
(css)
1) 우선 body 에다가 background 배경색을 하늘색을 해주고 margin: 0를 넣어 비어있는 부분을 없애준다.
2) table 태그 안에 background 흰색, margin: 100px auto으로 위아래 여백과 중앙에 위치하게 해 준다.
padding으로 안에 여백을 줘서 공간을 좀 띄어놓는다. box-sixing을 하여 박스 안에 맞춰준다.
3) tr에 가로 * 세로 (100% * 40px)로 텍스트 공간을 늘려주고 td에도 가로 120px font-weight로 글씨를 굵게 만들어준다
4) input 속성으로는 width : 250px, height: 100% 로 성정해주고 box-sizing으로 크기 맞춰주고 border 테두리 제거하고,
border-bottom 에다 dashed (파선)을 적용시켜 주고 , outline :none으로 text 속성의 입력란을 없애준다.
5) email 부분에 클래스를 선언하고 widht 값으로 ( 100%- 252px/2)(전체길이에다- text속성 가로라인에 1/2 사이즈 구하자) -(26px / 2)(골뱅이가로사이즈 반잘라서 넣고) 이렇게 계속하면 @ 가 중앙에 위치할 것이다.
6) submit 속성은 width : 100% height : 50px, border :none, font -size (크기), font-weight(굵기), 선언해 주고 backgroun(배경색): yellow, color(글자색) : rgba (0,0,0, 0.2) ; 검은색글씨 투명도 값 조절해 반투명하게 해 준다.