HTML + CSS + JavaScript
[CSS] 자주 사용하는 CSS 속성 목록
민이뭘라이프
2022. 7. 22. 14:48
<한 권으로 끝내는 HTML + CSS 웹 디자인 입문, 위키북스> p.172~176 발췌
문자와 문장 장식
| 속성 | 용도 | 값 | |||
| font-size | 문자크기 | 숫자 ▶ 숫자에 px(픽셀 ), em(배수), %(백분율) 등의 단위를 붙임 키워드 ▶ xx-small, x-small, small, medium, large, x-large, xx-large 라는 7단계를 지정한다. medium이 표준 크기이다. |
|||
| font-family | 폰트 종류 | 폰트 이름 ▶ 폰트의 이름을 지정한다. 한국어 또는 폰트 이름에 띄어쓰기가 포함된 경우에는 폰트 이름을 작은따움표로 감싸 지정한다. 키워드 ▶ sans-serif(고딕체), serif(명조체), cursive(필기체), fantasy(장식 계열), monospace(고정폭)을 지정한다. |
|||
| font-weight | 문자의 두계 | 키워드 ▶ normal(표준), bold(두꺼운 글자), lighter(얇은 글자), bolder(많이 두꺼운 글자) 숫자 ▶ 1~1000 사이의 숫자 |
|||
| line-height | 줄 높이 | normal ▶ 브라우저가 판별한 줄 높이로 출력 숫자(단위 없음) ▶ 폰트 크기를 기반으로 비율로 지정 숫자(단위 있음) ▶ 숫자에 px(픽셀 ), em(배수), %(백분율) 단위를 붙임 |
|||
| text-align | 텍스트 정렬 | left 왼쪽 정렬, right 오른쪽 정렬, center 중앙 정렬, justify 양쪽 정렬 | |||
| text-decoration | 텍스트의 밑줄 또는 삭제선 등의 장식 |
none 장식 없음, underline 밑줄, overline 윗줄, line-through 삭제선 | |||
| letter-spacing | 문자 간격 | normal 표준 문자 간격 숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 |
|||
| color | 문자색 | 색상 코드 ▶ 해시(#)로 시작하는 3자리 또는 6자리 색상 코드 지정 색의 이름 ▶ red, blue 등의 결정된 색의 이름 지정 RGB 값 ▶ "rgb"로 시작하고 빨간색, 초록색, 파란색 값을 쉼표(,)로 구분해서 지정한다. 투명도를 지정하고 싶은 경우는 "rgba"로 시작하고 빨간색, 초록색, 파란색, 투명도 값(0~1)을 쉼표(,)로 구분해서 지정한다. |
|||
| font | 포트와 관련된 속성을 한꺼번에 지정 | font-style, font-variant, font-weight, font-size, line-height, font-family 의 값을 지정한다. | |||
배경 장식
| 속성 | 용도 | 값 | |||
| background-color | 배경색 | 색상 코드 ▶ 해시(#)로 시작하는 3자리 또는 6자리 색상 코드 지정 색의 이름 ▶ red, blue 등의 결정된 색의 이름 지정 RGB 값 ▶ "rgb"로 시작하고 빨간색, 초록색, 파란색 값을 쉼표(,)로 구분해서 지정한다. 투명도를 지정하고 싶은 경우는 "rgba"로 시작하고 빨간색, 초록색, 파란색, 투명도 값(0~1)을 쉼표(,)로 구분해서 지정한다. |
|||
| background-image | 배경 이미지 | url ▶ 이미지 파일 지정 none ▶ 배경 이미지를 사용하지 않음 |
|||
| background-repeat | 배경 이미지의 반복 출력 형태 |
repeat ▶ 수평 수직 방향으로 반복해서 출력한다. repeat-x ▶ 수평 방향으로 반복해서 출력한다. repeat-y ▶ 수직 방향으로 반복해서 출력한다. no-repeat ▶ 반복하지 않는다. |
|||
| background-size | 배경 이미지의 크기 | 숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 키워드 ▶ cover, contain을 지정 |
|||
| background-position | 배경 이미지를 출력하는 위치 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 키워드 ▶ 수평 방향으로 left(왼쪽), center(중앙), right(오른쪽) 또는 세로 방향으로 top(위), center(중앙), bottom(아래) |
|||
| background- attachment |
배경 이미지의 부착 형태 지정 |
scroll ▶ 화면 스크롤에 따라 배경 이미지가 함께 이동한다. fixed ▶ 화면 스크롤에 따라 배경 이미지를 고정한다. |
|||
| background | 배경과 관련된 속성을 한 번에 지정 |
background-color, background-image, background-repeat, background-attachment, background-position 값을 지정한다. | |||
너비와 높이
| 속성 | 용도 | 값 | |||
| width | 너비 | 숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| height | 높이 | 숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
여백
| 속성 | 용도 | 값 | |||
| margin | 요소 바깥 여백 | 공백으로 구별해서 위, 오른쪽, 아래, 왼쪽(시계 방향) 순서로 지정 공백으로 구별해서 위아래, 왼쪽오른쪽 순서로 지정 숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| margin-top | 요소 바깥 여백, 윗 부분 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| margin-bottom | 요소 바깥 여백, 아랫 부분 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| margin-left | 요소 바깥 여백, 왼쪽 부분 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| margin-right | 요소 바깥 여백, 오른쪽 부분 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| padding | 요소 안쪽 여백 | 공백으로 구별해서 위, 오른쪽, 아래, 왼쪽(시계 방향) 순서로 지정 공백으로 구별해서 위아래, 왼쪽오른쪽 순서로 지정 숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| padding-top | 요소 안쪽 여백, 윗 부분의 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| padding-bottom | 요소 안쪽 여백, 아랫 부분의 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| padding-left |
요소 안쪽 여백, 왼쪽 부분의 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
| padding-right |
요소 안쪽 여백, 오른쪽 부분의 여백 |
숫자 ▶ 숫자에 px, em, % 등의 단위를 붙임 auto ▶ 관련된 속성의 값에 따라 자동으로 설정한다. |
|||
테두리
| 속성 | 용도 | 값 | |||
| border-width | 테두리의 두께 | 숫자 ▶ 숫자에 px(픽셀 ), em(배수), %(백분율) 등의 단위를 붙임 키워드 ▶ thin(얇은 선), medium(보통 두께), think(두꺼운 선) |
|||
| border-style | 테두리의 종류 | none ▶ 선을 출력하지 않음, solid ▶ 1개의 실선, double ▶ 2개의 실선 dashed ▶ 파선, dotted ▶ 점선, groove ▶ 입체적으로 파인 선, ridge ▶ 입체적으로 튀어나온 선, inset ▶ 감싼 부분이 안쪽으로 들어간 것처럼 보이는 선, outset ▶ 감싼 부분이 튀어나온 것처럼 보이는 선 |
|||
| border-color | 선의 색 | 색상 코드 ▶ 해시(#)로 시작하는 3자리 또는 6자리 색상 코드 지정 색의 이름 ▶ red, blue 등의 결정된 색의 이름 지정 |
|||
| border | 선 색, 스타일, 두께를 한꺼번에 지정 | border-width, border-style, border-color의 값을 지정한다. | |||
| border-top | 요소 위의 선 색, 스타일, 두께를 한꺼번에 지정 |
border-width, border-style, border-color의 값을 지정한다. | |||
| border-bottom | 요소 아래의 선 색, 스타일, 두께를 한꺼번에 지정 |
border-width, border-style, border-color의 값을 지정한다. | |||
| border-left | 요소 왼쪽의 선 색, 스타일, 두께를 한꺼번에 지정 |
border-width, border-style, border-color의 값을 지정한다. | |||
| border-right | 요소 오른쪽의 선 색, 스타일, 두께를 한꺼번에 지정 |
border-width, border-style, border-color의 값을 지정한다. | |||
목록
| 속성 | 용도 | 값 | |||
| list-style-type | 리스트 마커의 모양 | none ▶ 마커 없음, disk ▶ 검은색 점 (기본 값), circle ▶ 흰색 점, square ▶ 검은색 사각형, decimal ▶ 숫자 마커 (1부터 시작), decimal-leading-zero ▶ 앞에 0이 붙어있는 숫자 lower-roman ▶ 소문자 로마 숫자, upper-roman ▶ 대문자 로마 숫자, cjk-ideographic ▶ 한자 숫자, hangul ▶ 한글 lower-alpha ▶ 소문자 알파벳, upper-alpha ▶ 대문자 알파벳 lower-greek ▶ 소문자 그리스 문자 |
|||
| list-style-postion | 리스트 마커의 출력 위치 |
outside ▶ 박스 밖에 출력 inside ▶ 박스 안쪽에 출력 |
|||
| list-style-image | 리스크 마커에 사용할 이미지 |
url ▶ 이미지 파일의 URL none ▶ 지정하지 않음 ex) list-style-image: url(images/star.png); |
|||
| list-style | 리스크 마커의 종류, 위치, 이미지를 한꺼번에 지정 |
list-style-type, list-style-position, list-style-image를 한꺼번에 지정한다. ex) list-style: square url(image/star.png) outside; |
|||
가시 속성
| 속성 | 용도 | 값 | |||
| display | 태그가 화면에 보이는 방식을 지정 | none ▶ 태그가 화면에 보이지 않음 block ▶ 블록 박스 형식으로 지정 (한 행을 모두 차지함) inline ▶ 인라인 박스 형식으로 지정 (왼쪽→오른쪽으로 쌓임) inline-block ▶ 블록과 인라인의 중간 형태로 지정 ※ block과 inline-block 형식은 margin 속성과 padding 속성을 상하좌우 네 방향으로 지정할 수 있고, inline 형식은 왼쪽과 오른쪽으로만 지정 가능 |
|||
| overflow | 내용물이 넘칠 경우의 처리 방식 | hidden ▶ 영역을 벗어나는 부분 감춤 scroll ▶ 영역을 벗어나는 부분을 스크롤로 만듦 |
|||
ref. <div> 태그 ▶ block 형식), <span> 태그 ▶ inline 형식
ref. block과 inline-block 형식은 margin 속성과 padding 속성을 상하좌우 네 방향으로 지정할 수 있고,
inline 형식은 왼쪽과 오른쪽으로만 지정 가능
레이아웃 구성(Flexbox)
| 속성 | 용도 | 값 | |||
| display | Flexbox 그리드를 사용해서 자식 요소를 배치 | flex | |||
| flex-direction | 자식 요소의 정렬 방향 | row(초깃값) ▶ 자식 요소를 왼쪽에서 오른쪽으로 배치한다. row-reverse ▶ 자식 요소를 오른쪽에서 왼쪽으로 배치한다. column ▶ 자식 요소를 위에서 아래로 배치한다. column-reverse ▶ 자식 요소를 아래에서 위로 배치한다. |
|||
| flex-wrap | 자식 요소의 줄바꿈 방식 |
nowrap ▶ 자식 요소를 줄바꿈 하지 않고, 한 줄로 배치한다. wrap ▶ 자식 요소를 줄바꿈 한다. 여러 줄이 되면 위에서 아래로 배치한다. wrap-reverse ▶ 자식 요소를 줄바꿈 한다. 여러 줄이 되면 아래에서 위로 배치한다. |
|||
| justify-content | 수평 방향의 정렬 | flex-start(초깃값) ▶ 줄의 시작 지점에 배치한다. 왼쪽 맞춤 flex-end ▶ 줄의 끝부분에 배치한다. 오른쪽 맞춤 center ▶ 가운데 맞춤 space-between ▶ 왼쪽과 오른쪽 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치한다. space-round ▶ 왼쪽과 오른쪽 끝에 있는 공간도 포함해서, 균등한 여백을 형성한 상태로 배치한다. |
|||
| align-items | 수직 방향의 정렬 | stretch(초깃값) ▶ 부모 요소의 높이 또는 콘텐츠의 가장 많은 자식 요소의 높이에 맞춰 늘어난다. flex-start ▶ 부모 요소의 위부분에 맞춰 배치한다. flex-end ▶ 부모 요소의 아랫부분에 맞춰 배치한다. center ▶ 중앙에 배치한다. baseline ▶ 베이스라인에 배치한다. |
|||
| align-content | 여러 줄로 만들 때의 정렬 |
stretch(초깃값) ▶ 부모 요소의 높이에 맞게 늘려서 배치한다. flex-start ▶ 부모 요소의 윗부분에 맞춰 배치한다. flex-end ▶ 부모 요소의 아랫부분에 맞춰 배치한다. center ▶ 중앙에 배치한다. space-between ▶ 위아래 끝에 있는 요소를 끝에 붙이고, 남은 부분들은 균등한 공간을 형성한 상태로 배치한다. space-around ▶ 위아래 끝에 있는 여백도 포함해서 균등한 공간을 형성한 상태로 배치한다. |
|||
레이아웃 구성(CSS 그리드)
| 속성 | 용도 | 값 | |||
| display | CSS 그리드를 사용해서 자식 요소를 배치 | grid | |||
| grid-template-columns | 자식 요소의 너비 | 숫자 ▶ 숫자에 px(픽셀 ), em(배수), %(백분율) 등의 단위를 붙임 | |||
| grid-template-rows | 자식 요소의 높이 | 숫자 ▶ 숫자에 px(픽셀 ), em(배수), %(백분율) 등의 단위를 붙임 | |||
| grid-gap | 자식 요소 사이의 여백 | 숫자 ▶ 숫자에 px(픽셀 ), em(배수), %(백분율) 등의 단위를 붙임 | |||