YJ의 새벽
CSS ( 레이아웃, display ) 본문
- display 속성
-- block : 화면을 수직분할 + width,height 사용가능 O
-- inline : 화면을 수평분할 + width,height 사용불가 X
-- inline-block : inline의 수평분할 + block의 크기조절
-- none : 화면에 요소가 표시되지 않으나, 존재는 하고있는 상태
-- flex : 요소의 정렬되는 방향, 간격을 유연하게 처리하는 방식
EX ))) block 형식 요소 div 를 inline 변경
<style>
.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}
.inline{
display: inline; // display : inline
}
</style>
</head>
<body>
<div class="area1 inline">1번영역</div>
<div class="area2 inline">2번영역</div>
<div class="area3 inline">3번영역</div>
<div class="area4 inline">4번영역</div>
<div class="area5 inline">5번영역</div>
</body>
EX ))) inline형식 요소 span 을 block 변경
<style>
.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}
.block{
display: block; // display : block
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<span class="area1 block">1번영역</span>
<span class="area2 block">2번영역</span>
<span class="area3 block">3번영역</span>
<span class="area4 block">4번영역</span>
<span class="area5 block">5번영역</span>
</body>
EX ))) inline-block 확인하기
<style>
.area1{background-color: red;}
.area2{background-color: orange;}
.area3{background-color: yellow;}
.area4{background-color: green;}
.area5{background-color: blue;}
.block{
display: block;
width: 100px;
height: 100px;
}
.inline-block{
display: inline-block; // display : inline-block
}
</style>
</head>
<body>
<div class="area1 inline-block block">1번영역</div>
<div class="area2 inline-block block">2번영역</div>
<div class="area3 inline-block block">3번영역</div>
<div class="area4 inline-block block">4번영역</div>
<div class="area5 inline-block block">5번영역</div>
</body>
-----------------------------------------------------------------------------------------------------------------------------------
- 화면 영역분할
-- 감싸고있는 영역 요소.
-- 내부를 분할할 요소
-- display : block
-- 크기 지정단위 ( px,% )
EX )) 상하 2분할
<style>
#container-1{
border: 3px solid black;
height: 472px;
}
#container-1 > div:first-child{ // 첫번째 자식이 div 냐! 맞으면 실행
background-color: orange;
height: 30%;
}
#container-1 > div:last-child{ // 마지막 자식이 div 냐!! 맞으면 실행
background-color: blue;
height: 70%;
}
</style>
</head>
<body>
<div id="container-1">
<div></div>
<div></div>
</div>
</body>
EX )) 상하 3분할
<style>
#container-2{
border: 2px solid black;
width: 300px;
height: 440px;
}
#container-2 > div:nth-child(1){ //첫번째 div
background-color: orange;
height: 15%;
}
#container-2 > div:nth-child(2){ //두번째 div
background-color: green;
height: 35%;
}
#container-2 > div:nth-child(3){ //세번째 div
background-color: blue;
height: 50%;
}
</style>
</head>
<body>
<div id="container-2">
<div></div>
<div></div>
<div></div>
</div>
</body>
-------------------------------------------------------------------------------------------------------------------
EX )) display : none , visibility : hidden 비교
<style>
.none{
display: none; // 요소는 존재하나 출력 X
}
.hidden{
visibility: hidden; //화면에 투명한형태 출력
}
</style>
</head>
<body>
<div class="test">1</div>
<div class="none">2</div> // display : none
<div class="test">3</div>
<div class="hidden">4</div> // visibility : hidden
<div class="test">5</div>
</body>
'WebFront_ > HTML,CSS' 카테고리의 다른 글
| CSS ( 반응형 웹디자인 ) (0) | 2023.02.10 |
|---|---|
| CSS ( 레이아웃, flex , grid ) (0) | 2023.02.08 |
| CSS ( 레이아웃 ( position )) (0) | 2023.02.07 |
| CSS ( 레이아웃 ( float )) (0) | 2023.02.07 |
| CSS ( 폼 (input,로그인,회원가입)) (0) | 2023.02.06 |
