CSS 속성(Properties)
CSS 속성(Properties)
CSS 출력 및 박스 관련 속성
- display, visibility, opacity, width, height, overflow, margin, padding, border 등
- 모든 속성의 값에 initial(초기값), inherit(부모 요소로 부터 상속)
display : 화면 출력 모드를 지정하는 속성
- 태그마다 화면 출력 모드가 block, inline, inline-block 등으로 구성됨.
- inline 속성 요소 : span, a, strong, em, ins 등
- inline 요소의 특징 : 한 줄 안에 자동 줄바꿈이 될 때까지 배치되며, 크기 지정을 할 수 없어 width, height, line-height, text-indent, text-align, padding-top, padding-bottom, margin-top, margin-bottom 등 속성을 지정한다고 하더라도 결과에 반영되지 못한다.
- block 속성 요소 : div, h1 ~ h6, p, section, article, header, footer,... 등이 있음
- 자동으로 다음 줄에 배치가 되며, 크기와 관련된 속성을 지정할 수 있음
- 부여 가능한 속성의 값 : inline | block | inline-block | none
- 부여 가능한 속성의 값2 : contents. flex, grid, box, table, inline-flex, inline-grid, inline-table, list-item, run-in, table-caption, table-column, table-row, table-cell, table-header-group, table-footer-group, table-column-group, table-row-group 등
visibility(가시 속성)
- 보일지 보이지 않을 지를 나타내는 속성
- visible | hidden | collapse
opacity(불투명도 속성)
- 불투명 정도를 나타내는 속성
- 0~1 까지의 실수 또는 정수로 표시하며, 0은 투명, 1은 불투명
- 해당 요소의 글자와 배경색/배경이미지를 포함한 모든 콘텐츠를 불투명 또는 투명하게 지정할 수 있음
width(너비 속성)
가로(폭=너비)의 크기를 지정하는 속성
auto | length | %
length는 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능
기본 화면 출력 속성이 블록요소 또는 인라인블록요소 등에만 크기 지정이 가능함.
height(높이속성)
세로(높이)의 크기를 지정하는 속성
auto | length | %
length는 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능
기본 화면 출력 속성이 블록요소 또는 인라인 블록요소 등에만 크기 지정이 가능함.
overflow(흘러넘침속성)
콘텐츠의 양이 지정한 크기(폭/높이)보다 더 클 경우 지정
visible | hidden | scroll | auto | clip
세부 속성 : overflow-x(가로), overflow-y(세로)
margin(바깥여백)
현재 테두리(콘텐츠) 영역의 바깥 여백으로서 여러 콘텐츠와 콘텐츠 사이의 여백
auto | length | %
length는 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능
margin:값, margin:위/아래 좌/우, margin:상 우 하 좌
세부 속성 : margin-top, margin-bottom, margin-left, margin-right
※ 통합 속성을 먼저 지정하고, 세부 속성을 나중에 지정하여야 세부 속성이 적용됨
padding(안쪽여백)
테두리와 콘텐츠 사이의 여백
auto | length | %
length는 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능
padding: 값, padding: 위/아래/ 좌/우, padding:상 우 하 좌
세부 속성 : padding-top, padding-bottom, padding-left, padding-right
※ 통합 속성을 먼저 지정하고, 세부 속성을 나중에 지정하여야 세부 속성이 적용되며, 지정한 폭/높이에 padding과 border 값을 더한 값이 실제 배치(적용) 크기가 된다.
border(테두리)
border : width style color
ex) border : 1px solid #000;
1px 두께의 검은색 실선
width는 선의 두께로서 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능
style은 선의 모양으로서 solid, none, hidden, dotted, dashed, double, groove, ridge, inset, outset 등의 지정이 가능
color는 선의 색으로서 컬러명, 16진(hex)코드, rgb()/rgba(), hsl/hsla() 등으로 지정이 가능
카테고리별 세부 속성
border-width(선두께)
ex1) border-width:2px
ex2) border-width:2px 5px
ex3) border-width:2px 5px 10px 20px
border-style(선종류)
ex1) border-style:solid
ex2) border-style:solid dashed
ex3) border-style:solid dashed double hidden
border-color(선색상)
ex1) border-color:red
ex2) border-color:red blue
ex3) border-style:blue gold navy orange
방향별 세부 속성
border-left(왼쪽 테두리)
ex1) border-left : 2px double silver
border-right(오른쪽 테두리)
ex2) border-right : 5px dotted gold
border-top(위쪽 테두리)
ex3) border-top : 3px dashed deepskyblue
border-bottom(아래쪽 테두리)
ex4) border-bottom : 4px ridge deeppink
세세 속성
border-left-width, border-left-style, border-left-color
border-right-width, border-right-style, border-right-color
border-top-width, border-top-style, border-top-color
border-bottom-width, border-bottom-style, border-botton-color
각 방향별로 선 두께, 선 종류, 선 색상을 개별적으로 지정할 수 있음
box-sizing(박스의 크기 산정방법)
박스의 크기를 지정한 너비/높이가 콘텐츠까지만 적용할지, padding과 border를 포함하여 적용할지 등의 여부를 지정
content-box | border-box
content-box는 지정한 너비/높이가 콘텐츠에만 적용, border-box는 지정한 너비/높이에 콘텐츠+padding+border로 적용됨
border-radius(테두리둥글기)
값으로는 px, pt, pc, cm, mm, in, vw, vmin, vmax 등의 단위로 지정이 가능
ex1) border-radius:20px;
ex2) border-radius:50%;
ex3) border-radius:20px 50px;
ex4) border-radius:10px 20px 30px 40px;
ex5) border-top-left-radius:20px;
ex5) border-top-right-radius:20px;
ex5) border-bottom-right-radius:20px;
ex5) border-bottom-left-radius:20px;