반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* margin중첩 주의 */
/* margin이 만나면 => 큰쪽으로 겹쳐짐 */
div{
/* width: 200px; */
/* height: 100px; */
/* 전체 부분 margin 30px 주기 */
margin: 30px;
/* 콘텐츠 테두리 사이의 여백 설정하는 padding속성 */
/* padding: 20px; 전체*/
/* padding: 50px 20px; /*위아래 왼쪽오른쪽*/
padding: 10px 20px 30px 40px;
}
.box1{
background-color: red;
}
.box2{
background-color: green;
}
.box3{
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">박스 1</div>
<div class="box2">박스 2</div>
<div class="box3">박스 3</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
margin-bottom: 20px;
}
.box1{
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
}
.box2{
/* box-sizing 속성 : 값 board-box 테두리선까지 포함한 너비 값 */
/* content-box 콘텐츠 영역만 너비값 지정(기본값) */
box-sizing : border-box;
width: 200px;
height: 100px;
padding: 20px;
border: 10px solid black;
}
*{
box-sizing: border-box;
}
ul{
list-style-type: none;
}
/* 레이아웃 : 웹요소 배치 */
/* display 속성 : 배치 방법결정, 메뉴항목 가로로 배치, 이미지를 표 형태로 배치 */
/* 값 : block, inline, inline-block, none */
li{
display: inline-block;
padding: 20px;
margin: 0px 20px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<ul>
<li>menu 1 </li>
<li>menu 2 </li>
<li>menu 3 </li>
<li>menu 4 </li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
width: 100px; height: 200px;
/* float 속성 : 왼쪽이나 오른쪽으로 배치 */
/* 값: left 문서왼쪽 right 문서 오른쪽 none */
float: right;
margin-right: 40px;
}
div{
padding: 20px;
margin: 10px;
}
#box1{
background-color: red;
float: left;
}
#box2{
background-color: green;
float: left;
}
#box3{
background-color: blue;
}
#box4{
background-color: brown;
/* clear : float 속성 해제 */
/* 값 : left 해제 right 해제 both 모두 해제 */
clear: left;
}
</style>
</head>
<body>
<img src="../html/images/5.jpg">
<p>비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다</p>
<p>비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다</p>
<p>비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다. 비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다비타민C와 비타민 P가 풍부해
혈액순환, 감기예방 등에 좋은 것으로 알려져 있다</p>
<div id = "box1">박스1</div>
<div id = "box2">박스2</div>
<div id = "box3">박스3</div>
<div id = "box4">박스4</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
ul{
list-style-type: none;
}
li {
float: left;
}
a{
display: block;
padding: 10px 20px;
background-color: silver;
/* 밑줄 없애기 */
text-decoration: none;
}
/* 하이퍼링크 속성 a:link a:visited a:hover */
a:link, a:visited{
/* 글자색 검정 */
color : black;
}
a:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="http://www.naver.com">메뉴1</a></li>
<li><a href="http://www.naver.com">메뉴2</a></li>
<li><a href="http://www.naver.com">메뉴3</a></li>
<li><a href="http://www.naver.com">메뉴4</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 전체영역 안여백 밖여백 0px box-sizing 테두리선 포함 */
*{
margin: 0px; padding: 0px; box-sizing: border-box;
}
/* id="container" 너비 1200px 화면전체 가운데 정렬 */
#container{
width: 1200px; margin: 20px auto;
}
/* id="header" 너비 100% 높이 120px 배경색 */
#header{
width: 100%; height: 120px; background-color: yellow;
}
/* id="sidebar" 너비 300px 높이 600px 배경색 왼쪽으로 플로팅 */
#sidebar{
width: 300px; height: 600px; float: left;
background-color: green; float: left;
}
/* id="contents" 너비 900px 높이 600px 배경색 왼쪽으로 플로팅 */
#contents{
width: 900px; height: 600px;
background-color: pink; float: left;
}
/* id="footer" 너비 100% 높이 100px 배경색 왼쪽플로팅 해제 */
#footer{
width: 100%; height: 100px; background: skyblue;
clear: left;
}
</style>
</head>
<body>
<h1>css/test13.html</h1>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<aside id="sidebar">
<h1>사이드바</h1>
</aside>
<section id="contents">
<h1>본문</h1>
</section>
<footer id="footer">
<h1>푸터</h1>
</footer>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/* 전체영역 안여백 밖여백 0px box-sizing 테두리선 포함 */
*{
margin: 0px; padding: 0px; box-sizing: border-box;
}
/* id="container" 너비 1200px 화면전체 가운데 정렬 */
#container{
width: 1200px; margin: 20px auto;
}
/* id="header" 너비 100% 높이 120px 배경색 */
#header{
width: 100%; height: 120px; background-color: yellow;
}
/* id="sidebar" 너비 300px 높이 600px 배경색 왼쪽으로 플로팅 */
#sidebar{
width: 300px; height: 600px; float: left;
background-color: green; float: left;
}
/* id="contents" 너비 700px 높이 600px 배경색 왼쪽으로 플로팅 */
#contents{
width: 700px; height: 600px;
background-color: pink; float: left;
}
/* id="rightsidebar" 너비 200px 높이 600px 배경색 왼쪽으로 플로팅*/
#rightsidebar{
width: 200px; height: 600px; float: left;
background-color: blue; float: left;
}
/* id="footer" 너비 100% 높이 100px 배경색 왼쪽플로팅 해제 */
#footer{
width: 100%; height: 100px; background: skyblue;
clear: left;
}
</style>
</head>
<body>
<h1>css/test14.html</h1>
<div id="container">
<header id="header">
<h1>사이트 제목</h1>
</header>
<aside id="sidebar">
<h1>사이드바</h1>
</aside>
<section id="contents">
<h1>본문</h1>
</section>
<aside id="rightsidebar">
<h1>오른쪽사이드바</h1>
</aside>
<footer id="footer">
<h1>푸터</h1>
</footer>
</div>
</body>
</html>
반응형