-
디스플레이(display)프로그래밍/HTML&CSS 2022. 9. 8. 16:24728x90
display 속성은 웹 페이지의 레이아웃과 요소를 어떻게 보여줄지를 결정하는 속성으로 display 속성을 사용하면 블록 속성 요소와 인라인 속성 요소를 변경하는데 사용한다.
종류 설명 block 언제나 새로운 라인에서 시작하고 해당 라인의 모든 라인을 차지함. inline 새로운 라인에서 시작하지 않고 라인 전체가 아닌 해당 HTML 요소의 내용만큼만 차지함. inline-block 인라인 속성과 블록 속성을 모두 가지고 있으며 너비 높이 패딩 마진을 지정할 수 있음. none 웹 페이지에서 해당 요소를 표시하지 않고 레이아웃에서 사라짐. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>디스플레이</title> <style> div{ margin: 20px; border: 1px solid red; border-radius: 20px; padding: 10px; } #inline img{ width:100px; display: inline; } #block img{ display: block; } </style> </head> <body> <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> </body> </html>
display 예제 위 결과를 보면 inline을 적용한 div 내 이미지들은 각 이미지 마다 라인을 차지하지않고 img 요소 만큼만 차지하여 좌우로 나열한 반면, block을 적용한 이미지들은 이미지 마다 한줄의 라인을 전부 차지하여 밑으로 나열한다.
비슷하게 visibility 속성이 있다.
visibility: hidden | visible속성값 hidden을 적용하게되면 display: none과 마찬가지로 웹 페이지에서 요소가 보이지 않게 된다.
다만 "display: none"은 사라진 레이아웃의 자리자체가 사라지게되고 "visibility: hidden"은 기존의 차지하고 있던 자리는 유지하고 있다는 차이가 있다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>디스플레이</title> <style> div{ background-color: deepskyblue; border: 3px solid red; } p.none{ display: none;} p.hidden{ visibility: hidden;} </style> </head> <body> <div> <p>display 속성값을 none으로 설정합니다.</p> <p class="none">display 속성값을 none으로 설정했습니다.</p> </div> <div> <p>visibility 속성값을 hidden으로 설정합니다.</p> <p class="hidden">visibility 속성값을 hidden으로 설정했습니다.</p> </div> </body> </html>728x90'프로그래밍 > HTML&CSS' 카테고리의 다른 글
position (0) 2022.09.10 float (0) 2022.09.09 박스 사이징(box-sizing) (0) 2022.09.07 마진(margin) (0) 2022.09.06 패딩(padding) (0) 2022.09.05
