Amazing Story

11. 가시성- 요소를 화면에서 보이거나 감출 수 있음 ※ 아래와 같은 예제로 visibility 속성과 display를 적용해 보겠습니다. 가시성 속성을 적용하기 전에는 빨간색과 초록색의 상자가 위아래로 나란히 있는 상태입니다. 123456789101112131415161718가시성 *{margin:0; padding:0;} .box1{width: 300px; height: 100px; background-color: #f00;} .box2{width: 300px; height: 100px; background-color: #0f0;} 적용 전 (1) visibility- 요소를 화면에서 show/hide 시킬 수 있으며 hidden visible 값을 사용- 화면에서 가려지나 자리를 지키고 있음 ■ ..

6. 디스플레이- 브라우저가 요소를 화면에 나타내는 방법을 제어하는 속성으로 block, inline, inline-block 등이 있다. (1) Block 요소- 블록요소는 줄바꿈이 되어 표현됨- 블록요소의 가로크기는 부모요소만큼 적용- 블록요소의 높이는 콘텐츠 크기만큼 적용- 블록요소에 width값을 적용하여 부모요소의 가로 크기보다 작더라도 가로전체는 해당요소의 영역으로 유지- 블록요소는 마진과 패딩을 적용할 수 있고 다른 블록요소에 영향을 줌 ■ 예시1 123456789101112131415161718192021디스플레이 속성 .box{border: 10px solid #000;} .box p{border: 3px solid #f00;} .box .b1{width: 500px;} .box .b2{..