잡동사니에도 사랑을

[21.09.16] exam01(05_cssPositioning) - inline / inline-block / block / none / hidden 본문

JAVA_EE/CSS

[21.09.16] exam01(05_cssPositioning) - inline / inline-block / block / none / hidden

luvforjunk 2021. 9. 16. 21:20
728x90
반응형

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<style type="text/css">

div {

        border: 2px solid yellowgreen;

        color: blue;

        background: aliceblue;

}

span {

        border: 3px dotted red;

        background: yellow;

}

</style>

</head>

<body>

        <h3>인라인, 인라인 블록, 블록</h3>

        <hr>

        나는 <div>div</div>입니다. <br><br>

        나는 <div style="display:none">div(none)</div>입니다. <br><br>

        나는 <div style="visibility:hidden;">div(hidden)</div>입니다. <br><br>

        나는 <div style="display: inline">div(inline)</div>입니다. <br><br>

<span>과 똑같은 결과를 얻는다. <span>처럼 글자 영역까지 공간을 잡고 들어간다.

        나는 <div style="display: inline-block; height: 50px">div(inline-block)</div>입니다. <br><br>

        나는 <div>div<span style="display: block">span(block)</span></div>입니다. <br><br>

</body>

</html>

 

결과창

 

728x90
반응형

'JAVA_EE > CSS' 카테고리의 다른 글

[21.09.17] exam03(05_cssPositioning)  (0) 2021.09.17
[21.09.17] exam02(05_cssPositioning) - <a href="#">활용  (0) 2021.09.17
[21.09.16] exam05(04_cssBoxModel) -  (0) 2021.09.16
[21.09.16] exam04(04_cssBoxModel) -  (0) 2021.09.16
[21.09.16] exam03(04_cssBoxModel) -  (0) 2021.09.16
'JAVA_EE/CSS' Related Articles more