▶이동
  • 상구너 닷컴 블로그를 방문하신 여러분을 환영합니다 :)
  • 스팸 정책에 의해 일부 덧글·방명록차단될 수 있습니다.

display,visibility 속성 정리

Study/Markup 상구너(smokingbird) 2017.01.05 13:54

display 속성


display: inline  기본값으로, 요소를 inline 요소처럼 표시합니다. => 앞뒤로 줄바꿈 되지 않습니다.

 

display: block  요소를 block 요소처럼 표시합니다. => 따라서 요소 앞 뒤로 줄바꿈 됩니다

 

display: none 박스가 생성되지 않습니다. => 따라서 공간을 차지하지도 않습니다.

 

display: inline-block 요소는 inline인데 내부는 block 처럼 표시함.  => 즉, 박스 모양이 inline 처럼 옆으로 늘어섬.





visibility 속성



visibility: visible  기본값으로 요소가 그대로 보입니다.visibility: hidden  요소가 보이지 않지만, 여전히 그 공간을 차지하며 투명하게 남습니다.

visibility: collapse <table> 태그에서만 사용할 수 있는 값으로, 선택 테이블의 행과 열을 숨깁니다.

 

하지만 여전히 투명하게 공간을 차지 합니다. 

<table> 이외에서 사용하면 hidden 상태처럼 만듭니다. 

(collapse는 IE, Firefox에서만 작동)


참고 : http://aboooks.tistory.com/85

저작자 표시 비영리 변경 금지
신고

'Study > Markup' 카테고리의 다른 글

display,visibility 속성 정리  (0) 2017.01.05
display: inline-block 여백이 생기는 현상  (0) 2017.01.05
0 0
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.
  • display: inline-block 여백이 생기는 현상

    Study/Markup 상구너(smokingbird) 2017.01.05 13:51

    Version:1.0 StartHTML:0000000105 EndHTML:0000015589 StartFragment:0000001096 EndFragment:0000015557

    1. 문제 발생 (예제)

    1000px 로 설정한 div

    다시 150px, 700px, 150px 로 나누고

    안쪽의 div에는 display: inline-block 속성을 주었는데

    맨 오른쪽 div 영역이 아래쪽으로 밀려내려감

    *** divpaddingmargin, border는 모두 0px 이었음

     

    2. 원인

    <div> 태그 등으로 다른 태그들을 묶어주는 경우,

    div 태그 또한 inline-element로 인식을 하기 때문에

    div들끼리 마주하는 부분에서 여백이 생김

    div 뿐만아니라, span도 마찬가지

     

    3. 해결 방법

    .container { // 부모 랩퍼

    ...

    font-size: 0px;

    letter-spacing: 0px;

    word-spacing: 0px;

    }

     

    .container > div { // 간격이생기던 엘리먼트

    ...

    font-size: 15px;

    letter-spacing: 1em;

    word-spacing: 2em;

    }

     

    감싸고 있는 divfont-size, letter-spacing, word-spacing0px로 줄임 ->

    안쪽의 div에서 복구.

     

    4. 간단 해법

    .container > div { // 간격이생기던 엘리먼트

    ...

    float:left;

    }


    참고


    http://comajava.blogspot.kr/2013/12/display-inline-block-width-margin-css.html

    저작자 표시 비영리 변경 금지
    신고

    'Study > Markup' 카테고리의 다른 글

    display,visibility 속성 정리  (0) 2017.01.05
    display: inline-block 여백이 생기는 현상  (0) 2017.01.05
    0 0
  • 공지사항
    중요한 개인정보필요한 경우가 아닌 경우 적지 마시고, 적으셨다면 비밀글 설정을 꼭 해주시기 바랍니다.
    스팸 필터 정책에 의해 영문만으로 작성된 글이나 무의미한 내용의 글은 등록이 되지 않을 수도 있습니다.
  • 1