[웹코딩] 9일차, CSS, position

유령을 상하좌우 딱 달라붙게 하기.  position : absolute; bottom : 0; top : 0; right : 0; left : 0;

 

 

-예제 1 

화면 전체를 4등분 하여 색 채우기

 

- 예제1, 1단계, 우측상단 2등분 하기

 

 

 

 

-예제1, 2단계, 좌측 하단을 붉은색으로 채우기

 

 

 

 

- 예제 1,완성, 우측 하단을 골드색으로 채우기 

 

 

 

 

- 예제 2

화면 전체를 3등분하여 색 채우기 

 

 

 

- 예제 3

화면 전체를 9등분 하여 색 채우기 

 

 

 

 

-예제 4

widht, height 속성을 사용하지 않고 화면 전체를 4등분하기. 

 

 

 

 

- 예제5 ( 1단계 )

화면전체 4등분을 부모엘리먼트에 가두고, 중앙에 위치하도록. 

position:relative; => 유령의 집이 된다. 유령의 집이 된다. => 유령을 가둘 수 있는 능력을 가지게 된다. 유령의 집이 된다. => 다시 말해서 후손 유령들의 기준점이 된다.      position : relative : 유령의 집화 position : absolute : 유령화 + 유령의 집화 relative 와 absolute 는 둘 다 유령의 집화 시킬 수 있지만 차이점은 다른 컨텐츠에게 어떻게 반응하느냐 이다.

-> 아이패드 캡쳐 넣기 

 

 

 

 

 

 

- 예제 5 (완성) 

위 예제는 단순히 중앙부분에서 엘리먼트가 시작되었을 뿐이다. 완전한 수직/수평 정렬하기.

transform 사용.