CSS, display / visibility / overflow / nowrap

display :

display 에는 주요 inline . block . inline-block . none 요소 들이 있다.

 

: inline

기본적으로 텍스트 속성을 가져 인라인 요소간의 수평 나열이 가능.

크기 지정은 불가.

 

: block

높이는 내부 컨텐트에 의해 결정되지만 , 너비는 수평 영역 전체를 차지.

수평나열이 불가.

 

:inline-block

인라인 요소와 같이 요소간의 수평 나열이 가능하면서도 ,

블럭 요소와 같이 크기 지정이 가능한 특성.

 

        a {
            display: inline-block;
            width: 5em;
            height: 5em;
            text-align: center;
            line-height: 5em;
        }

        div {
            display: inline-block;
            width: 5em;
            height: 5em;
        }

 

display:none

컨텐트 영역을 차지 하지 않으면서 숨김.

스크린 리더에 읽히지 않음.

봇에 의한 검색도 되지 않음.

 

---

visibility : hidden

컨텐트 영역을 차지한 상태로 숨김.

스크린 리더에 읽히지 않음.

봇에 의해 검색 됨.

→ display:none 과 비슷하나 약간 다르기 때문에 주의하여 활용해보자.

디폴트 값은 visibility : visible

 

---

 

overflow :

부모 요소의 프레임 내에서 자식 요소가 흘러 넘치는 경우에 대한 설정.

 

overflow: visible

부모 요소에 대하여 자식 요소가 흘러 넘쳐도 보이는 그대로 표시

미설정시 디폴트 값.

 p {
            background-color: antiquewhite;
            border: 1px solid;
            height: 80px;
            margin-bottom: 200px;

            overflow: visible;
        }

 

overflow:hidden

부모 요소에 대하여 자식 요소가 흘러 넘쳐 표시되는 부분을 숨김.

	p:nth-of-type(2) {
            overflow: hidden;
        }

        p:nth-of-type(2):hover {
            overflow: visible;
        }

 

overflow-x:hidden

부모 요소에 대하여 자식 요소가 수평으로 흘러 넘쳐 표시 되는 부분을 숨김.

 

overflow-y:hidden

부모 요소에 대하여 자식 요소가 수직으로 흘러 넘쳐 표시 되는 부분을 숨김.

 

overflow:scroll

흘러 넘치는 방향과 무관하게 무조건 수평 수직의 스크롤바 형성.

        p:nth-of-type(5) {
            overflow-y: hidden;
            overflow: scroll;
        }

 

overflow:auto

자식 요소가 부모의 수평 수직의 벗어나는 방향에 대해서만 스크롤 바 형성.

        p:nth-of-type(5):hover {
            overflow: auto;
        }

 

 

---

 

white-space : nowrap

 

텍스트는 기본적으로 지정된 컨텐트 너비 영역에 둘러 쌓이는 특성으로 인해

오른쪽 끝 영역에 닿으면 자동으로 개행되는 특성을 가졌다.

이러한 너비를 둘러 쌓는 디폴트 속성을 해제하는 값이 nowrap

→문단의 줄내림이 한줄로 변경되어 표기됨을 확인 할 수 있다.

        p:nth-of-type(3) {
            white-space: nowrap;
        }