안녕하세요? 독학으로 공부하고 있는 학생입니다.
아무리해도, 책에 나와있는 방식으로 나오지 않는데, 무엇이 잘못되었는지 모르겠습니다.
제가 입력한 코드는
<!DOCTYPE html>
<html>
<head><title>박스 모델</title>
<style>
body { background : ghostwhite; }
Span { background : deepskyblue; }
div.box {
background : yellow;
border-style : solid;
border-color : peru;
margin : 40px;
border-width : 30px;
padding : 2opx;
}
</style>
</head>
<body>
<div class="box">
<span> DIVDIVDIV</span>
</div>
</body>
</html>
입니다.
답변을 주시면 감사하겠습니다.
자료를 첨부한 것은, 이것을 실행했을 때 나온 결과입니다.
padding, border, margin 스타일 프로퍼티를 보여주는 목적입니다.
그래서, 공부하시는 분이 잘 안된다고 느껴 힘들었을 겁니다.
다음과 같이 div.box에 width:100px;을 넣으면 div가 100픽셀크기의 고정 크기가 됩니다.
div.box {
background : yellow;
border-style : solid;
border-color : peru;
margin : 40px;
border-width : 30px;
padding : 2opx;
width:100px; // 이 라인을 삽입하세요.
}
다음에 책을 수정할 때는 이것을 추가하여 혼란이 없도록 해야겠습니다.