<!DOCTYPE html>
<html lang="en">
<head>
<title>CSSTemplate</title>
<meta charset="utf-8">
<meta name="viewport"content="width=device-width, initial-scale=1">
<style>
/*1.아래 화면처럼 Layout을 구성하시오, 메뉴에 마우스 Over 시 색이 변경됨(Font: Arial,Helvetica, sans-serif,사용Color: #111, #ddd)*/
*{
box-sizing:border-box;
}
body {
margin: 0;
font-family:Arial, Helvetica, sans-serif;
}
.sidenav{
background-color: #111;
float: left;
width: 200px;
height: 100%; /*100%하면 화면 끝까지 영역차지*/
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
}
.sidenav a{
color: white;
padding: 16px;
display: block; /*block으로 함ㅇ,로써 요소앞뒤 줄바꿈 + 가로영역 모두 채움. -> 사이드바 수직으로 만드는법...*/
}
a{ /*a태그 밑줄 없애기*/
text-decoration: none;
}
.sidenav a:hover{
background-color: #ddd;
color: black;
}
.content{
margin-left:200px;
padding-left:20px;
}
/*2번 - 화면처럼 Layout을 구성하시오, 메뉴에 마우스 Over 시 색이 변경됨(Font: Arial,Helvetica, sans-serif,사용Color: #333, #f2f2f2, #ddd, #f1f1f1)*/
* {
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
body {
margin: 0;
font-family:Arial, Helvetica, sans-serif;
}
.topnav{
background-color: #333;
height: 50px;
line-height: 50px;
overflow: hidden;
}
.topnav a{
float: left;
display: block;
color: #f2f2f2;
padding: 0 10px; /*위 수평간격*/
/*top right left bottom*/
}
a{ /*a태그 밑줄 없애기*/
text-decoration: none;
}
.topnav a:hover{
background-color: #ddd;
color: black;
}
.content{
background-color: #ddd;
padding: 10px;
}
.footer{
background-color: #f1f1f1;
padding: 10px;
}
/*3번 - 화면처럼 Layout을 구성하시오, 메뉴에 마우스 Over 시 색이 변경됨(Font: Arial,Helvetica, sans-serif,사용Color: #f1f1f1)*/
* {
box-sizing:border-box;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
.header{
text-align: center;
background-color: #f1f1f1;
height:100px;
line-height: 100px; /*텍스트 요소의 높이와 동일한 값을 지정하면 텍스트를 세로 가운데 정렬을 할 수 있다 / 단, 이 방법은 텍스트가 한 줄일때만 가능하다*/
}
.row:after{
content: "";
display: table;
clear: both;
}
.column{
float: left;
width: 33.3333%;
padding: 10px;
height: 300px;
}
----------------------------------------------------------------------------
<!-- 영역 비율 다음과 같이 정하는 방법도 있다 -->
/* Create three unequal columns that floats next to eachother */
.column {
float: left;
padding: 10px;
height: 300px; /*Should be removed. Only for demonstration */
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle {
width: 50%;
}
----------------------------------------------------------------------------
.footer{
text-align: center;
background-color: #f1f1f1;
padding: 10px; // 위 요소와의 간격
}
</style>
</head>
<body>
<!-- 1번 -->
<div class="sidenav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="content">
<h2>CSS Template</h2>
<p>A full-height, fixed sidenav and content.</p>
</div>
<!-- 2번 -->
<div class="topnav">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
</div>
<div class="content">
<h2>CSS Template</h2>
<p>A topnav, content and a footer.</p>
</div>
<div class="footer">
<p>Footer</p>
</div>
<!-- 3번 -->
<h2>CSS Template usingFloat</h2>
<p>In this example, we havecreated a header, three unequal columns and a footer. On smaller screens, thecolumns will stack on top of each other.</p>
<p>Resize the browser windowto see the responsive effect.</p>
<div class="header">
<h2>Header</h2>
</div>
<div class="row">
<div class="column side" style="background-color:#aaa;">Column</div>
<div class="column middle" style="background-color:#bbb;">Column</div>
<div class="column side" style="background-color:#ccc;">Column</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html><!-- 1번 -->
<!-- 2번 -->
<!-- 3번 -->
'Bitcamp > BITCAMP - Front Web' 카테고리의 다른 글
| JavaScript - 내장함수, 객체, 생성자 함수, 캡슐화, 상속(호출), 기본자료형 (0) | 2019.09.06 |
|---|---|
| JavaScript - 클로저, Scope (0) | 2019.09.05 |
| JavaScript - 자료형 (0) | 2019.09.03 |
| 5일차 (0) | 2019.09.03 |
| 4일차 실습 (0) | 2019.09.02 |
