[css] float사용법, 반응형 웹 만들기 (right, left, none...)

flex box라는 개꿀 기능이 나오기 전에는 flaot사용이 필수고 이래저래 손봐야 했다

 

레이아웃를 잡을 때 가장많이 사용하는 속성 중 하나다

 

빨리 알아보자

 

---

right, left ,none 이렇게 3가지 속성만 있다

 

none을 사용하게 되면 박스가 움직이지 않는다

 

 

사이드 바와 본문에  left와 right를 주어서 왼쪽, 오른쪽으로 정렬 되어있는 것 볼 수 있다

 

aside{ //사이드 바
    float: left;           //좌측정렬
    width: 200px;
    min-height: 250px;

}

article{  //본문
    float: right;          //우측정렬
    width: 580px;

}

 

---

그치만 크기를 고정해 버리면  요즘 유행하는 반응형 웹사이트를 만드는데 제한 된다

 

사이드 바의 크기는 고정한 상태로 본문 크기만 가변적 크기로 만들려면 약간의 야매가 필요 하다

 

 

%단위로 처리하게 되면 화면의 비율에 맞춰 크기가 조정된다

 

aside{
    float: left;
    width: 200px;             //크기고정
    min-height: 250px;


}

article{
    float: right;
    width: 100%;              //100%
   
    box-sizing: border-box;   
}

사이드 바의 크기를 고정시키고 본문은 100%

 

 

요래 되뿐다 

 

 

 

본문에 margin-left를 추가해주면

margin-left:-215px;

본문이 사이드 바에 겹치면서 사이드바가 들어갈 공간이 생긴걸 볼 수 있다

 

 

 

---

 

 

???사이드 바 20%,  본문 80% 로 두면 되지 않을까?????

 

 

그러면 사이드 바도 크기가 같이 줄어들어 버린다 fail

 

 

 

---

 

 

 본문내용이 사이드 바 옆으로 가며 브라우저 크기 변해도 유지 되게 하자

 

aside{
    float: left;
    width: 200px;
    min-height: 250px;

}

article{
    float: right;
    width: 100%;                  //적절한 퍼센트
    margin-left: -215px;           // aside 크기보다 조금더 
    padding-left: 215px;           // 마진만큼 안쪽 여백
    
    box-sizing: border-box;
    
}

 

aisde는 메뉴니까 크기 고정 해 두고

 

width는 화면을 가득채우는 100%

 

margin을 사이드 바가 있을만한 정도로 공간을 만들고

 

안에 내용물을 딱 그정도 땡겨주면  브라우저 크기가 달라져도 구조가 유지 된다

 

 

완성!

 

---

 

사이드바 만 고정되고 나머지는 크기가 변한다 

 

반응형이다

 

근데 이방법은 flex속성을 안쓴 경우이고 이제 flex를 써보자

 

 

 

 

 

F L E X