[ CSS 레이아웃 ] 상세_loginForm

 

 

0. 만들어야 하는 login폼 체크

 

 

 

 

## div3개 중에서 3번째 div에서 작업

 

 

 

 

 

 

## 2개의 div로 나눠서 작업

• 아이디 / 비밀번호 / 로그인 들어갈 div1 
• 회원가입 / ID-PWD 찾기 들어갈 div2

 

## div1 은 다시 나눠서 작업

• 아이디 비밀번호들어갈 div와
• 로그인 들어갈 div

 

 

---

 

 

 

 

1. 파일 하나 새로 만들어서 기본 틀 잡아주기

 

 

 

 

 

 

---

 

 

 

 

 

 

# CHECK

• 링크 영역 form 태그 안에 안쓰고 밖에 해준 이유?
• 데이터 전달 – 로그인 id / pwd 전달해주기 위한 목적으로

 

 

 

---

 

 

 

 

2. 스타일 적용해서 틀 잡아주기

 

 

 

 

 

2-1 #content_3: 높이랑 너비는 임의로 지정

• 본 파일에서 사이즈를%로 적용해놓아서 정확한 값 몰라서 일단 임의 값으로 지정 후 작업

 

 

 

---

 

 

2-2 안에 요소들 높이/너비 지정해서 틀 잡기 

 

 

 

 

---

 

 

 

3. 세부 내용들 채워주기

 

 

 

 

3-1 회원가입 부분 div 채우기

 

 

 

1. 태그 내용 입력

 

 

---

 

 

2. 스타일 적용

• a태그가 기본으로 가지고 있는 스타일 속성 제거
• 위치/정렬 조정

 

 

 

---

 

 

 

3-2 로그인 폼 부분 div 채우기

• key – value 반드시 필요 == name 지정
• 입력 값이 반드시 필요하다 - 빈칸이면 안된다 == required 속성 부여

 

 

 

1. < input 태그 > text, password 부분 내용 입력

 

 

---

 

 

2. < input 태그 > submit 부분 내용 입력

 

 

 

 

상세_로그인폼 완성!

 

 

---

 

 

 

 

 

 

+@ tip -

% 크기는 부모 태그의size를 기준으로 잡힌다.

내 부모 요소가size가 없으면

% 잘 안 먹힐 수 있다.

( ex ) div는 높이가 없다.

 

 

---