CSS day11

css 디스플레이(display)

float

css 디스플레이(display)

display 속성은 웹 페이지의 레이아웃을 결정하는 속성으로 display 속성을 사용하면 블록 속성 요소와 인라인 속성 요소를 바꿔 사용 가능하다.

종류	설명
block	언제나 새로운 라인에서 시작하고 해당 라인의 모든 라인을 차지함.
inline	새로운 라인에서 시작하지 않고 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지함.
inline-block	인라인 속성과 블록 속성을 모두 가지고 있으며 너비 높이 패딩 마진을 지정할 수 있음.
none	웹 페이지에서 해당 요소를 표시하지 않고 레이아웃에서 사라짐.

<!--생략-->
...
#inline img{
    width:100px;
    display: inline;
}
#block img{
	display: block;
}
...
<div id="inline">
    <img src="./birthday.png" alt="선물">
    <img src="./birthday.png" alt="선물">
    <img src="./birthday.png" alt="선물">
</div>
<div id="block">
    <img src="./birthday.png" alt="선물">
    <img src="./birthday.png" alt="선물">
    <img src="./birthday.png" alt="선물">
</div>
...
<!--생략-->

결과를 보면 inline을 적용한 div 내 이미지들은 각 이미지 마다 라인을 차지하지않고 img 요소 만큼만 차지하고 좌우로 나열되었고 block을 적용한 이미지들은 이미지 마다 한줄의 라인을 전부 차지하여 밑으로 나열되었다. 그 외에 visibility 속성도 있다.

visibility: hidden | visible

속성값 hidden을 적용하게되면 display: none과 마찬가지로 웹 페이지에서 요소가 보이지 않게 된다. 그러나 차이점은 display: none은 사라진 레이아웃의 자리자체가 사라지게되고 visibility: hidden은 기존의 차지하고 있던 자리는 유지하고 있다는 차이가 있다.

<!--생략-->
...
    p.none{ display: none;}
    p.hidden{ visibility: hidden;}
...
<div>
    <p>display 속성값을 none으로 설정합니다.</p>
    <p class="none">display 속성값을 none으로 설정했습니다.</p>
</div>
<div>
    <p>visibility 속성값을 hidden으로 설정합니다.</p>
    <p class="hidden">visibility 속성값을 hidden으로 설정했습니다.</p>
</div>
...
<!--생략-->

float

HTML 요소를 수평으로 정렬하고자 할 때 사용하는 방법으로 다른 요소들과 자연스럽게 어울리도록 만들어준다. float를 적용받은 요소들은 right, left 방향을 결정하게 되고 속성값을 적용받으면 float를 적용 받은 요소의 다음 요소들은 끌어올려지게된다.

<!--생략-->
...
#left-apple{
    float:left;
    margin-right: 20px;
    width: 300px;
}
p{
    font-size: 20px;
    line-height: 1.5;
}
...
<img id="left-apple" src="./apple.png" alt="사과"><p>Lorem ipsum dolor...</p>
...
<!--생략-->

clear

float 속성을 사용해 웹 페이지 상에 요소를 왼쪽이나 오른쪽으로 배치하면 그 다음 요소도 위로 딸려올라게 된다. 이러한 특성을 없애주기위해서는 clear: both를 사용하여 플로팅을 종료 시켜주면된다.

<!--생략-->
...
#p1{
    width: 38%;
    background-color: gold;
    float: left;
}
#p2{
    width: 54%;
    background-color: greenyellow;
    float: left;
}
#p3{
    clear: both;  /* float 종료시 사용하면 아래부터 다시 시작 가능*/
    background-color: deepskyblue;
}
...
<div id="p1">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit...</p>
</div>
<div id="p2">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit...</p>
</div>
<div id="p3">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit...</p>
</div>
...
<!--생략-->