<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {width: 100px; height: 100px; background-color: red; margin: 10px;}
#box-1 {border: 10px solid black;}
#box-2 {border: 10px solid black; padding: 50px;}
#box-3 {border: 10px solid black; margin: 50px;}
#box-4 {border: 10px solid black; margin-left: -60px;}
#box-4:hover {margin-left: 0px;}
</style>
</head>
<body>
<h1>CSS 연습/h1>
<h2>박스 모델</h2>
<div id="box-1">가나다</div>
<div id="box-2">가나다</div>
<div id="box-3">가나다</div>
<div id="box-4">가나다</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {width: 120px; height: 120px;}
.box {display: block;} /* 블록 엘리먼트로 변경 */
.box {display: none;} /* 화면에 표시되지 않도록 변경 */
</style>
</head>
<body>
<h1>CSS 연습하기</h1>
<div>
<img class="box" src="images/(1).jpg"/>
<img class="box" src="images/(2).jpg"/>
<img class="box" src="images/(3).jpg"/>
<img class="box" src="images/(4).jpg"/>
<img class="box" src="images/(5).jpg"/>
<img class="box" src="images/(6).jpg"/>
<img class="box" src="images/(7).jpg"/>
<img class="box" src="images/(8).jpg"/>
</div>
<hr/>
<div>
<div><img src="images/(1).jpg"></div>
<div><img src="images/(2).jpg"></div>
<div><img src="images/(3).jpg"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box-2, #box-3 {display: none;}
</style>
</head>
<body>
<div>
<button onclick="showBox1()">뉴스</button>
<button onclick="showBox2()">연예</button>
<button onclick="showBox3()">스포츠</button>
</div>
<div id="box-1">
<ul>
<li>클릭하면 바뀜</li>
<li>클릭하면 바뀜</li>
<li>클릭하면 바뀜</li>
</ul>
</div>
<div id="box-2">
<ul>
<li>가나다</li>
<li>가나다</li>
<li>가나다</li>
</ul>
</div>
<div id="box-3">
<ul>
<li>류현진 사이영상 수상</li>
<li>류현진 사이영상 수상</li>
<li>류현진 사이영상 수상</li>
</ul>
</div>
<script>
function hideAllbox() {
document.getElementById("box-1").style.display = "none";
document.getElementById("box-2").style.display = "none";
document.getElementById("box-3").style.display = "none";
}
function showBox1() {
hideAllbox();
document.getElementById("box-1").style.display="block";
}
function showBox2() {
hideAllbox();
document.getElementById("box-2").style.display="block";
}
function showBox3() {
hideAllbox();
document.getElementById("box-3").style.display="block";
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 4방향 모두 */
#btn-1 {padding: 20px; }
/* top/bottom right/left */
#btn-2 {padding: 20px 10px; }
/* top right bottom left 시계 방향 */
#btn-3 {padding: 80px 40px 20px 10px; }
#btn-4 {padding-top: 80px; padding-bottom: 20px; }
span {padding: 10px;}
#sp-1 {border:1px solid black;}
#sp-2 {border:2px dotted green;}
#sp-3 {border-bottom: 3px dashed red;}
</style>
</head>
<body>
<h1>CSS 연습하기</h1>
<h2>패딩 설정</h2>
<div>
<button id="btn-1">클릭</button>
<button id="btn-2">클릭</button>
<button id="btn-3">클릭</button>
<button id="btn-4">클릭</button>
</div>
<h2>테두리 설정</h2>
<div>
<span id="sp-1">테두리연습</span>
<span id="sp-2">테두리연습</span>
<span id="sp-3">테두리연습</span>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {padding: 10px; border: 1px solid black;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="left">left</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {width: 100px; height: 100px; margin: 10px; background-color: red;}
/*
float 속성
- html 요소(태그)를 웹 문서의 위에 떠 있게 만든다.
- 떠 있게
*/
#box-1 {float: left;}
#box-2 {float: left;}
#box-3 {float: left;}
#box-4 {float: right;}
</style>
</head>
<body>
<div id="box-1">박스1</div>
<div id="box-2">박스2</div>
<div id="box-3">박스3</div>
<div id="box-4">박스4</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {padding: 20px; margin: 10px;}
#box-1 {float: left; background-color: #ffd800; width: 200px; height: 300px;}
#box-2 {float: left; background-color: #0094dd; width: 200px; height: 150px;}
#box-3 {clear:both; background-color: #00ff21;}
#box-4 {clear:both; background-color: #ff00ff;}
</style>
</head>
<body>
<div id="wrapper">
<div id="box-1" class="box">박스1</div>
<div id="box-2" class="box">박스2</div>
<div id="box-3" class="box">박스3</div>
<div id="box-4" class="box">박스4</div>
</div>
</body>
</html>