JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div class="header">
        header
    </div>
    <div class="sidebar">
        <ul>
            <li>레이아웃</li>
            <li>1단 레이아웃</li>
            <li>2단 레이아웃</li>
            <li>3단 레이아웃 - float</li>
            <li>3단 레이아웃 - position</li>
            <li>라운드 코너와 박스에 그림자</li>
            <li>버튼 만들기</li>
            <li>말풍선 만들기</li>
            <li>form 디자인 하기</li>
            <li>구글 검색창 따라하기</li>
            <li>이미지 하나로 합쳐서 사용</li>
        </ul>    
    </div>
    <div class="content">
        일반적인 웹사이트는 타이틀이나 기타 부수적인 정보들로 구성 되어 있는 "header"영역과 사이트에서 다루게될 컨텐츠를 담을 "body"영역과 기타 사이트 하단에 위치시킬 "footer"로 구성 됩니다. 꼭 이런식의 레이아웃으로 구성해야 하는건 아니고 그냥 일반적인 웹사이트의 구성이라는것을 말씀드리며 얼마든지 정보의 성격에 맞는 다양한 레이아웃이 나올 수 있을 것입니다.
    </div>    
    <div class="footer">
        footer
    </div>
</div>

CSS

.wrap {
    width: 780px;
    font-size:0.75em;
}
.sidebar {
    width: 200px;
    float:left;
}
.footer {
    clear: both;
}



div {
    padding: 20px 0;
    text-align:center;
}
.header {
    background-color: #ccc;
}
.sidebar {
    background-color: #ddd;
    text-align: left;
}
.content {
    background-color: #eee;
}
.footer {
    background-color: #ccc; 
}