[CSS] Position 홈페이지 레이아웃 잡기.

기본설정값

정적 위치 지정방식 (static) :left,top,right,bottom값이 적용되지않는다

상대 위치 지정방식(relative) :left,top,right,bottom값이 적용된다

절대적 위치 지정방식(absolute) :상대적

고정적 위치 지정방식(fixed) : 스크롤 여부와 상관없이

상속 위치 지정방식(inherit) :

fixed는 위에서도 보셨듯이부모의 위치를 따지지않고, 전체 화면을 기준으로 위치를 잡기때문에 주의해야합니다

position:absolute; bottom:50px; left:50px; 값을 주었을때는, 부모 안에서 위치를 잡는것을 확인 할 수 있습니다.

absolute 와 fixed의 차이점

그럼 이 두가지의 차이점을 정확히 보여드리겠습니다.동일한 위치에 높이, 그리고 넘어갔을때 스크롤이 생기게해놨습니다.

absolute 는 부모안에서 위치가 고정fixed는 전체에서 해당 위치가 고정

홈페이지를 만든다고했을때, 기본안을 구성해봅시다.

- head / top 은 position:relative로 높이를 잡아주고.

- menu는 float:left 혹은 position:absolute를 이용하면됩니다.

- 내용이 들어가는 부분역시 , float:left / position:absolute / position:relative 로 지정이 가능하죠 ?

이렇게보면 참쉬운데 말이야.. 원하는 모양을 만들다 ㅋㅋ 숨넘어갑니다.

물론 이렇게 하는게 정답은 아닙니다. 만약 position을 이용해서 구조를 만든다면을 전제로했기때문에 ^^ 보시는 분들은 더 좋은 방법으로 화이팅 !

认识你很高兴 반가워요. BLOG >> blog.naver.com/535bo3ob
Follow
4.7 Star App Store Review!
Cpl.dev***uke
The Communities are great you rarely see anyone get in to an argument :)
king***ing
Love Love LOVE
Download

Select Collections