728x90
May 10 2022
1. 태그의 크기
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* block level element */
h1 {
border-width: 5px;
border-color: red;
border-style: solid;
display:inline; /* inline 처럼 사용 */
}
/* inline element */
a {
border-width: 5px;
border-color: red;
border-style: solid;
display:block; /* block 처럼 사용 */
}
</style>
<body>
<h1> CSS </h1>
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, <a href="https://www.naver.com/">CSS</a>)는
</body>
</html>
👉 'a' 태그의 부피와 'h1' 태그의 부피가 서로 다름을 확인할 수 있다.
👉 해당 태그의 쓰임과 성격에 따라 부피가 달라진다.
- block level element : 화면 전체를 사용
- inline element : 컨텐트만큼의 부피
위의 코드를 간략하게 바꾸면,
<style>
h1, a {
border: 5px solid red;
}
</style>
2. 컨텐트 크기 설정
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1 {
border: 5px solid red;
padding: 20px; /* 컨텐트와 테두리 간격 */
margin: 20px; /* 테두리와 테두리 간격 */
display: block;
width: 100px; /* 태그 크기 변경 */
}
</style>
</head>
<body>
<h1> CSS </h1>
</body>
</html>
👉 각각의 컨텐트의 크기를 설정할 수 있다.
정리하자면,
- 태그의 크기는 쓰임과 성격에 따라 다르다.
- 화면 전체를 사용하거나 해당 태그의 크기만큼만 사용
- width 혹은 height로 크기 변경 가능
- margin : border 간의 간격
- padding : content와 border의 간격
참고
https://www.youtube.com/watch?v=ONcmkf07EuI&list=PLuHgQVnccGMDaVaBmkX0qfB45R_bYrV62
https://www.quora.com/How-can-I-understand-Positioning-Padding-and-Margins
728x90
'WEB > CSS' 카테고리의 다른 글
| [생활코딩] CSS : #1 선택자 🚩 (0) | 2022.05.30 |
|---|
