홍강zone

[CSS] 박스 모델 block, inline / padding, margin, width 본문

CSS

[CSS] 박스 모델 block, inline / padding, margin, width

홍강 2023. 3. 26. 23:50

새로운 파일을 만들어준다 html의 기본적 코드를 갖고있다.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>WEB1 - CSS</title>
</head>
<body>

</body>
</html>

h1태그는 줄바꿈이 되었고

a태그는 줄바꿈이 되지 않았다.

이런 차별이 존재하는 이유는 h1태그는 제목 태그인데 제목 태그는 화면 전체를 쓰는것이 편리하기 때문이다.

</head>
<body>
    <h1>CSS</h1>
    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 
    <a href="https://www.boostcourse.org/">CSS</a>는 
    옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.

<style>태그를 이용해 h1태그에 테두리를 적용시켜 준다.

테두리는 border

width:두께 / color:색상 / 스타일(단선,점선,실선):style

solid:단선

<style>
        h1{
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 
    <a href="https://www.boostcourse.org/">CSS</a>는 
    옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
</body>

h1태그는 화면 전체를 사용하는 태그고/* block level element */

a태그는 자기 크기만큼을 사용하는 태그다./* inline element */

h1태그를 자기 크기만큼 쓰고 싶다면 display:inline; 을 적용시켜주고

a태그를 화면 전체를 사용하고 싶다면 display:block; 을 적용시켜준다.

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


a태그도 같이 적용시켜주고 싶다면 스타일 태그안에 똑같이 길게 적을 필요없이

h1,a{}

콤마를 찍어주면 된다.

<style>
        h1,a{
            border-width:5px;
            border-color:red;
            border-style:solid;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 
    <a href="https://www.boostcourse.org/">CSS</a>는 
    옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
</body>

display는 지워줬다.

 


border 또한 중복이기 때문에

border:5px solid red;

순서는 상관없다.

<style>
        h1,a{
            border:5px solid red;
        }
    </style>
</head>
<body>
    <h1>CSS</h1>
    마크업 언어(ex: HTML)가 웹사이트의 몸체를 담당한다면 
    <a href="https://www.boostcourse.org/">CSS</a>는 
    옷과 액세서리처럼 꾸미는 역할을 담당한다고 할 수 있다.
</body>

테두리와 내용 사이에 간격을 넓히려면

padding:20px; 을 적용해준다

 

똑같은 내용 2줄이 있으면 테두리와 테두리간의 간격이 생기는데 이 간격을 없애려면

margin:0; 을 적용해준다.

 

h1은 화면 전체를 사용하기 때문에 테두리상자가 큰데 이것을 줄이려면

width:100px; 값을 적용해준다.

 

구글 이미지 검색에서 css box model을 구글링하면 유용하다.

 

web페이지에서 우클릭-검사를 누르면 개발자 도구가 나와 분석을 할 수 있다.