오늘은 CSS box model에 대해서 배웠다
box model이란, 디자인과 레이아웃이다. 여백, 테두리, 패디딩 및 모든 HTML 요소를 감싸는 상자를 뜻한다.
box model을 살펴보기 전, 태그가 화면에 차지하는 크기 개념을 이해하기 위해 block level element, iline element를 이해하려고 한다.
태그마다 화면에 사용하는 크기가 다르다. 화면 전체를 쓰는 태그를 블록 레벨 엘리먼트(block level element), 자기 자신의 크기 콘텐츠 크기만큼을 쓰는 태그를 인라인 레벨 엘리먼트(inline element)라고 한다.
<h1> 태그가 block level element 중 하나, <a> 태그가 iline element중 하나이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1, a{
border:5px solid red;
}
</style>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language.
</body>
</html>
<h1> 태그가 화면 전체를 사용하고, <a> 태그가 자기 자신의 크기 콘텐츠 크기만큼을 사용하는 것을 알 수 있다.
display 속성을 사용하여 화면에서 차지하는 콘텐츠 크기를 조절할 수 있고, 태그를 자체를 안보이게 할 수도 있다.
display란, 속성값으로 block, inline, none을 지정해 어떤 태그가 표시되는 방법을 완전히 바꾸는 속성이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h1{
border:5px solid red;
display: inline;
}
a{
border:5px solid red;
display: block;
}
</style>
</head>
<body>
<h1>CSS</h1>Cascading Style Sheets (<a href="https://ko.wikipedia.org/wiki/CSS">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language.
</body>
</html>
태그를 숨기고 싶을 경우에는 display: none;을 추가 하면된다.
<style>
h1{
border:5px solid red;
display: inline;
display: none;
}
a{
border:5px solid red;
display: block;
}
</style>
이제 box model에 대한 설명을 하겠다.
콘텐츠와 테두리 사이의 여백을 주고 싶다면 padding 속성, 테두리와 테두리 사이의 간격을 주고 싶다면 margin 속성, 테두리 두께 border 속성, 넓이 지정 width 속성이 있다.
margin : 테두리와 테두리 사이 간격
<style>
h1{
border:5px solid red;
margin:0px;
}
</style>0px로 설정하자 테두리 사이 간격이 없음을 알 수 있다.
padding : 콘텐츠와 테두리 사이의 여백
<style>
h1{
border:5px solid red;
margin:0px;
padding:20px;
}
</style>padding:20px로 설정하자 콘텐츠와 테두리 간격이 늘어남
width : 태그의 크기 변경
<style>
h1{
border:5px solid red;
margin:0px;
padding:20px;
display:block;
width: 100px;
}
</style>width: 100px;를 추가하자 태그 크기가 커짐
참고) h1 태그는 화면 전체를 쓰는 태그를 블록 레벨 엘리먼트(block level element)여서 display:block이 생략되어 있는 상태
'소프트웨어 > JavaScript' 카테고리의 다른 글
| [CSS] Media Query(미디어 쿼리) 소개와 활용 (1) | 2023.01.27 |
|---|---|
| [CSS] Grid(그리드) 소개와 활용 (0) | 2023.01.27 |
| [CSS] text size property / text align property (0) | 2023.01.25 |
| [CSS] <style> 글씨 색깔 변경, 링크 밑줄 제거 (0) | 2023.01.24 |
| [HTML] 웹사이트 동영상, 댓글, 채팅, 방문자 분석기 기능 추가 (0) | 2023.01.23 |
