3. display 속성 -바닥부터 시작하는 CSS-

이전 다음 2024.5
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

2016. 11. 20. 09:30 from COMPUTER/CSS

display 속성이란 태그의 내용(contents)이 어떤 형식으로 화면에 출력이 되는가를 결정하는 속성입니다.

display속성을 알기 위해서는 각각의 태그가 어떤 요소에 속하는지 알아야 하고 각 요소의 특징을 잘 파악하고 있어야

좋은 레이아웃을 만들 수 있게 됩니다.

1) block 요소: <div>, <p>, <ul>, <li>, <dl>, <dt>, <dd>, <form>, <header>, <footer>, <section>, <h1>~<h6> 태그 등은

기본적으로 block속성을 가지고 있습니다.

block 요소는 기본적으로 아래로 붙여 나가는 특징이 있습니다.

bock 속성은 그 자체로 한 줄을 완전히 차지합니다. 그 다음의 요소는 그 아래에 출력됩니다.

<p>태그는 구문을 표현하는 태그이고 자체적으로 'margin' 값을 가지고 있어서 <p> 태그 사이에는 기본적으로 공백이 발생합니다.

다음은 각 태그에 모양을 정확히 알기 위해서 배경값 또는 경계선을 지정한 예입니다.

<p>태그의 예

<html>
<head>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>
<body>
    <p> 요거 첫 번째 문장입니다.</p>
    <p>요건 두 번째 문장입니다.</p>
    <p>세 번째 문장입니다.</p>
</body>
</html>

<html>
<head>
    <style>
        p {
            background: yellow;
        }
    </style>
</head>
<body>
    <p> 요거 첫 번째 문장입니다.</p>
    <p>요건 두 번째 문장입니다.</p>
    <p>세 번째 문장입니다.</p>
</body>
</html>

<div>태그는 <p>태그와는 다르게 줄 사이에 여백이 없이 붙어서 출력이 됩니다.

border값을 지정할 때는 선의 두께, 스타일, 색깔 순으로 지정을 하고 각각의 값은 공백으로 구분합니다. 쓸데없이 콤마(,)를 쓰는 실수를 하지 마세요.

<div>태그의 예

<html>
<head>
    <style>
        div {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div> 요거 첫 번째 문장입니다.</div>
    <div>요건 두 번째 문장입니다.</div>
    <div>세 번째 문장입니다.</div>
</body>
</html>

<html>
<head>
    <style>
        div {
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div> 요거 첫 번째 문장입니다.</div>
    <div>요건 두 번째 문장입니다.</div>
    <div>세 번째 문장입니다.</div>
</body>
</html>

* block 요소에는 margin, width, height 속성이 적용이 되지만 width값으로 요소의 폭을 줄여도 보이지 않는 margin같은 값이 화면의 가로 폭을 꽉 채워 여전히 다음 요소는 줄 바꿈이 일어납니다.

예

<html>
<head>
    <style>
        div {
            width: 200px;
            border: 1px solid;
            margin: 5px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>div태그에 width값을 줘서 길이를 줄여도</div>
    <div>여전히 block요소이므로 이 글이 연속되어 출력되지 않고</div>
    <div>아래로 줄 바꿈이 일어난다는 말입니다.</div>
</body>
</html>

<html>
<head>
    <style>
        div {
            width: 200px;
            border: 1px solid;
            margin: 5px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>div태그에 width값을 줘서 길이를 줄여도</div>
    <div>여전히 block요소이므로 이 글이 연속되어 출력되지 않고</div>
    <div>아래로 줄 바꿈이 일어난다는 말입니다.</div>
</body>
</html>

block 요소인 <div>태그에 height값을 지정한 경우 컨텐츠가 길면 넘치는 문제가 생깁니다.

이때는 overflow 속성을 이용해서 해결할 수 있는데 이 부분은 overflow를 다룰 때 자세히 알아보겠습니다.

예

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 50px;
            border: 1px solid red;
            margin: 5px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>div태그에 내용이 width값 보다 긴 경우에는 아래로 아래로 내려가면서 출력이 되는데 문제는 height값을 줘서 높이에도 제한이 생긴다면 어떻게 출력이 되는감?</div>
</body>
</html>

<html>
<head>
    <style>
        div {
            width: 300px;
            height: 50px;
            border: 1px solid red;
            margin: 5px;
            background: yellow;
        }
    </style>
</head>
<body>
    <div>div태그에 내용이 width값 보다 긴 경우에는 아래로 아래로 내려가면서 출력이 되는데 문제는 height값을 줘서 높이에도 제한이 생긴다면 어떻게 출력이 되는감?</div>
</body>
</html>

2) inline 요소: <span>, <a>, <img>, <strong>, <input>, <mark>, <em>, <abbr> 등은 기본값으로 inline 속성이 적용되는 대표적인 태그들입니다.

inline 요소는 옆으로 붙여 나가는 특징이 있습니다. 필요한 폭만 가집니다.

* margin-top, margin-bottom 속성은 적용이 안 되고 대신 line-height속성이 적용됩니다.

* width, height 속성은 적용이 안 됩니다. (태그가 품고 있는 내부 요소의 부피에 맞춰 집니다.)

* inline 태그가 연속될 경우 좌우 5px 정도의 외부 여백이 브라우저 기본 설정에 의해 자동으로 만들어 집니다.

* block은 inline을 포괄하는 큰 개념이므로 inline 태그 안에 block 태그를 넣으면 문법 오류가 됩니다.

예

X : <a href=“#”> <p>문장입니다.</p> </a>

O: <p><a href=“#”> <p>문장입니다.</a></p>

대표적인 inline 요소인 <span>태그에 width와 height값을 적용해 보면 다음과 같이 아무런 영향이 없습니다.

예

<html>
<head>
    <style>
        span {
            width: 200px;
            height: 20px;
            border: 1px solid red;
            background: yellow;
        }
    </style>
</head>
<body>
    <span>첫 번째 span</span>
    <span>두 번째 span</span>
    <span>세 번째 span</span>
</body>
</html>

<html>
<head>
    <style>
        span {
            width: 200px;
            height: 20px;
            border: 1px solid red;
            background: yellow;
        }
    </style>
</head>
<body>
    <span>첫 번째 span</span>
    <span>두 번째 span</span>
    <span>세 번째 span</span>
</body>
</html>

대표적인 inline태그인 <span>태그에 margin을 지정하면 좌우 마진은 효과가 있습니다.

하지만 상하 마진은 효과가 없어서 <div>의 영역과는 기본적인 간격밖에 보이지 않습니다.

예

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: yellow;
            padding: 5px;
            margin: 10px;
        }
        
        span {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: lightgreen;
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>div태그 1 입니다</div>
    <div>div태그 2 입니다</div>
    <span>span태그 1 입니다</span>
    <span>span태그 2 입니다</span>
    <div>div태그 3 입니다</div>
</body>
</html>

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: yellow;
            padding: 5px;
            margin: 10px;
        }
        
        span {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: lightgreen;
            padding: 5px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div>div태그 1 입니다</div>
    <div>div태그 2 입니다</div>
    <span>span태그 1 입니다</span>
    <span>span태그 2 입니다</span>
    <div>div태그 3 입니다</div>
</body>
</html>

두 번째 <span>태그에만 id명을 사용해서 line-height값을 지정한 경우, 첫 번째와는 다르게 간격이 벌어진 것을 볼 수 있지요?

예

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: yellow;
            padding: 5px;
            margin: 10px;
        }
        
        span {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: lightgreen;
            padding: 5px;
        }
        
        #span2 {
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>div태그 1 입니다</div>
    <span>span태그 1 입니다</span>
    <div>div태그 2 입니다</div>
    <span id="span2">span태그 2 입니다</span>
    <div>div 2</div>
</body>
</html>

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: yellow;
            padding: 5px;
            margin: 10px;
        }
        
        span {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background-color: lightgreen;
            padding: 5px;
        }
        
        #span2 {
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>div태그 1 입니다</div>
    <span>span태그 1 입니다</span>
    <div>div태그 2 입니다</div>
    <span id="span2">span태그 2 입니다</span>
    <div>div 2</div>
</body>
</html>

만약에 block 요소인 <div>를 inline 속성으로 바꾸거나 <span>을 block 속성으로 바꾸려고 한다면 CSS로 dispaly 속성을 바꿔 주면 됩니다.

예

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background: lightgreen;
            padding: 5px;
            margin: 10px;
            display: inline;
        }
        
        span {
            width: 260px;
            height: 20px;
            border: 1px solid;
            background: yellow;
            padding: 5px;
            margin: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <div>display: inline 을 지정한 div태그 1</div>
    <div>display: inline 을 지정한 div태그 2</div>
    <span>display: block 을 지정한 span태그 1</span>
    <span>display: block 을 지정한 span태그 2</span>
</body>
</html>

<html>
<head>
    <style>
        div {
            width: 200px;
            height: 20px;
            border: 1px solid;
            background: lightgreen;
            padding: 5px;
            margin: 10px;
            display: inline;
        }
        
        span {
            width: 260px;
            height: 20px;
            border: 1px solid;
            background: yellow;
            padding: 5px;
            margin: 10px;
            display: block;
        }
    </style>
</head>
<body>
    <div>display: inline 을 지정한 div태그 1</div>
    <div>display: inline 을 지정한 div태그 2</div>
    <span>display: block 을 지정한 span태그 1</span>
    <span>display: block 을 지정한 span태그 2</span>
</body>
</html>

3) inline-block:

inline 속성을 가진 태그에 width와 height값을 주려고 할 때 사용하는 것이 inline-blick 속성입니다.

기본 값으로 inline-block 속성을 가진 태그는 없습니다. CSS에서 {display: inline-bock;} 으로 속성 값을 바꾸어 주어야 합니다.

<div>를 왼쪽부터 오른쪽으로 붙여 나가려면 inline-block속성으로 바꾸거나 float:left;로 바꾼다. (float 속성 배우기)

이렇게 속성을 바꾸면 <div> 영역이 가로로 붙어 나가다가 자리가 모자라면 아래로 내려갑니다.

* margin, width, height 속성을 적용할 수도 있고 line-height속성도 적용 가능합니다.

* 기본적으로 태그가 품고 있는 내부요소의 부피에 맞춰 지지만 width와 height를 지정해서 원하는 크기로 변경 시킬 수도 있습니다.

* inline-block이 연속될 경우 역시 5px정도의 여백이 자동으로 생성됩니다.

(단, ie7 이하는 지원하지 않는데 *display:inline; zoom:1; 속성을 지정하면 inline-block 요소처럼 사용할 수 있습니다.)

예

<html>
<head>
    <style>
        span {
            width: 300px;
            height: 100px;
            border: 1px solid;
            background: lightblue;
            padding: 5px;
            display: inline-block
        }
    </style>
</head>
<body>
    <span>span태그에 inline-block을 지정했더니 폭과 높이 값이 지정되네. </span>
    <span>span태그에 inline-block을 지정했더니 폭과 높이 값이 지정되네. </span>
</body>
</html>

<html>

<head>
    <style>
        span {
            width: 300px;
            height: 100px;
            border: 1px solid;
            background: lightblue;
            padding: 5px;
            display: inline-block
        }
    </style>
</head>

<body>
    <span>span태그에 inline-block을 지정했더니 폭과 높이 값이 지정되네. </span>
    <span>span태그에 inline-block을 지정했더니 폭과 높이 값이 지정되네. </span>
</body>

</html>

4) none:

display: none;을 지정하면 해당 요소는 화면에서 사라집니다. 자취도 없이......

있어야 할 자리도 남기지 않습니다. 그래서 나타났다 사라지는 메뉴 등을 만들 때 사용되기도 합니다.

이와는 다르게 {visibility: hidden;}라는 것은 visibility 속성을 hidden으로 바꿔 주는데 화면에는 보이지 않지만 그 위치는 빈 공간으로 남게 됩니다.

visibility의 속성값은 기본으로 visible이 지정되어 있고 hidden, collapse(IE에서만 적용 됨) 등이 있습니다.

화면에 두 개의 박스를 출력한 경우.

<html>
<head>
    <style>
        #div1 {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background: lightblue;
        }
        
        #div2 {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div id="div1">첫 번째 div 영역</div>
    <div id="div2">두 번째 div 영역</div>
</body>
</html>

<html>

<head>
    <style>
        #div1 {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background: lightblue;
        }
        
        #div2 {
            width: 50px;
            height: 50px;
            border: 1px solid;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div id="div1">첫 번째 div 영역</div>
    <div id="div2">두 번째 div 영역</div>
</body>

</html>

첫 번째 영역을 display:none;으로 설정 한 경우.

<html>
<head>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightblue;
            display: none;
        }
        
        #div2 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div id="div1">첫 번째 div 영역</div>
    <div id="div2">두 번째 div 영역</div>
</body>
</html>

<html>
<head>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightblue;
            display: none;
        }
        
        #div2 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div id="div1">첫 번째 div 영역</div>
    <div id="div2">두 번째 div 영역</div>
</body>
</html>

첫 번째 영역이 보이지도 않고 자리도 남아있지 않아서 두 번째 영역이 위로 차고 올라가 있습니다.

첫 번째 영역을 visibility:hidden;으로 한 경우.

<html>
<head>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightblue;
            visibility: hidden;
        }
        
        #div2 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightgreen;
        }
    </style>
</head>
<body>
    <div id="div1">첫 번째 div 영역</div>
    <div id="div2">두 번째 div 영역</div>
</body>
</html>

<html>

<head>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightblue;
            visibility: hidden;
        }
        
        #div2 {
            width: 100px;
            height: 100px;
            border: 1px solid;
            background: lightgreen;
        }
    </style>
</head>

<body>
    <div id="div1">첫 번째 div 영역</div>
    <div id="div2">두 번째 div 영역</div>
</body>

</html>

첫 번째 영역이 보이지는 않지만 자리는 남아 있습니다.

두 번째 영역은 보이지 않는 첫 번째 영역에 밀려서 아래쪽에 출력됩니다.

자 이렇게 해서 display의 속성을 알아 보았습니다. 다음은 float을 용한 정렬방법을 알아 보겠습니다.

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

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

4. float 속성 -바닥부터 시작하는 CSS- (0)	2016.12.08
CSS의 절대단위와 상대단위 -막간학습- (0)	2016.12.07
display 속성의 table계열 속성 값 -막간학습- (0)	2016.12.04
2. CSS의 속성 요약 -바닥부터 시작하는 CSS- (0)	2016.11.19
1. 들어가기(개념, 선언 방식, 선택자) -바닥부터 시작하는 CSS- (0)	2016.11.18

Posted by star story :

나라 공부방 RSS FEED

달력

카테고리

공지사항

태그목록

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

3. display 속성 -바닥부터 시작하는 CSS-

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

티스토리툴바

티스토리툴바