조회 수 8197 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
    box-sizing: border-box;
}
.row:after {
    content: "";
    clear: both;
    display: block;
}
[class*="col-"] {
    float: left;
    padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

html {
    font-family: "Lucida Sans", sans-serif;
}
.header {
    background-color: #9933cc;
    color: #ffffff;
    padding: 15px;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    padding: 8px;
    margin-bottom: 7px;
    background-color :#33b5e5;
    color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.menu li:hover {
    background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
    <h1>반응형 CSS</h1>
</div>

<div class="row">

<div class="col-3 menu">
<ul>
    <li>메뉴 1</li>
    <li>메뉴 2</li>
    <li>메뉴 3</li>
    <li>메뉴 4</li>
    </ul>
</div>

<div class="col-9">
    <h1>IT 소식?</h1>
         <p>구글이 안드로이드 차기 버전부터 오라클 자바 대신 오픈소스인 오픈JDK 기반으로 설계할 예정인 것으로 알려졌다.</p>
         <p>구글 측에 공식 확인하면서 기정 사실화됐다.</p>
    </div>

</div>
</body>
</html>

 

 

11-1.png

 

?

List of Articles
번호 분류 제목 날짜 조회 수
41 HTML 4. DIV안에 DIV 넣어 정렬하기 5 file 2015.12.23 128208
40 HTML 5. DIV를 통한 헤더 만들기 1 file 2015.12.24 71073
39 HTML 6. DIV를 통한 전체 화면 사용하기 & 응용 2 file 2015.12.24 53273
38 HTML 3. DIV내의 문자컨텐츠 수평정렬과 수직정렬 1 file 2015.12.23 23752
37 HTML 10. position: absolute; 에 대해 알아보자 1 file 2015.12.30 19387
36 HTML 8. PHP를 통한 index파일의 구성 1 file 2015.12.28 19014
35 HTML JavaScript의 반복문을 알아보자. 2 file 2016.02.24 16318
34 HTML 2. DIV요소의 수평정렬과 수직정렬 file 2015.12.23 15230
33 HTML Transition에 대해 알아보자. 8 2016.06.22 13531
32 HTML Form 요소 설명 4 2016.06.01 11643
31 HTML DIV 제거와 CSS 코드 줄이기 file 2016.02.17 10311
30 HTML li 에 대해 알아보자. 2 file 2016.02.15 10200
29 HTML 요소의 수직정렬을 알아보자. 1 file 2016.03.01 10172
28 HTML 1. Inline 요소와 Block 요소에 대한 이해 file 2015.12.22 9945
27 SASS Sass 소개 2019.09.19 9639
26 HTML 9. position: relative; 에 대해 알아보자 file 2015.12.29 8405
» HTML 11. viewport를 활용한 반응형 예제 file 2015.12.31 8197
24 HTML 7. position: static; 에 대해 알아보자. file 2015.12.28 7086
23 HTML class 에 대해 알아보자. 1 file 2016.02.16 6605
22 HTML 하나의 class = 하나의 디자인 ????? file 2016.02.23 6016
Board Pagination Prev 1 2 3 Next
/ 3