HTML

html의 box-sizing, display, visibility속성에 대해 알아봅시다.

Crucifi 2019. 10. 2. 00:35

이번 시간에는 html의 여러 가지 속성에 대해 차례대로 알아보는 시간을 가지도록 하겠습니다.

 

1.box-sizing

2.display

3.visibility_opacity

 

 

 

 

1.box-sizing

 

box-sizing속성은 padding적용시 넓이, 높이에 영향을 주는 것을 방지하는 속성입니다.

인터넷 익스플로어9,10버전 이상만 사용 가능하고 그 전 버전 들은 사용 불가능입니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{width: 100px; height: 100px; margin: 20px; padding: 20px; color: tomato;}
        div:first-child { background-color: yellowgreen;}
        div:last-child { background-color: aqua;
                         box-sizing: border-box;
                        }
    </style>
</head>
<body>
    <div>Lorem ipsum dolor sit amet consectetur.</div>
    <div>Lorem ipsum .</div>
</body>
</html>

 

style태그에 first, last-child속성을 적어서 서로 인접한 두 도형의 간격을 조정합니다.

 

 

2.display

 

여러 가지 도형들을 세로로 배치할 때 사용되는 속성입니다. 가로로 배치하는 일은 드물기 때문에

가로배치를 하면 쓸데가 없습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body > span { background-color: black; 
                      color: thistle;
                      width: 300px;
                      height: 150px;
                      /* span이 인라인요소임 */
                       display: block; 
                       /*가로배치하면 쓸데가없음 
                       display: inline-block; */
                      }
        #box{width: 300px; height: 150px;
            background-color: blueviolet;
            color: cornflowerblue;
            /* display: inline-block;*/
            
            } 
    </style>
</head>
<body>
    <span>dummy</span>
    <div id="box">
        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dignissimos ullam quos? Odio, sint unde.</span>
    </div>
    <span>dummy</span>
</body>
</html>

앞서 포스팅했던 인라인과 블락 요소에 대해 충분히 안다면 설명드릴 게 없는 내용입니다.

 

 

3.visibility_opacity

 

내용적으로는 쓸모가 있지만 시각적으로 별로 필요가 없는 부분이 존재할 때 사용하는 속성으로

display속성을 none으로 하면 그 부분이 삭제가 되고, visibility: hidden;을 한다면 있었던 부분에 

투명한 공간만 생성이 되고 안 보이는 결과를 볼 수 있습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box{height: 100px; background-color: cornflowerblue; color: rgb(220, 20, 20);
             /* display: none;    */
             /* visibility: hidden; */
                opacity: 0.2;    
                }
                hr{ display: none;}
    </style>
</head>
<body>
    <hr>
        <span>dummy</span>
        <div id="box">
            <span>Lorem ipsum dolor sit amet.</span>
        </div>
        <span>dummy</span>
</body>
</html>