CSS Dimension & 박스 모델, display vs visibility

CSS Dimension & 박스 모델

dimension 은 공간 등의 높이,너비의 치수를 말합니다.

CSS 에서는 너비, 높이를 다음과 같은 속성으로 정의할 수 있습니다.

속 성	설 명
height	요소의 높이를 지정
max-height	요소가 가질 수 있는 최대치 높이를 지정
min-height	요소가 가질 수 있는 최소치 높이를 지정
width	요소의 너비를 지정
max-width	요소가 가질 수 있는 최대치 너비를 지정
min-width	요소가 가질 수 있는 최소치 너비를 지정

css

.selector {
    width: value;
    max-width: value;
    min-width: value;
    height: value;
    max-height: value;
    min-height: value;
}

• auto : 기본값(default), 브라우저 너비,높이에 따라 자동으로 설정
• length : px, em, rem, ex 등의 단위로 직접 길이를 지정
• % : 요소가 포함된 영역의 퍼센트 값으로 계산하여 지정

padding & margin

Padding 은 요소의 안쪽 여백을 margin 은 요소의 바깥 여백을 지정하는 속성입니다.

padding

속 성	설 명
padding	padding 속성들의 축약 속성
padding-bottom	요소 내부의 하단 간격을 지정
padding-left	요소 내부의 좌측 간격을 지정
padding-right	요소 내부의 우측 간격을 지정
padding-top	요소 내부의 상단 간격을 지정

padding 은 padding-bottom,padding-left, padding-right, padding-top 네 개 속성의 축약 속성이다.

여기서는 한 개 부터 네 개 값까지 모두 선택적으로 사용할 수 있다.

css

padding: 10px 5px 15px 20px; (top right bottom left)
padding: 10px 5px 15px; (top right-left bottom)
padding: 10px 5px; (top-bottom right-left)
padding: 10px; (top-right-bottom-left)

margin

속 성	설 명
margin	margin 속성들의 축약 속성
margin-bottom	요소 외부의 하단 간격을 지정
margin-left	요소 외부의 좌측 간격을 지정
margin-right	요소 외부의 우측 간격을 지정
margin-top	요소 외부의 상단 간격을 지정

margin 은 margin-bottom, margin-left, margin-right, margin-top 네 개 속성의 축약 속성이다.

여기서는 한 개 부터 네 개 값까지 모두 선택적으로 사용할 수 있다.

css

margin: 10px 5px 15px 20px; (top right bottom left)
margin: 10px 5px 15px; (top right-left bottom)
margin: 10px 5px; (top-bottom right-left)
margin: 10px; (top-right-bottom-left)

border & outline

border

border 요소에 대한 선(테두리)을 적용할 때 사용하는 속성입니다.

border 속성은 요소에 테두리 효과를 주는 것이며, 모든 border 속성들을 한번에 선언할 수 있는 축약속성이다.

border-color, border-width, border-style 속성들을 한꺼번에 선언할 수 있으며 {border:solid #ff0000;} 처럼 style-color 또는 style-width 만 적어도 무방하다.

대신 어떤 값을 주던 style 속성은 반드시 선언해주어야 한다.

• border-width : 테두리의 너비(굵기)를 지정
• border-style : 테두리의 스타일을 지정
• border-color : 테두리의 색상을 지정

• dotted : 도트(점선) 테두리 지정
• dashed : 대시 기호(-) 테두리 지정
• solid : 일반적인 라인 테두리 지정
• double : 두 줄로 테두리 지정

css

.selector {
    border: width style color;
}

속 성	설 명
border	모든 border 속성의 축약 속성
border-bottom	하단 테두리의 축약 속성
border-bottom-color	하단 테두리에 색상을 지정
border-bottom-style	하단 테두리의 스타일을 지정
border-bottom-width	하단 테두리 너비를 지정
border-color	테두리의 색상을 지정
border-left	왼쪽 테두리의 축약 속성
border-left-color	왼쪽 테두리에 색상을 지정
border-left-style	왼쪽 테두리의 스타일을 지정
border-left-width	왼쪽 테두리의 너비를 지정
border-right	오른쪽 테두리의 축약 속성
border-right-color	오른쪽 테두리에 색상을 지정
border-right-style	오른쪽 테두리의 스타일을 지정
border-right-width	오른쪽 테두리 너비를 지정
border-style	테두리의 스타일을 지정
border-top	상단 테두리의 축약 속성
border-top-color	상단 테두리의 색상을 지정
border-top-style	상단 테두리의 스타일을 지정
border-top-width	상단 테두리의 너비를 지정
border-width	테두리의 너비를 지정

outline

outline 은 요소 바깥 주위에 둘러지는 선이며 만약 요소에 border 가 적용되어 있다면 outline 은 그 바깥에 생성된다.

속 성	설 명
outline	outline 속성들의 축약 속성
outline-color	요소 바깥 선의 색상을 지정
outline-style	요소 바깥 선의 스타일을 지정
outline-width	요소 바깥 선의 너비를 지정

outline 은 {outline:solid #FF0000} 과 같이 style-color 또는 style-width 만 적어도 무방하다. 대신 어떤 값을 주던 style 속성은 반드시 선언해주어야 한다.

outline 은 요소의 면적에 포함되지 않으므로 요소의 width 와 height 속성에 outline 의 두께는 포함되지 않는다.

• dotted : 도트(점선) 테두리 지정
• dashed : 대시 기호(-) 테두리 지정
• solid : 일반적인 라인 테두리 지정
• double : 두 줄로 테두리 지정

IE에서는 올바른 문서선언(!DOCTYPE)이 선언되어야 제대로 표현된다.

outline은 요소의 영역을 차지하는 부분이 아니기 때문에 어떤 요소에 outline을 주더라도 width와 height에는 영향 받지 않는다.

Box Model

박스 모델은 하나의 태그를 박스로 가정하여 정리한 개념입니다.

예를 들어, 박스 모델을 방에 비유하자면 방안 에 나 자신이 있는데 자신을 콘텐츠라고 가정한다면 방안에는 나머지 공간을 패딩(안쪽여백), 벽이 테두리(보더), 바깥 공간이 마진(바깥 여백)으로 표현할 수 있습니다.

그리고 방 안의 장판이 깔려 있다고 할 때 장판을 백그라운드 이미지를 표현할 수 있는 공간으로 이해할 수 있습니다.

박스 모델에서 안쪽 여백인 padding 을 설정할 경우 백그라운드 이미지는 패딩까지 영역을 포함하여 배경이미지를 표시하게 됩니다.

이러한 모든 엘리먼트를 박스의 개념으로 놓고 설명한 것을 박스 모델이라고 합니다.

그래서 각 박스는 네 경계가 있는데 margin 경계, border 경계, padding 경계, 콘텐츠 경계가 있습니다.

width,height 속성을 작성하게되면 콘텐트 영역이 width,height 로 표현됩니다.

그리고 제일 중요한 것이 마진은 박스의 실제 크기에 포함되지 않는다는 것입니다.

html

<div class="box-01">박스 모델 1</div>
<div class="box-02">박스 모델 2</div>
<div class="box-03">박스 모델 3</div>
<div class="box-04">박스 모델 4</div>

박스 모델 너비/높이 계산법

요소에 정확한 너비와 높이값을 정의하는 것은 레이아웃을 정렬할 때 매우 중요합니다.

만일 요에 안쪽 여백과 선이 적용되었을 때 요소의 너비와 높이값 계산을 잘못하게 되면 의도한 대로 레이아웃이 정렬되지 않을 수 있습니다.

다음은 박스 모델의 너비와 높이를 계산하는 방법입니다.

전체 너비(폭) = 너빗값 + 좌우 패딩값 + 좌우 선 두께

전체 높이 = 높이값 + 상하 패딩값 + 상하 선 두께

display vs visibility

display

display 속성의 주된 역할은 화면에서 내용을 보여주거나 감추는 역할을 합니다.

그리고 이 속성은 엘리먼트의 성질을 변경시키기도 합니다.

display 속성은 인라인(inline) 타입인지 블럭(block) 타입인지 등에 관한 해당 요소의 유형을 지정합니다.

css

.selector { display:value; }

value(값)	설 명
none	해당 요소가 생성되지 않음
block	위아래 줄바꿈이 되는 블럭 요소로 지정
inline	기본값(default), 위아래 줄 바꿈이 되지 않는 인라인 요소로 지정
inline-block	인라인 요소로 배치 되지만 블럭 요소의 특징을 가짐
list-item	블럭 요소로 배치되면서 list 항목을 인라인으로 만든다
table	앞뒤 줄바꿈이 되는 테이블처럼 나타낸다
table-cell	테이블 셀처럼 나타낸다
table-row	테이블 행 처럼 나타낸다
table-column	테이블 컬럼 처럼 나타낸다

display: none; 은 콘텐츠를 숨김처리할때 사용합니다.

예를 들어서 초기에는 숨기고 버튼을 클릭했을때 보여지는 콘텐츠의 경우 스크립트로 none/block 처리를 하게 됩니다.

visibility

visibility 속성은 해당 요소를 보여지게 할지 안보여지게 할지를 지정한다.

value(값)	설 명
visible	기본값(default), 요소가 보여지게 지정
hidden	요소가 보여지지 않게 지정(해당 요소의 공간은 유지됨)
collapse	table 요소를 위한 값이며, 다른 요소에 사용 된다면 “hidden” 으로 처리된다. table 의 row/column 을 제거하지만 전체 table 의 레이아웃에는 영향을 주지 않는다.

{ visibility:hidden; }은 보여지지 않지만 공간은 차지하고 있으며, { display:none; } 은 보여지지 않으면서 공간도 없어지게 된다.

두 속성의 차이점을 주의해야 한다.

html

<p>visibility: <span>hidden</span> and display: <strong>none</strong></p>

display:none 는 센스리더, jaws, NVDA 에서 모두 내용을 읽지 못합니다.

visibility: hidden은 센스리더에서는 내용을 읽을수 있지만 조스,NVDA 는 읽지 못함

overflow: hidden 의 경우 센서,조스,NVDA 모두 내용을 읽을 수 있습니다.

하여 국내 스크린리더만을 생각한다면 visibility:hidden 만을 적용시켜도 문제가 없으나 국외 스크린 리더 사용자까지 생각을 한다면 overflow:hidden 이 가장 좋은것 같습니다.

inline 요소는 너비,높이 설정시 사용자가 원하는 값을 렌더링하지 못한다.

마진 속성을 사용할 경우에 span, strong 요소는 마진 좌,우값만 설정가능할뿐 상,하값은 동작하지 않는다.

이러한 제약사항때문에 요소에 적용된 성질에 맞게 사용해야 합니다.

overflow

overflow 속성은 요소의 박스가 해당 콘텐츠를 넘쳤을 때 스크롤로 나타낼지 넘친 부분을 보이지 않게 할지 등 어떤 식으로 표현할지를 지정하는 것입니다.

즉, 해당 요소의 특정 영역을 벗어날 때 어떻게 표현할 지를 결정할 수 있습니다.

css

.box {
    overflow:value;
}

value(값)	설 명
visible	기본값(default), 해당 영역에서 벗어난 부분을 짜르지 않고 모두 보여주게 지정
hidden	해당 영역에서 벗어난 부분을 숨겨서 보이지 않게 지정
scroll	해당 영역에서 벗어난 부분을 숨기되 스크롤을 생성하여 볼 수 있게 지정
auto	해당 영역을 벗어난 부분이 있으면 자동으로 스크롤을 생성하게 지정

Jaehee's WebClub