CSS와 박스 모델

블록 레벨 요소: 요소 혼자 한 줄을 차지함. <div>, <p>등
인라인 레벨 요소: 줄을 차지하지 않는 요소. <img>, <strong>등

박스 모델: 실체 콘텐츠 영역, 패딩, 박스 테두리, 마진 등의 요소로 구성

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .box1{

            background: crimson;

            width: 400px;

            height: 100px;

        }

        .box2{

            background: blue;

            width: 50%;

            height: 100px;

        }

        div{

            margin: 10px;

        }

    </style>

</head>

<body>

    <div class="box1"></div>

    <div class="box2"></div>

</body>

</html>

display 속성: 블록 레벨 요소를 인라인 레벨 요소로 바꾸거나 인라인 레벨 요소를 블록 레벨 요소로 바꿈

display:block : 해당 요소를 블록 레벨로 지정
display:inline: 블록 레벨 요소를 인라인 레벨로 지정
display:inline-block: 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정
display:none: 해당 요소를 화면에 표시하지 않음. 화면에서 공간도 차지하지 않음

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        #block img{

            display:block;

            margin: 10px;

        }

        nav ul{

            list-style: none;

        }

        nav ul li{

            display: inline;

            margin-right: 20px;

            border-top: 3px solid black;

            padding: 10px 15px;

        }

        nav ul li a{

            text-decoration: none;

            color: black;

            

        }

        nav ul li:hover{

            background-color: #dbdbdb;

        }

    </style>

</head>

<body>

    <div id="block">

    <img src="images/pic1.jpg">

    <img src="images/pic2.jpg">

    <img src="images/pic3.jpg">

    </div>

    <div id="inline">

        <img src="images/pic1.jpg">

        <img src="images/pic2.jpg">

        <img src="images/pic3.jpg">

    </div>



    <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>

nav{

            width: 100%;

            height: 60%;

            background-color: #069;

        }

        nav ul{

            list-style: none;

        }

        nav ul li{

            display: inline-block;

            margin: 20px;

            /*border-top: 3px solid black;*/

            padding: 10px 15px;

        }

        nav ul li a{

            text-decoration: none;

            color: white;

        }







<nav>

        <ul>

            <li><a href="#">애완견종류</a></li>

            <li><a href="#">입양하기</a></li>

            <li><a href="#">건강돌보기</a></li>

            <li><a href="#">더불어살기</a></li>

        </ul>

    </nav>

border-style 속성: 기본값이 none. 화면에 테두리 표시안됨.

hidden: 테두리 나타나지 않음
dashed: 직선으로 된 점선
dotted: 점선
double: 이중선

        p{

            padding: 10px;

            border: 3px dotted black;

        }

        h1{

            padding: 5px;

            border-bottom: 3px solid #ccc;

        }

<h1>박스 모델</h1>

    <p>

    박스 모델은 실제 콘텐츠 영역, 박스와 콘텐츠 영역 사이의 여백인 패딩(padding), 박스의 테두리(border), 그리고 여러 박스 모델 간의 여백인 마진(margin)등의 요소로 구성되어 있습니다.

    </p>

   div{

            width: 200px;

            height: 100px;

            border-width: 5px 10px 15px 20px;

            margin: 15px;

            display: inline-block;

        }

        .round{

            border: 2px solid red;

            border-radius: 20px;

        }

        #bg{

            background: url(images/pic1.jpg) no-repeat;

            background-size: cover;

        }

<div class="round"></div>
<div class="round" id="bg"></div>

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

'Learning > HTML&JavaScript' 카테고리의 다른 글

HTML5 시멘틱 태그 (0)	2020.07.24
CSS 레이아웃 (0)	2020.07.21
스타일과 스타일시트 글꼴 (0)	2020.07.17
<datalist>가 있는 신청서 폼 (0)	2020.07.17
폼 관련 태그들 (0)	2020.07.14