proj 1. login 화면

완성된 로그인 화면

약 5시간 동안 끙끙거리면서 만들어 낸 로그인 화면이다.

마크업하면서 어떻게 시맨틱하게 마크업 할 수 있을지 고민했고,

스타일링하면서는 효율적이고 깔끔한 방법에 대해 고민했다.

고민의 결과,

가독성을 위해 주석을 다는 시도를 해보았다!

 

구현하면서 봉착했던 큰 어려움은 크게 2가지였다.

1.  weniv 로고와 텍스트의 정렬

2. 하단의 패딩

 

1.  weniv 로고와 텍스트의 정렬

 

아직도 해결을 못한 상태이다.

로고와 텍스트의 부모요소에 아래와 같이 코드입력을 하였지만,

텍스트가 약간 위로 올라와있어 아쉽다.

  vertical-align: middle;

 

2. 하단의 패딩

 

하단 요소들에 padding-bottom값을 부여해도 border와 붙어있어 보기 좋지 않았다.

 

하단 아이디 / 비밀번호 찾기와 회원가입 요소에

float 효과를 주었는데

부모요소에는 float를 해제시키지 않아 발생한 문제였다.

float에 대해 더 깊이 숙지할 필요가 있다.

 

간단히 해제 시키는 방법은 아래와 같다.

   overflow: hidden;

 

Tip.

전체적으로 유연함을 고려한다면, 

height값은 지정 안해주는 것이 바람직하다.

 

float 관해서는 아래 참고.

---

float

'띄우다'라는 뜻에 맞게

주로 블록박스 요소를 띄워서 좌 혹은 우로 정렬한다.

 

.apple_image {
	float:left;
    }

float 특성

1. 블록박스 요소에 float속성을 부여하면

컨텐츠 크기만큼만 요소가 공간을 차지하게 된다.

 

2. inline요소에 적용하는 경우,

display속성값이 block으로 변경된다.

 

* float 사용할 때 유의할 점.

자식요소들이 모두 float속성이 부여되었을 때,

부모 요소는 자식 요소들의 높이를 인식하지 못한다.

 

이로 인해, 위와 같은 로그인 화면을 구현할 때 

float 속성을 적용한 자식 요소들에 padding값을 부여해도

부모요소가 자식 요소들의 높이를 인지하지 못하여 반영되지 않았다!

 

이럴 경우,

해결 방법은 총 4가지가 존재한다.

1. 부모 요소에 overflow 속성 추가.
2. 부모 요소의 높이 값 지정.
3. clear 속성 사용.
4. clear-fix 사용.

1. 부모 요소에 overflow 속성 추가

overflow는 Block-Formatting-Context(BFC)를 생성하고,

이는 부모요소가 float이 적용된 요소를 인식하도록 만들어준다.

보통 overflow:visible;을 제외한 overflow속성을 추가하여 해결한다.

overflow:hidden;

 

2. 부모 요소의 높이 값 지정

 

overflow속성을 사용하기 전에 적용 해본 방법으로,

부모 요소에 높이값을 직접 지정하여

자식요소를 인식하는 것처럼 만드는 방법이다.

 

자식요소가 수정될때마다,

부모 요소 높이를 직접 변경해야 하기 때문에

유연하게 대처하기 힘든 비효율적인 방법이다.

 

3. clear 속성 사용

 

float이 사용된 요소의 바로 다음 형제 요소에

clear속성을 사용하는 방법이다.

float가 사용된 방향에 따라 사용해주면 된다.

실무에서는 float : both;를 많이 사용하는 듯하다.

 

4. clear-fix 사용

 

가상요소 ::after를 사용하는 방법이다.

가상요소를 사용하여

부모요소가 자식요소를 알아보게 하는 원리로

이를 clear-fix라고 한다.

.parent_element::after {
	content:'';
	display:block;
	clear:both;
}

 

피드백 수업 후 정리

---

0. 웹페이지 유효성 검사 필수 

 

1. 불필요한 마크업 금지

 

습관처럼 wrapper를 레이아웃 잡는 용도로

전체 요소를 감싸서 사용할 수 있지만,

해당 요소 없이 원하는 레이아웃을 잡을 수 있어서 필요 없는 코드일 수 있다.

필요한 마크업만 하자!

 

2. padding과 margin 구분해서 사용

 

패딩 : 해당 요소와 자식 요소들과의 간격

         + 여백을 패딩으로 깔끔하게 넣을 수 있다

마진 : 요소와 요소 사이의 간격

 

3. 가상 요소 사용

 

'아이디' 전후에 존재하는 자물쇠와 '|' 같은 부분은

마크업 하는 것보다 가상요소를 활용하는 것이 더  효율적이다.

 

4. CSS 안 한 클래스명은 삭제

 

마크업 할 때 클래스명을 미리 작성할 수 있지만,

이후 CSS 안 한 클래스명 등은 삭제해야 한다.

 

5. height

 

부모요소의 높이는 자식 요소들에 종속되기 때문에

유연함을 위해 따로 높이는 설정 하지 않는다.

요소가 추가되면 자연스럽게 높이가 늘어난다.