반응형
Box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 id="css1">CSS1</h1>
<h1 id="css2">CSS2</h1>
<a href="">CSS3</a>
</body>
</html>HTML code
style.css & result
CSS1과 CSS2는 똑같이 <h1> tag를 주었지만
style.css로 인해 box의 크기가 다른 것을 알 수 있습니다.
CSS1과 비교하기 위해
CSS2를 살펴보면
개발자 검사 page에서 CSS2 box 위에 마우스를 올려두면
해당 box의 영역이 표시되며,
클릭 시 해당 box의 margin, border, padding, content의 입력값이 나타납니다.
오른쪽 이미지는
CSS2에 margin과 padding을 20px씩 주었기에
빨간 줄로 표시한 20px씩 입력되었음을 나타냅니다.
그리고
CSS1 <h1> tag는 block level element의 속성을 가지므로
화면의 가로의 크기가 변하더라도
box의 크기가 화면 가로 전체를 차지합니다.
(CSS3 <a> tag는 기본적으로 inline element의 속성을 가지므로
content 자기 자신의 크기만큼 box의 크기를 가집니다.)
하지만
CSS2의 width를 200px을 입력함으로 인해
화면의 크기가 크든 작든 200px로 고정되어 있습니다.
반응형
Summary (요약)
개발자 검사(f12)에 들어가면 위의 이미지와 같이
margin, border, padding, content로 경계가 나뉘어있습니다.
CSS로 box에 입력값을 줘서 box의 크기, 위치 등을 변경할 수 있다.
Box를 알아보는 시간이었습니다.
틀린 내용은 댓글로 알려주시면 감사하겠습니다.
반응형
