개발나라 스용공주

[생활코딩] CSS 왕기초 12장 - Visual Studio Code / 박스 모델 본문

WEB/HTML & CSS

[생활코딩] CSS 왕기초 12장 - Visual Studio Code / 박스 모델

스용공주 2024. 6. 25. 01:41
728x90
728x90

이번 글은 아래 강의 내용을 바탕으로 작성되었습니다.

(생활코딩)

https://www.youtube.com/watch?v=MLjCVUspcDo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=8

 

 

[ 박스 모델 ]

박스 모델을 사용하여 해당 문자가 얼마만큼의 공간을 차지하고 있는지 확인할 수 있다.

  • border-width : 선 두께
  • border-color : 선 색상
  • border-style : 선 모양

아래 코드와 결과를 보면 <h1> 태그는 화면 전체를 차지한다는 것을 확인할 수 있다.

* 이렇게 화면 전체를 차지하는 것을 block level element이라고 부른다.

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <style>
        h1 {
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
        }
        a {
            text-decoration : none;
        }
        #red {
            color:red;
        }
        .green {
            color : green;
        }
    </style>
</head>
<body>
    <h1>Youtuber</h1>
    <ol>
        <li><a href="index.html" class="green">Youtube</a></li>
        <li><a href="2.html" class="green" id="red">Contents</a></li>
    </ol>
</body>
</html>

 

 

반면 아래 코드와 같이 Contents 부분을 보면 제목이 아닌 부분은 딱 본인의 사이즈만큼만 사용된다는 것을 볼 수 있다.

* 이렇게 자기 자신의 콘텐츠 크기만큼을 갖는 태그들을 inline element이라고 부른다.

<style>
        #red {
            color:red;
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
        }
    </style>

 

 

 

따라서, 어떤 태그는 화면 전체를 쓰고 어떤 태그는 부분만 사용한다는 것이 포인트다.

 

 

 

[ block속성과 inline속성 바꿔주기 ]

display를 사용하면 block과 inline 속성을 변경해줄 수 있다.

제목 태그도 일반 태그들처럼 공간전체를 사용하지 않고 그 부분만 사용해줄 수 있다.

 

아래 코드와 같이 display를 제목태그가 기본적으로 가지고 있는 block에서 inline으로 변경해주는 것이다.

=> display : inline;

<style>
        h1 {
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
            display : inline;
        }
        }
    </style>

 

만약 <h1>태그들을 안보이게 하고싶다면 display : none;으로 해주면 된다.

<style>
        h1 {
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
            display : none;
        }
    </style>

 

 

 

[ 중복되는 코드 줄이기 ]

아래 코드를 보면 h1과 red가 중복되는 코드를 가지고 있는 것을 확인할 수 있다,

<style>
        h1 {
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
        }
        a {
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
        }
    </style>

 

아래 코드와 같이 ,(콤마)를 이용하여 중복을 줄여줄 수 있다.

* 서로 다른 태그에서 같은 코드가 중복될 경우 사용한다.

<style>
        h1, a {
            border-width : 5px;
            border-color: aquamarine;
            border-style : solid;
        }
    </style>

 

또는 아래 코드와 같이 border라는 속성에 한번에 값들을 입력하여 여러가지 세분화되는 border 내 속성값들을 한번에 작성해줄 수 있다.

* 5px aquamarine solid의 순서는 아무 상관이 없다.

<style>
        h1, a{
            border : 5px aquamarine solid;
        }
    </style>

 

 

 

[ Padding ]

아래 사진을 보면 Youtuber라는 글씨를 드래그해봤을 때 글자가 차지하는 공간과 border가 만든 상자 사이에 아무런 빈틈이 없는 것을 확인할 수 있다.

 

그 사이에 공간을 만들어주려면 Padding을 사용해주면 된다.

그럼 아래 사진과 같이 상자와 글자 사이에 20px의 간격이 벌어진 것을 확인할 수 있다.

<style>
        h1 {
            border : 5px aquamarine solid;
            padding : 20px;
        }
    </style>

 

 

[ Margin ]

아래 코드와 같이 h1태그로 감싸져있는 Youtuber 글씨를 하나 더 생성하였더니 다음과 같이 두 글씨 상자 사이에 간격이 벌어져있다.

<!doctype html>
<html>
<head>
    <title>Introduce Youtube</title>
    <meta charset="utf-8">
    <style>
        h1 {
            border : 5px aquamarine solid;
            padding : 20px;
        }
    </style>
</head>
<body>
    <h1>Youtuber</h1>
    <h1>Youtuber</h1>
</body>
</html>

 

이를 없애려면 Margin을 이용하여 없앨 수 있다.

* margin : 0;을 통해 간격을 없앨 수 있다.

* 반면 margin에도 padding처럼 값을 입력해주면 원하는 크기만큼 상자 밖의 영역을 벌려줄 수 있다.

<style>
        h1 {
            border : 5px aquamarine solid;
            padding : 20px;
            margin : 0;
        }
    </style>

margin : 0;의 결과
margin = 50px;의 결과

 

 

[ width ]

제목과 같이 display가 block이면 콘텐츠 크기가 아닌 화면 전체를 장악한다.

그런데 만약 아래와 같이 width : 200px;을 해준다면 h1의 상자 사이즈가 200px 만한 사이즈로 지정된다.

<style>
        h1 {
            border : 5px aquamarine solid;
            padding : 20px;
            margin : 50px;
            display : block;
            width : 200px;
        }
    </style>

 

 

 

[ 구조 총 정리 ]

 

 

728x90
728x90

'WEB > HTML & CSS' 카테고리의 다른 글

[생활코딩] CSS 왕기초 14장 - Visual Studio Code / CSS 일부 요약 (박스 모델)  (0) 2024.06.25
[생활코딩] CSS 왕기초 13장 - Visual Studio Code / 검사하기 (F12)  (0) 2024.06.25
[생활코딩] CSS 왕기초 11장 - Visual Studio Code / CSS 태그 우선순위  (0) 2024.06.21
[생활코딩] CSS 왕기초 10장 - Visual Studio Code / CSS의 style  (0) 2024.06.20
[생활코딩] HTML 왕기초 10장 - Visual Studio Code / 유튜브 동영상 바로 실행하기  (0) 2024.06.20
'WEB/HTML & CSS' Related Articles more
Comments