border 축약형(shorthand) 속성
모든 border 속성을 이용한 스타일을 한 줄에 설정할 수 있습니다.
박스 모델 속성 part2 - by. UXKM
요약 설명박스 모델 속성 part-2 에서는
박스 테두리(border) 속성,
박스 라운드(radius) 속성,
박스 모델 크기(box-sizing) 제어 속성,
박스 그림자(box-shadow) 속성에 대한 내용을 다루고 있습니다.CSS의 기본 개념 중 하나 인 박스 모델을 설명합니다. 이 모델은 CSS가 내용, 패딩, 경계 및 여백 영역을 포함하여 요소를 배치하는 방법을 정의합니다.
box-sizing속성으로 설정하면 content-box(기본값) 및 요소가 블록 요소의 경우, 콘텐츠 영역의 크기는 명시적으로 정의 할 수 있습니다.
실제 홈페이지의 디자인에 중요한 역할을 하며, 항상 사용되고 가장 중요한 속성들입니다.
width와 height 속성을 비롯한 모든 박스모델 관련 속성(margin, padding, border, box-sizing 등)은 상속되지 않습니다.
2.9.4. 박스 테두리(border)를 제어하는속성
border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다.
border 속성을 설정하기 위해서는 반드시 border-style 속성이 먼저 설정되어 있어야 합니다.
border-style 속성
border-style 속성은 테두리 선의 스타일을 지정합니다.
border-style의 기본 키워드 값은 다음과 같습니다.
- dotted : 테두리를 점선으로 설정합니다.
- dashed : 테두리를 약간 긴 점선으로 설정합니다.
- solid : 테두리를 실선으로 설정합니다.
- double : 테두리를 이중 실선으로 설정합니다.
- groove : 테두리를 3차원인 입체적인 선으로 설정하며, border-color 속성값에 영향을 받습니다.
- ridge : 테두리를 3차원인 능선효과가 있는 선으로 설정하며, border-color 속성값에 영향을 받습니다.
- inset : 테두리를 3차원인 내지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받습니다.
- outset : 테두리를 3차원인 외지로 끼운 선으로 설정하며, border-color 속성값에 영향을 받습니다.
- none : 테두리를 없앱니다.
- hidden : 테두리가 존재하기는 하지만 표현되지는 않습니다.
속성 값의 갯수에 따라 4개 방향(top, right, bottom, left)에 대하여 지정이 가능합니다.
-
4개의 border-style 속성값을 지정할 때 top, right, bottom, left 순으로 설정합니다.
-
3개의 border-style 속성값을 지정할 때 top, right/left, bottom 순으로 설정합니다.
-
2개의 border-style 속성값을 지정할 때 top/bottom, right/left 순으로 설정합니다.
-
1개의 border-style 속성값을 지정할 때 모든 테두리의 스타일을 같게 설정합니다.
border-width 속성
border-width 속성은 테두리의 두께를 지정합니다. 속성 값의 갯수에 따라 4개 방향(top, right, bottom, left)에 대하여 지정이 가능합니다.
border-width 속성은 border-style과 함께 사용하지 않으면 적용되지 않는습니다.
px, em, cm 등과 같은 CSS 크기 단위를 이용하여 두께를 직접 설정할 수 있습니다.
또한, 미리 설정해 놓은 예약어인 thin, medium, thick을 사용하여 설정할 수도 있습니다.
border-style 속성처럼 축약형 방식으로 지정이 가능합니다.
ex) border-width: 1px
border-color 속성
border-color 속성 테두리의 색상을 지정합니다. 속성 값의 갯수에 따라 4개 방향(top, right, bottom, left)에 대하여 지정이 가능합니다.
border-color 속성 border-style과 함께 사용하지 않으면 적용되지 않는습니다.
기본적인 color 속성값들뿐만 아니라 투명한 선을 나타내는 transparent 속성값을 사용할 수도 있습니다.
border-color 속성값이 설정되지 않으면 해당 요소의 color 속성값을 그대로 물려받습니다.
border-style 속성처럼 축약형 방식으로 지정이 가능합니다.
ex) border-color: black
border-top 속성
상단 테두리를 border-style, bordrer-width, border-color 속성을 한번에 축약형 방식으로 명시할 수 있으며, 방향에 대한 style, width, color를 따로 명시할 수 있습니다.
축약형
style, width, color
border-right 속성
오른쪽 테두리를 border-style, bordrer-width, border-color 속성을 한번에 축약형 방식으로 명시할 수 있으며, 방향에 대한 style, width, color를 따로 명시할 수 있습니다.
축약형
style, width, color
border-bottom 속성
하단 테두리를 border-style, bordrer-width, border-color 속성을 한번에 축약형 방식으로 명시할 수 있으며, 방향에 대한 style, width, color를 따로 명시할 수 있습니다.
축약형
style, width, color
border-left 속성
왼쪽 테두리를 border-style, bordrer-width, border-color 속성을 한번에 축약형 방식으로 명시할 수 있으며, 방향에 대한 style, width, color를 따로 명시할 수 있습니다.
축약형
style, width, color
2.9.5. 박스 라운드(radius)를 제어하는 속성
CSS Module Level 3
border-radius 속성은 테두리 모서리를 둥글게 표현하도록 지정합니다.
속성 값은 길이를 나타내는 단위(px, em 등)와 %를 사용합니다.
각각의 모서리에 border-radius 프로퍼티를 개별적으로 지정할 수도 있고 4개의 모서리를 축약형(short-hand)으로 한번에 지정할 수도 있습니다.
하나 혹은 두개의 반지름을 설정하여 각각의 모서리 굴곡을 설정할 수 있기 때문에 원 혹은 타원의 모양으로 정의가 가능합니다.
border-radius 축약형(shorthand) 속성
상단 좌측, 상단 우측, 하단 우측, 하단 좌측의 속성을 한번에 축약하여 지정할 수 있습니다.
border-top-left-radius 속성
상단 좌측 라운드만 지정합니다.
ex) border-top-left-radius: 20px
border-top-right-radius 속성
상단 우측 라운드만 지정합니다.
ex) border-top-right-radius: 20px
border-bottom-right-radius 속성
하단 우측 라운드만 지정합니다.
ex) border-bottom-right-radius: 20px
border-bottom-left-radius 속성
하단 좌측 라운드만 지정합니다.
ex) border-bottom-left-radius: 20px
박스 라운드(radius) 에제
2.9.6. 박스모델 크기(box-sizing) 제어
CSS Module Level 3
CSS 박스 모델의 기본값에서, 지정한 너비와 높이는 요소의 콘텐츠 박스 크기에만 적용됩니다.
요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그립니다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 테두리나 안쪽 여백을 고려해야 합니다.
box-sizing 속성을 사용해 이 방식을 바꿀 수 있습니다.
box-sizing 속성
box-sizing 속성은 요소의 너비와 높이를 계산하는 방법을 지정합니다.
box-sizing 속성의 기본값은 content-box 입니다.
이는 width, height 속성의 대상 영역이 content 영역을 의미합니다.
box-sizing 속성의 값을 border-box로 지정하면 마진을 제외한 박스 모델 전체를
width, height 속성의 대상 영역으로 지정할 수 있어서 CSS Layout을 직관적으로 사용할 수 있게 합니다.
box-sizing 속성은 상속되지 않습니다. 따라서 box-sizing 속성을 사용하도록 초기화하려면 아래와 같이 정의합니다.
- content-box : width, height 속성 값은 content 영역을 의미한다. (기본값)
- border-box : width, height 속성 값은 content 영역, padding, border가 포함된 값을 의미한다.
box-sizing 테스트
위에 설명된 속성(width, height, margin, padding, border, border-radius)이
box-sizing의 속성 기준으로 어떤 차이점이 있는지 확인할 수 있습니다.
각 속성을 좌·우로 드래그하여 테스트해보세요.
테스트기 출처 : http://921430km.com/box_model
2.9.7. 박스 그림자(box-shadow)를 제어하는속성
CSS Module Level 3
box-shadow 속성은 해당 HTML 요소에 간단히 그림자 효과를 적용해 줍니다.
box-shadow 속성은 콤마(,)로 구분하여 여러형식의 box-shadow속성을 지정할 수 있습니다.
그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시합니다.
- none : 기본값으로 그림자 효과를 없앱니다.
- inset : inset 키워드를 지정하면 그림자가 요소 안쪽에 위치하며 생략 가능.
- Horizontal-offset : 양수값으로 지정하면 오른쪽으로 지정값만큼 이동, 음수값으로 지정하면 왼쪽으로 지정값만큼 이동.
- Vertical-offset : 양수값으로 지정하면 아래쪽으로 지정값만큼 이동, 음수값으로 지정하면 위쪽으로 지정값만큼 이동.
- blur : 그림자의 흐림정도를 지정한다. 값이 클 수록 더욱 흐려짐. 생략 가능.
- spread : 그림자의 확장여부 결정. 양수이면 확대, 음수이면 축소 생략 가능.
- color : 그림자의 색상(color)을 지정하며 생략 가능.