다양한 레이아웃

html은 <div> <div class="service w_two bg1"> 1번 </div> <div class="service bg2"> 2번 </div> <div class="service bg3"> 3번 </div> <div class="service bg4"> 4번 </div> <div class="service bg5"> 5번 </div> <div class="service w_two bg6"> 6번 </div> </div> css는

.service{
    float: left;
    width: 125px;
}
/* 여백없이 컨텐츠가 배치되어야 하므로 float:left를 꼭 추가 */
.service.w_two{width: 250px;}
/* 넓이가 다른 요소 두개에 w_two 라고 클래스명을 주고 넓이를 한번 더 지정함. */
.service.bg1{background: #ededed;}
/* 하나의 요소에 service라는 클래스명과 bg1이라는 클래스명을 동시에 선언한 경우 */

html은 <ul> <li> 1번 </li> <li> 2번 </li> <li> 3번 </li> <li> 4번 </li> </ul> css는

ul li{
    float: left;
    width: 150px;
    height: 100px;
}/* 여백없이 컨텐츠가 배치되어야 하므로 float: left를 꼭 추가 */
ul{position: relative;}
ul li:nth-child(1){
    height: 200px;
    background: #f8ce48;
}
ul li:nth-child(2){background: #6c5648;}
ul li:nth-child(3){
    background: #f7f7f7;
    clear:left;
} /* float값을 준 요소에 clear:left 를 주면 해당 요소가 다음줄로 내려감 */
ul li:nth-child(4){
    background: #424242;
    width: 200px;
    height: 200px;
    position: absolute;
    right: 0;
    top: 0;
}
/* 3번에 clear: left을 줘서 3번을 아래로 내려가도록 배치하였고,
4번을 position: absolute로 배치한다 */

html은 <div class="crew"> <h3> 즐거운 카카오크루 </h3> <div class="cts"> 2번 </div> <h4> 안식휴가 </h4> <p> 크루의 리프레쉬를 위해 매 3년 근속 시마다 안식휴가 1개월과 휴가비 200만원을 지원합니다. </p> <h4> 편의시설 </h4> <p> 크루들의 휴식 공간으로 크루만의 카페를 사내에 운영하고 있으며 남/녀 수면실 및 엄마방(모유수유방)과 크루들 간의 아이디어 회의나 독서, 게임 등을 할 수 있는 크루 쉼터가 있습니다. </p> </div> </div> 첫번째 방법 css .crew h3{float: left;} .crew .cts{margin-left: 100px;}
/* margin-left의 값은 왼쪽에 있는 h3를 포함한 여백을 계산해야 한다. */ 두번째 방법 css

.crew h3{
    float: left;
    width: 100px;
} /* 왼쪽 h3의 너비를 동일하게 주려면 넓이를 줘야한다 */
.crew .cts{
    float: left;
    width: 450px;
} /* 오른쪽의 컨텐츠가 길다면 반드시 넓이를 제한해야 한다 */

컨텐츠를 좌우로 배치하려면 왼쪽 오른쪽 요소가 하나씩 되도록 해야한다. 지금처럼 왼쪽에 h3가 있고 오른쪽에 h4 p가 있는 상황에서 h4와 p를 div로 묶어서 h3와 div를 좌우로 배치한다.