본문 바로가기
💻 1. 웹개발_Front end/1-3 CSS

[CSS] 04-1 CSS와 박스 모델

by 달님🌙 2021. 9. 5.
반응형

 

1. 블록 레벨 요소와 인라인 레벨 요소

 

① 블록 레벨 요소

- 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소로 요소의 너비가 100%라는 의미

- 해당 요소 좌우에는 다른 요소들이 올 수 없음

- 너비나 마진, 패딩 등을 이용해 크기나 위치 지정

 

② 인라인 레벨 요소

- 줄을 차지하지 않는 요소

- 화면에 표시되는 콘텐츠만큼 영역을 차지하고 나머지 공간에 다른 요소 올 수 있음

- 한 줄에 여러 개의 인라인 레벨 요소 표시 가능

 

③ 블록 레벨 요소와 인라인 레벨 요소를 만드는 태그의 종류

 

 

<예제 – inline-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>블록 레벨 요소와 인라인 레벨 요소</title>
</head>
<body>
    <!--h3+p+span*2+label-->
    <h3>시간이란..</h3>
    <p>내일 죽을 것처럼</p><span>오늘을 살고</span>
    <span>영원히 살 것처럼</span><label>내일을 꿈꾸어라.</label>
</body>
</html>

 

 

2. 박스 모델(box model) – 박스 형태의 콘텐츠

 

① 블록 레벨 요소들은 모두 박스 형태

② 박스 형태의 요소들을 박스 모델이라고 부름

③ 여러 요소들을 원하는 위치에 배치하려면 CSS 박스 모델을 잘 사용해야 함

④ 박스 모델은 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 마진(margin)등 요소로 구성

- 패딩(padding) : 박스와 콘텐츠 영역 사이의 여백

- 마진(margin) : 여러 박스 모델 사이의 여백

 

 

3. width, height 속성 – 콘텐츠 영역의 크기

 

① 실제 콘텐츠 영역의 크기를 지정할 때 너비는 width, 높이는 height 속성을 사용

② 기본형 : 

width: <크기> | <백분율> | auto
height: <크기> | <백분율> | auto

 

③ width, height 속성 값

 

④ 실제 콘텐츠 크기 계산하기

 

<예제 – width-height-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>컨텐츠 영역의 가로길이, 세로길이</title>
    <style>
        .box1 {
            width: 200px;
            height: 100px;
            background: #ff6a00;
        }
        .box2 {
            width: 50%;
            height: 100px;
            background: skyblue;
            padding: 10px;
            border: 5px solid black;
        }
        div {
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

 

 

4. display 속성 – 화면 배치 방법 결정하기

 

① 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿀 때 사용

② 기본형 : 

display: none | contents | block | inline | inline-block | table | table-cell 등

 

③ display: block;

- 해당 요소를 블록 레벨로 지정

- <img> 같은 인라인 레벨 요소도 블록 레벨 요소로 바꿈

 

④ display: inline; - 해당 요소를 인라인 레벨로 지정

- <li>같은 블록 레벨 요소도 인라인 레벨 요소로 바꿈

 

⑤ display: inline-block;

- 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성(너비, 높이, 마진 등)을 지정하고 싶을 때 사용

- 블록 레벨 요소와 인라인 레벨 요소 두 가지 특성을 모두 갖음

 

⑥ display: none;

- 해당 요소를 화면에 표시하지 않고 화면에서의 공간도 차지하지 않음

- visibility: hidden; 화면에서만 감춰지고 공간은 그대로 차지

 

⑦ 기타 display 속성 값들

 

<예제 – display-001.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        div {
            margin: 20px;
            border: 1px solid#ccc;
            border-radius: 5px;
        }
        #inline img {
            margin: 10px;
        }
        #block img {
            display: block;
            margin: 10px;
        }
        nav ul {
            list-style-type: none;
        }
        nav ul li {
            display: inline;
        }
        nav ul li a{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body><!--(div>img*3)*2+nav>ul>(li>a)*4-->
    <div id="inline">
        <p>인라인 이미지</p>
        <img src="images/pic1.jpg" alt="">
        <img src="images/pic2.jpg" alt="">
        <img src="images/pic3.jpg" alt="">
    </div>
    <div id="block">
        <p>블록 이미지</p>
        <img src="images/pic1.jpg" alt="">
        <img src="images/pic2.jpg" alt="">
        <img src="images/pic3.jpg" alt="">
    </div>

</body>
</html>

 

<예제 – display-002.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        nav ul {
            list-style-type: none;
        }
        nav ul li {
            display: inline;
        }
        nav ul li a{
            color: black;
            text-decoration: none;
        }
    </style>
</head>
<body><!--nav>ul>(li>a)*4-->
    <nav>
        <ul>
            <li><a href="#">애완견 종류</a></li>
            <li><a href="#">입양하기</a></li>
            <li><a href="#">건강돌보기</a></li>
            <li><a href="#">더불어살기</a></li>
        </ul>
    </nav>
</body>
</html>

 

<예제 – display-003.html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>display</title>
    <style>
        nav {
            width: 100%;
            height: 60px;
            background-color: #069;
        }
        nav ul {
            list-style-type: none;
        }
        nav ul li {
            display: inline-block;
            margin: 20px;
        }
        nav ul li a{
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body><!--nav>ul>(li>a)*4-->
    <nav>
        <ul>
            <li><a href="#">애완견 종류</a></li>
            <li><a href="#">입양하기</a></li>
            <li><a href="#">건강돌보기</a></li>
            <li><a href="#">더불어살기</a></li>
        </ul>
    </nav>
</body>
</html>

 

 

반응형
저작자표시 비영리 변경금지

'💻 1. 웹개발_Front end > 1-3 CSS' 카테고리의 다른 글

[CSS] 04-3 여백을 조절하는 속성들  (0) 2021.09.05
[CSS] 04-2 테두리 관련 속성들  (0) 2021.09.05
[CSS] 03-3 그라데이션 효과로 배경 꾸미기  (0) 2021.09.05
[CSS] 03-2 배경 색과 배경 이미지  (0) 2021.09.05
[CSS] 03-1 웹에서 색상 표현하기  (0) 2021.09.05

관련글

댓글

티스토리툴바