-
CSS 공간분할태그, 가시속성front-end/HTMI CSS 2023. 6. 7. 11:10728x90
1. 공간분할태그
경계를 분할하거나 영역을 나눌 때 사용하는 태그
<div>, <span>
<body> <h1>오늘부터 <span>지각</span> 금지!</h1> <div id ="one">1번 BOX <div id = "three"> <p> 3번 BOX는 1번 BOX 안에서 또 공간을 나눔</p> </div> 3번 BOX 아래인데 1번 BOX 영역이야 </div> <div id ="two">2번 BOX </div> </body><style> span{ color: red; } #one{ background-color: wheat; } #two{ background-color: darkkhaki; width: 200px; height: 200px; } #three{ background-color: coral; width: 150px; height: 150px; } </style>
2. 가시속성(visibility)
- visible : 눈에 보이게 하는 속성
- hidden : 눈에 보이지 않는 자리는 차지함<body> <div id="grayB"> <p>회색 box 안</p> <div id=yellowB> (노란 box 공간) </div> <div id="greenB"> (초록 box 공간) </div> </div> </body><style> #grayB { width: 300px; height: 300px; background-color: gray; } #yellowB { width: 100px; height: 100px; background-color: yellow; } #greenB { width: 100px; height: 100px; background-color: green; } </style>
* hidden과 none의 차이점!
- hidden
자리를 남긴다.
#yellowB { width: 100px; height: 100px; background-color: yellow; visibility: hidden; }
- none
자리도 삭제를 한다.
#yellowB { width: 100px; height: 100px; background-color: yellow; display : none }
728x90'front-end > HTMI CSS' 카테고리의 다른 글
CSS 박스 만들기, float, inline-block (0) 2023.06.18 CSS margin, padding, border, position (0) 2023.06.07 CSS 크기 단위, 디스플레이, selector (0) 2023.06.07 CSS 기본 구조 및 선택자 (0) 2023.06.05 HTML 입력 양식 태그 & 이미지 클릭으로 링크 이동 (0) 2023.06.03