4.

1. position 프로퍼티를 이용한 layout

position은 위치값을 조정하는데에 사용하는 속성이다. 

.wrap > div:nth-child(3) {
  position:fixed; 
  top:0px;
  left:0px;
}

• static : 기본값. 위치가 지정되었다고 표현하지 않는다.
• relative : 별도의 프로퍼티를 지정하지 않는 한 static과 동일하게 동작한다. 원래 위치에서 위치가 조정된다
• absolute : 가장 가까운 곳에 위치하고, position이 static이 아닌 조상 엘리먼트에 상대적으로 위치가 지정된다. (tip:기준값이 되길 원하는 조상 엘리먼트의 position값을 relative로 설정해두면 좋다!)
• fixed : 스크롤에 영향을 받지 않는 고정된 배너

2.float 기반 layout 1편

아래 엘리먼트의 글자는 그냥두고 레이어가 겹침!

float 붕 뜬 상태. 마진을 이용해야 한다.

글, 그림을 자연스럽게 배치할 때 사용한다.

블로그에서 글 쓸 때 오른정렬 왼정렬 이런거!

.wrap > div {
  border:1px solid grey;
  width:100px;
  height:100px;
  margin:10px;
  float:left;
}

 

3. float 기반 layout 2편

자식중에 float를 가진 자식을 자기 자식으로 생각하지 못한다; -> overflow: 설정을 해주면 float 자식 컨텐츠를 자기 자식으로 인정해준다..!

다른 엘리먼트가 float 엘리먼트를 인지하게 하려면 clear 프로퍼티 설정(단, float와 같은 속성으로 clear 설정해야 함)

 

.wrap {
  background-color:slategray;
  padding:0.5rem;
  width:300px;
  box-sizing: border-box;
  overflow:hidden;
}

.wrap > div {
  background-color:#333;
  width:50px;
  height:50px;
  margin:0.5rem;
  color:#fff;
  float:left;
}

footer {
  width:300px;
  height:100px;
  background-color:#bb3;
  margin-top:0.5rem;
  clear:both;
}

4. FLEX 기반 layout

반응형 웹에서 손쉽게 배치를 한다.

.wrap {
  background-color:slategray;
  height:500px;
  display:flex;
  flex-direction:row;
  justify-content:flex-end;
  align-items:cente/* r; */
  
}

.wrap > div {
  width:50px;
  height:30px;
  padding:0.5rem;
  margin:0.25rem;
  background-color:skyblue;
  color:white;
  
}

 

5. z-index 속성의 이해 : stacking context

포지션이 static이 아닌 element끼리 겹칠 수 있는데 누가 위로 올라갈지가 issue

z-index: 기본값 0

자식 z-index 가 아무리 커도 상위 엘리먼트끼리는 부모 인덱스를 따른다!

.wrap {
  width:100px;
  height:100px;
  margin:0.5rem;
  color:#fff;
  position:absolute;
  z-index:2
}

.wrap>div:nth-child(1) {
  top:10px;
  left:10px;
  background-color:red;
  
}

.wrap > div:nth-child(2) {
  top:30px;
  left:30px;
  background-color:green;
  z-index:722;
}

.wrap > div:nth-child(3) {
  top:50px;
  left:50px;
  background-color:blue;
}

.hi {
  width:100px;
  height:100px;
  position:absolute;
  top:10px;
  left:10px;
  background-color:#dd1;
  z-index:4
  
}