HRD_훈련/실습
[CSS] Box , Margin, display 실습 (27일차)
리드미.
2023. 6. 22. 12:40
728x90
반응형
문제 1
다음 화면을 보고 코드를 작성하시오.
- box의 개념을 이해하여 코드를 작성하시오.
- div 태그를 id="container" 로 묶어 출력하시오.
▶ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스5개</title>
<style>
#container {
width: 1000px;
margin: 10px auto;
}
.in {
width: 200px;
height: 200px;
border: 2px solid black;
margin-bottom: 10px;
/* margin: 10px 5px 30px 50px; 위 오른쪽 아래 왼쪽 순.(시계방향) */
display: inline-block;
}
.out {
display: block;
}
</style>
</head>
<body>
<div id="container">
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in out"></div>
<div class="in out"></div>
<!-- 클래스를 2개 이상 설정하는 것이 가능하다. -->
</div>
</body>
</html>
문제 2
다음 화면을 보고 코드를 작성하시오.
- box의 개념을 이해하여 코드를 작성하시오.
- div 태그를 id="container" 로 묶어 출력하시오.
- br 태그를 사용하지 않고 작성하시오.
▶ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스10개</title>
<style>
#container {
width: 1000px;
margin: 50px auto;
}
.in {
width: 100px;
height: 100px;
border: 2px solid black;
margin: 10px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div>
<div class="in"></div>
<div class="in"></div>
</div>
<div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
<div class="in"></div>
<div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
<div class="in"></div>
</div>
</div>
</body>
</html>
문제 3
다음 화면과 코드를 이용해 style 코드를 작성하시오.
<body>
<ul>
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
</ul>
</body>
▶ 코드
<style>
ul {
list-style-type: none;
}
li {
width: 100px;
height: 50px;
line-height: 50px;
display: inline-block;
border: 1px solid black;
margin: 10px;
text-align: center;
font-size: 18px;
}
</style>
▶ 출력 결과
728x90
반응형