각각의 태그 부피감 결정
(중요도 순 : 선택자 -> box model ... )
Q. h1태그는 줄바꿈이 되지만 링크는 자동 줄바꿈이 없는가?
확인하려면 h1태그에 테두리를 줘서 확인할 예정
테두리 = border (두께, 선, 색)
<html>
<head>
<style>
h1{
border: 10px solid red;
}
a{
border: 10px solid red;
}
</style>
</head>
<body>
<h1>WEB</h1>
<h1>WEB</h1>
Lorem ipsum dolor sit<a href="http://w3c.org">amet</a> ....등등
A.
h1 태그는 화면 전체를 사용,
-> h1 = block level element
a 태그는 컨텐츠 크기만큼 사용
-> a, img = inline element
선언이 똑같은 경우
<style>
h1, a {
border: 10px solid red;
}
</style>
각각의 태그는 기본 디자인이 존재, 하지만 css로 변경(=제어)은 가능
display : 가장 큰 틀의 규범을 결정하는 속성
예. inline, block, none, grid
Q. 텍스트와 테두리 사이 여백
간격 = padding
<style>
h1{
border: 10px solid red;
padding: 30px;
}
</style>
<style>
h1{
border: 10px solid red;
padding: 30px;
margin: 50px;
}
</style>
위 50px 아래 50px 경우 중간에 100px 만큼 떨어져야 하는데
중간 공백이 100px 만큼 안 보이는 이유는 (수직인 경우) 마진 값이 겹쳐지는 현상으로 50 만큼 떨어진다.
220322_웹기초_css1 인강 1:42:32