CSS의 주요 속성모음

💻 CSS의 주요 속성

• width : 요소의 너비이다. 기본 값은 auto이다.
• height : 요소의 높이이다. 기본 값은 auto이다.
• max-width min-width : 요소가 가질 수 있는 최대, 최소 너비이다.
• max-height min-height : 요소가 가질 수 있는 최대, 최소 높이이다.

모두 px, em, rem단위 등으로 크기를 지정해준다.

• margin : 요소의 외부영역이다.
  • auto, px, em, vx 등의 단위로 크기를 설정한다.
  • 기본 값은 0이다.
  • margin (위, 아래) (왼쪽, 오른쪽) : 요소의 위와 아래, 왼쪽과 오른쪽의 값을 설정한다.
  • margin (위) (왼쪽, 오른쪽) (아래) : 요소의 위, 왼쪽과 오른쪽, 아래의 값을 설정한다.
  • margin (위) (오른쪽) (아래) (왼쪽) : 요소의 위, 오른쪽, 아래, 왼쪽의 값을 설정한다.
• padding : 요소의 내부영역이다. 기본값은 0이다. 내부 요소기 때문에 요소가 커질 수 있다.
  • px, em, vw, % 등의 단위로 크기를 설정한다.
  • margin 요소와 같이 단축 속성이다.
• margin-top margin-bottom padding-right padding-left : 개별 속성으로 특정 방향만 개별적으로 적용할 수 있다.
• border : 요소의 테두리를 설정한다.
  • border (테두리 두께) (테두리 스타일) (테두리 색상) : 테두리 두께, 스타일, 색상을 한꺼번에 명시할 수 있다.
  • 테두리 두께 : px, em단위 등으로 설정한다.
  • 테두리 스타일 : solid (실선), dashed (점선), dotted (동그란 점선) 등의 값이 있다.
  • 테두리 색상 : 원하는 색으로 설정할 수 있다.
• border 관련 개별속성
  • border-width : 테두리의 두께만 설정한다. 개별 속성이나 margin 과 padding 처럼 방향에 의한 단축 속성이기도 하다.
  • border-style : 테두리의 스타일만 설정한다. 개별 속성이나 margin 과 padding 처럼 방향에 의한 단축 속성이기도 하다.
  • border-color: 테두리의 색상만 설정한다. 개별 속성이나 margin 과 padding 처럼 방향에 의한 단축 속성이기도 하다.
• border-radius : 모서리 부분을 둥글게 할 수 있다.
  • 0이 기본값이고, px, em, vw단위 등으로 설정할 수 있다. margin padding 처럼 단축 속성이다.
  • border-radius (왼쪽 위) (오른쪽 위) (오른쪽 아래) (왼쪽 아래) : 시계방향으로 각 위치마다 다른 값을 줄 수 있다.
• box-sizing : 요소의 크기 계산 기준을 결정한다.
  • box-sizing: content-box : 요소의 내용을 기준으로 크기를 계산한다.
  • box-sizing: border-box : padding 과 border 를 합친 크기를 기준으로 크기를 계산한다.
• overflow : 요소의 크기 이상으로 내용이 넘쳤을 때, 어떻게 보여질 지를 제어한다.
  • overflow: visible : 기본 값이며, 그대로 보여준다.
  • overflow: hidden : 넘친 내용을 자른다.
  • overflow: scroll : 넘치는 부분만 잘라내고, 스크롤 바를 생성한다.
• display : 요소의 화면 출력 특성을 지정한다.
  • 기본 값은 요소의 특성에 맞게 설정 되어있다.
  • display: block : 해당 요소를 블록 요소로 만든다.
  • display: inline : 해당 요소를 인라인 요소로 만든다.
  • display: flex : 요소들의 레이아웃을 1차원으로 나열한다.
  • display: grid : 요소들의 레이아웃을 2차원으로 나열한다.
  • display: none : 요소를 숨긴다. HTML문서에 존재하지만 보여지지는 않는다. 레이아웃도 영향을 받는다.
• opcaity : 요소의 투명도를 설정한다. 0이 기본값이며, 레이아웃에는 영향을 주지 않는다.
• font style : 텍스트의 기울기를 설정한다.
  • font style: normal : 기본 값으로 아무런 기울기를 주지 않는다.
  • font style: italic : 텍스트를 이탤릭체 스타일로 기울인다.
• font-weight : 텍스트의 두께를 설정한다.
  • font-weight: normal : 기본 값으로 아무런 두께를 주지 않는다.
  • font-weight: bold : 약간 두껍게 한다.
  • 100 ~ 900까지 값을 줄 수 있으나, 400(normal)과 700(bold)을 주로 사용한다.
• font-size : 텍스트의 크기를 설정한다.
  • px, px, em, rem단위 등으로 지정한다.
• line-height : 줄의 높이를 설정한다.
  • line-height: normal 기본 값이다.
  • em단위로 요소의 텍스트 크기의 배수로 지정하는 걸 권장한다.
  • 글자가 y축기준 가운데 정렬이 된다.
• font-family : 텍스트의 글꼴을 설정한다.
  • font-family (글꼴) (글꼴) (글꼴계열) : 명시한 글꼴들을 앞쪽부터 차례대로 사용하려고 시도한다. 글꼴은 여러개 명시할 수 있다. 글꼴이름에 띄어쓰기 등 특수문자가 있으면 ""로 묶어야 한다. 아무런 글꼴도 찾지 못했을 경우 마지막에 명시한 계열의 아무런 글꼴을 사용한다.
  • 글꼴계열 : serif(바탕체), sans-serif(고딕체), monospace(고정너비).
• color : 텍스트의 색상을 설정한다.
  • color: (색상) : 기본값은 흰색 rgb(0, 0, 0)이다.
• text-align : 문자의 정렬방식을 설정한다.
  • text-align: left : 기본 값으로 왼쪽으로 정렬한다.
  • text-align: right : 오른쪽으로 정렬한다.
  • text-align: center : 가운데로 정렬한다.
• text-decoration 문자에 선을 넣는다.
  • text-decoration: none : 기본 값으로 선을 넣지 않는다. <a> 요소는 제외한다.
  • text-decoration: underline : 텍스트에 밑줄을 추가한다.
  • text-decoration: line-through : 텍스트에 중앙선을 추가한다.
• text-indent : 지정한 값만큼 들여쓰기를 한다.
  • px, em, rem 등의 단위로 설정할 수 있다.
  • 음수로 내어쓰기도 가능하다.
• background-color : 배경 색상을 설정한다.
• background-image : 배경 이미지를 추가한다.
  • background-image: url("경로") : 추가할 이미지의 절대경로 혹은 상대경로를 작성한다.
  • 이 후, 배경 이미지의 width, height를 따로 명시해야 한다.
• background-repeat : 배경의 반복을 제어한다. 기본적으로 바둑판식 배열로 정렬된다.
  • background-repeat: repeat : 기본 값으로 x, y축으로 반복된다.
  • background-repeat: no-repeat : 반복을 하지 않는다.
  • background-repeat: repeat-x : x축으로 반복한다.
  • background-repeat: repeat-y : y축으로 반복한다.
• background-size : 배경의 크기를 설정한다. 바둑판식 배열로 정렬된다. 가로나 세로 하나만 명시하면 그에 따라 비율이 유지된다.
  • background-size: auto : 기본값이며, 이미지의 실제 크기로 설정된다.
  • background-size: cover : 이미지의 비율을 유지하되, 요소의 더 넓은 너비에 맞춘다.
  • background-size: contain : 이미지의 비율을 유지하되, 요소의 더 짧은 너비에 맞춘다.
  • px,em,rem 등의 단위로 설정할 수 있다.
• background-position : 배경이미지 위치를 설정한다.
  • background-position: (위치, x축) (위치, y축) : 두 개의 값을 입력한다.
  • 방향 : top, right, center, left 등의 위치를 입력한다.
  • x, y축 : px, em, rem 등의 단위로 입력한다.
• background-attachment : 배경이미지 스크롤 특성을 설정한다.
  • background-attachment: scroll : 기본 값으로, 화면을 스크롤 하면 그에 맞춰 이미지도 이동한다.
  • background-attachment: fixed : 화면을 스크롤 하여도 이미지가 Viewport기준 위치한 자리를 유지한다.