float:left를 활용한 div 둘로 나누기 [html] <div class="content_wrap"> <div class="content-list">List</div> <div class="content-view">View</div> </div> [css] .content_wrap { position:relative; width:100%; } .content-list { width: 40%; height:500px; float:left; background-color:yellow } .content-view { width: 60%; height: 500px; float: left; background-color: beige }
http://fontawesome.io 접속하면 web페이지 적용할 수 있는 다양한 아이콘들을 살펴볼 수 있다. [폰트스타일시트] <link href="/Content/Css/font-awesome.min.css" rel="stylesheet"> [HTML] <div class="wrapper"> <aside class="sidebar"> <ul class="sidebar-list"> <li class="sidebar-item sb-active"> <i class="fa fa-bullhorn"> </i></li> <li class="sidebar-item"> <i class="fa fa-wrench"></i> </li> ... </ul> </aside> <div>