이진욱의코딩

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

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>

 

'HTML' 카테고리의 다른 글

(HTML,CSS)핀터레스트 스타일 레이아웃 만들기  (0) 2019.10.03
html의 테두리에 대해 알아봅시다.  (0) 2019.10.02
css속성에 대해 알아봅시다.  (0) 2019.09.27
섹션(section)요소에 대해 알아봅시다.  (0) 2019.09.22
오디오, 비디오태그, 기타택스트관련태그, 특수기호에 대해 알아봅시다.  (0) 2019.09.19
'HTML' Related Articles more