CODING FACTORY

Category : CSS Reference

CSS / Reference / background-size

목차1 개요2 문법3 예제 개요 background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 background-size: auto | length | cover | contain | initial | inherit auto : 이미지 크기를 유지합니다. length : 값을 두 개 […]

CSS / Reference / quotes

목차1 개요2 문법3 예제 개요 quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다. 기본값 : 큰따옴표 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 quotes: none | string | initial | inherit none : 인용 부호를 없앱니다. string : 인용 부호로 […]

CSS / Reference / word-wrap

목차1 개요2 문법3 예제 개요 word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈합니다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 […]

CSS / Reference / word-break

목차1 개요2 문법3 예제 14 예제 2 개요 word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-break: normal | break-all | keep-all | initial | inherit; normal : CJK […]

CSS / Reference / text-align

목차1 개요2 문법3 예제 개요 text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 text-align: left | right | center | justify | initial | inherit left : 왼쪽 […]

CSS / Reference / line-height

목차1 개요2 문법3 예제 14 예제 2 개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 […]

CSS / Reference / aspect-ratio

목차1 개요2 문법3 예제 - 고유 가로 세로 비율이 없는 요소4 예제 - 고유 가로 세로 비율이 있는 요소 개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다. 문법 aspect-ratio: auto | number / number […]

CSS / Reference / border-width

목차1 개요2 문법3 예제 개요 border-width은 테두리(border)의 두께를 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-width border-right-width border-bottom-width border-left-width 문법 border-width: medium | thin | thick | length | initial | inherit; initial : 기본값으로 설정합니다. 기본값은 medium입니다. inherit : 부모 요소의 속성값을 상속받습니다. 속성값은 한 개에서 네 개까지 정할 수 […]

CSS / Reference / tab-size

목차1 개요2 문법3 예제 개요 HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 예를 들어 아래처럼 탭을 이용하여 들여쓰기를 하면... <html lang="ko"> <head> <meta charset="utf-8"> <title>HTML</title> <style> pre { font-family: Consolas, monospace; font-size: 24px; […]

CSS / Reference / align-content

목차1 개요2 문법3 예제 - stretch4 예제 - flex-start5 예제 - center6 예제 - flex-end7 예제 - space-between8 예제 - space-around9 예제 - space-evenly 개요 flex-wrap 속성의 값이 wrap인 경우, 아이템들의 가로폭의 합이 콘테이너의 가로폭을 넘어가면 아이템이 다음 줄로 내려갑니다. 이때 여러 줄이 되어버린 아이템들의 정렬을 어떻게 할지 정하는 속성이 […]