오뚝이개발자

[CSS] CSS 기초3(CSS 박스 모델) 본문

Front-end/CSS

[CSS] CSS 기초3(CSS 박스 모델)

땅어 2020. 7. 6. 21:47
728x90
300x250

박스 모델

<!doctype html>
<html>
<head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
    <style>
        /*
        block level element
        */
        h1{
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
        /*
        inline element
        */
        a{
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2] CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4] The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.[5] In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.
</body>

왜 h 태그는 그냥 써도 줄바꿈이 되는데 a태그는 그렇지 않을까? 답은 box model에서 찾을 수 있다. 위와 같이 style 태그 안에 h1과 a 태그의 border를 표시해보면 아래와 같다.

이처럼 h1 태그는 화면 전체를 쓰고, a 태그는 자신의 부피만큼만 쓰기 때문에 차이가 생기는 것이다. h1과 같은 것은 block level element라 하고, a와 같은 것을 inline element라 한다. display 속성으로 이 역시 바꾸어줄 수 있다.

<!doctype html>
<html>
<head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
    <style>
        /*
        block level element
        */
        h1{
            border-width:5px;
            border-color:red;
            border-style:solid;
            display: inline;
        }
        /*
        inline element
        */
        a{
            border-width:5px;
            border-color:red;
            border-style:solid;
            display: block;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>Cascading Style Sheets (<a href="https://en.wikipedia.org/wiki/Cascading_Style_Sheets">CSS</a>) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.[1] CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.[2] CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts.[3] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content. Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.[4] The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998). The W3C operates a free CSS validation service for CSS documents.[5] In addition to HTML, other markup languages support the use of CSS including XHTML, plain XML, SVG, and XUL.
</body>

참고로 display 속성을 none으로 주면 화면에서 사라지게 할 수 있다.

 

선택자 여러개 지정

위의 코드에서 h1과 a 태그의 속성이 동일하다. 이 경우 중복을 피하기 위해 아래와 같이 써줄 수 있다. 다시 말해, 선택자를 여러개 지정하는 것은 ,(comma)로 할 수 있다.

h1, a{
        border-width:5px;
        border-color:red;
        border-style:solid;
        display: inline;
}

border-...에서도 중복이 존재한다. 이 경우 다음과 같이 써도 무방하다. 5px,solid,red의 순서 역시 상관없다.

h1, a{
        border:5px solid red;
}

 

padding, margin, width

아래와 같이 padding을 추가해주면 content와 border사이에 공간이 생긴다.

h1, a{
        border:5px solid red;
        padding:20px;
}

padding 전
padding 후

 

CSS 박스모델

CSS박스모델은 위와 같다. padding은 콘텐츠와 border사이, margin은 border와 border 사이이다. 따라서 아래와 같이 속성을 줄 수도 있다.

<!doctype html>
<html>
<head>
    <title>WEB1 - HTML</title>
    <meta charset="utf-8">
    <style>
        /*
        block level element
        */
        h1, a{
            border:5px solid red;
            padding: 20px;
            margin: 20px;
            width: 100px;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
    <h1>CSS</h1>
</body>

참고로, margin을 0px로 하면 아래와 같이 된다.

 

728x90
300x250
저작자표시

'Front-end > CSS' 카테고리의 다른 글

[CSS] CSS 기초 6(미디어 쿼리)  (0) 2020.07.10
[CSS] CSS 기초 5(div, span, 그리드)  (0) 2020.07.08
[CSS] CSS 기초 4(경계선, 박스모델 조절)  (0) 2020.07.08
[CSS] CSS 기초2  (0) 2020.07.06
[CSS]CSS기초 1  (0) 2020.06.30
'Front-end/CSS' Related Articles more
Comments