HTML/CSS②

#.HTML 가로 배치하기(float, overflow, clear, inline-block)  ★★★★★

①float : 부모 요소 기준으로 왼쪽 또는 오른쪽에 배치할 지 지정

-기본값 :float : none; //float 성질을 주지 않았다.

-자식요소에 float속성이 적용되면 부모 요소는 자식 요소가 없다고 판단해 높이값을 잃는다.

-float 속성 : 인라인, 블록, 인라인-블록 속성에 다 적용

-margin:auto : 인라인  및 인라인블록 요소에 적용 X, 블록 요소만 적용 

▶ display:block; , margin:auto; (블록 요소를 가운데로 보낼 경우는 자기 자신에게 margin:auto값을 준다)

▶ 부모 요소에서 text-align : center; ( 자식 요소가 인라인, 인라인 블록인 경우 ) 

 

부모 요소의 height값을 주지 않을 경우 자식 요소가 들어가면 height값이 알아서 늘어난다.

 

만약 float:left; 를 준다면 float의 뜻이 둥둥 떠다닌다, 부모 요소 안에 없다고 생각되어 다시 parent의 height 값이 사라진다.

부모 요소 아래에 생성 

: 자식 요소의 float 값을 갖게 되면 부모 요소는 높이 값을 잃는다.

> 부모의 요소에 height 값을 직접 대입  ▶ 자식의 높이값 변화와 무관

> overflow:hidden; 을 이용하여 숨겨진 height 값을 찾아준다. ▶ 이 방법의 경우 자식 요소의 높이값이 변하면 부모의 높이값도 함께 변한다., 부모의 높이값 찾을 때 더 효과적

 

-clear : float 속성이 적용되면 다음 요소가 float 속성을 자동으로 상속 받는데 이것을 해제시킨다.    clear left | right | both

 

#.가로 배치하는 방법

①float와 overflow를 사용해 배치 : 1px의 오차도 허용하지 않는 경우

border로 인해 부모 요소에 나란히 못 옴 > box-sizing을 줌으로써 한 줄의 가로 배치 완료

 

②display:inline-block으로 배치 : 대략적으로 배치해도 되는 경우, 

 

 

 

 

#.레이아웃 설계하는 HTML5 시멘틱 태그 사용법(★★★)

✔.가장 상위 컨테이너 : .container 또는 .wrapper

✔.문서의 주요 내용을 지정 : main

✔.주제별 콘텐츠 영역 : section

✔.헤더 영역 ( 로고, 메뉴, 로그, 검색 등) : header

✔.제작 정보 및 저작권 정보 표시 : footer

✔.콘텐츠 내용 넣기 : article  (sectione 안의 내용 article)  → article 안에 세부적으로 쓰일 때 div

✔.문서를 링크하는 탐색 영역 : nav

✔.세부 사항 요소 : summary / 추가 세부 정보를 정의 : details

 

.container > header, section, footer > article > div 

 

//강의 내용 주요 포인트//

 

 

#.부모요소 vs 자식요소

position 

①Relative  : 부모 요소

 position:relative; 가 없다면 중심이 body가 된다. → 위치가 부모 요소에서 벗어나게 됨

②Absolute : 자식 요소

자식 요소의 absolute가 있어야 left | right | top | bottom 속성 사용 가능

  position: absolute;

  left: ;

  right: ;

  top: ;

  bottom: ;

#.position 속성 이해하기

① left | right | top | bottom 좌표 속성과 z-index 속성은 position 관 반드시 함께 사용해야 함

② 항상 정중앙에 센터링 하는 법 

transform:  translate(-50%,-50%); 

 

자기 자신의 크기에서 -50%씩 이동

 

③부모의 height값 없고 자식의 position:absulute; 라면 부모의 height값이 자동 생성되지 않는다.

 position: absolute;

 float처럼 둥둥 떠서 위치하게 함

 

④원하는 위치로 정확히 보내는 법

HTML 요소의 기준은 왼쪽 상단 

정확한 값을 % 이용 - 상대적으로 변화할 수 있도록

부모 요소 기준 (position:relative, position:absolute 사용) 100% 사용