*스타일(style)
(이번만 head 코드 통째로 집어넣어 두겠음. 이후 글에서는 언급 없으면 head 안 style 아래에 script 위치함.)
head
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스타일</title>
<script src="js/jquery-3.7.1.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
<script>
$(document).ready(function(){
$('.box').css({
width: 500 / 2,
height: 300 * 1.3,
backgroundColor: "brown",
marginBottom: 50 + 20
});
$('.box:nth-child(2)').css({
backgroundColor: "teal"
});
}); //jQuery end
</script>
</head>=> 기본 단위는 px로 지정되어 있으며, 생략 가능.
body
<div class="box"></div>
<div class="box"></div>*제이쿼리 css 연습
script
$(document).ready(function(){
$('.box').css({
width: 300,
height: 300,
backgroundColor: "gray",
display: "flex",
justifyContent: "center",
alignItems: "center"
});
$('.in_box').css({
width: 100,
height: 100,
backgroundColor: "gold",
border: "3px dashed black"
});
});body
<div class="box">
<div class="in_box"></div>
</div>
10분의 정리로 10시간을 아낄 수 있다는 마음으로 글을 작성하고 있습니다💕