block(3)
-
4-6. Display 속성과 Visivility 속성 알아보기
1. Display 속성 알아보기 "display" 속성은 css의 많은 속성 중에서도 아주 중요합니다. 각 HTML 요소는 블록 혹은 인라인으로 나타나게 되는데, display 속성으로 "block" 혹은 "inline"을 의도적으로 지정할 수 있습니다. 뿐만 아니라 마크업된 요소가 원래 존재하지 않는 것처럼 "none"을 지정할 수도 있습니다. 이외에 많은 값들이 새로 추가되었지만, 익스플로러의 경우는 익스플로러 버전9 이상의 브라우저에서만 안정적으로 지원되며 아직은 그 사용빈도가 높지 않습니다.1-1. "display" 속성으로 block, inline 값 지정하기HTML에서 는 블록 요소이고, 은 인라인 요소지만, 다음 예제에서는 css에서 요소가 ㅇ니라인으로 요소는 블록으로 표현되도록 만들었습니..
2018.02.06 -
3-2. 블록/인라인 레벨 요소 및 컨텐츠 분류
1. HTML태그는 크게 '블록 레벨 요소'와 '인라인 레벨 요소'로 구분할 수 있습니다. 블록 레벨은 너비나 높이를 지정할 수 있고 줄 바꿈 속성을 가지고 있지만, 인라인 레벨은 너비나 높이를 지정할 수 없으며 줄이 바뀌지 않는(인라인) 형식으로 표현됩니다. HTML5로 발전되면서 블록 레벨과 인라인 레벨로 구분하는 방법은 퇴색 되었지만, 없어진 것은 아니며 비슷한 속성끼리 나누는 방법으로 발전되었습니다. 익스플로러 버전9 이하에서는 HTML5요소를 제대로 지원하지 않으므로, 이 경우에는 자바스크립트에서 document.create.Element("태그이름")의 혁식으로 생성하고, 스타일시트로 인라인 또는 블록요소의 특성을 따로 지정해야 합니다. 2. 블록 레벨 요소 블록 레벨 요소는 자신을 감싸는 상..
2017.09.25 -
display & visibility 차이
1. display display: none - 컨트롤을 생성하지 않도록 설정하여 공간 차지도 하지 않습니다. display: inline - 아무런 선택을 하지않으면 기본값으로 선택되는 속성으로 inline요소로 작용하도록 설정하여 줄바꿈이 일어나지 않습니다. display: block - block요소로 작용하도록 설정하여 줄바꿈이 일어나게 됩니다. display: inline-block - 요소는 inline으로 작용하지만 내부는 block처럼 작용하도록 설정합니다. 2. visibility visibility: visible - 아무런 선택을 하지않으면 기본값으로 선택되는 속성으로 그대로 보여줍니다. visibility: hidden - 요소가 보여지지 않지만 공간은 그대로 차지하고 있도록 요소를..
2017.03.22