css: position, float, 알마인드 이용한 돔트리 만들기, 실습

 

 

 

* 부모 영역에 사이즈를 주고 자식에게 퍼센트 적용 (for 반응형)

* 보통 검색창 만들때 placeholder 보다는 label positioning

* nav, container 무조건 id

* line-height : 행간 지정 및 정렬

* vertical-align : 형제 요소와의 상대적 (행간) 정렬

 

 

 

알마인드

: 돔트리 작성

https://www.altools.co.kr/Download/ALMind.aspx

알툴즈 - 알마인드

 

 

position

:fixed width 필수, body 기준

:static 상태 취소, 원상태로

 

 

flot

: 형제요소를 좌우 나열할 때 사용, 내용은 가려지지 않음, 태깅 순서대로 공백없이 옆으로 붙음

-left

-right

 

부모요소 찾기

: 모든 자식이 float되면 부모는 높이값이 사라짐

1. 부모요소에 직접 height 입력 → 직접 계산, width 100% 자동 설정됨

2. 부모요소에 float 입력 →  부모요소 너비=총 자식요소 너비 

3. overflow:hidden → 이미 foated 자식을 hidden, width 100%, height auto

4. :after (pseudo)  추천👍

a:after{
     content:"";
     display:block;
     clear:both;
}

* clear from both of left and right of 'float'

* 자식요소가 부모요소보다 크면 해당 요소가 바로 옆으로 붙지 않고 밀려남

* position:absolute 도 2번과 같은 원리 → clear가 너무 남발되지 않도록

* li는 대부분 float