CSS / Reference / quotes
개요
quotes는 q 태그로 만든 인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 속성입니다.
- 기본값 : 큰따옴표
- 상속 : Yes
- 애니메이션 : No
- 버전 : CSS Level 2
문법
quotes: none | string | initial | inherit
- none : 인용 부호를 없앱니다.
- string : 인용 부호로 사용할 값을 넣습니다.
- initial : 기본값으로 설정합니다.
- inherit : 부모 요소의 속성값을 상속받습니다.
예제
- q 태그는 문단 안에서 사용하는 인용문입니다. 기본 모양은 큰따옴표로 감싸는 것입니다. 간단한 예는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
</head>
<body>
<h1>Lorem <q>Ipsum</q> Dolor</h1>
</body>
</html>
- 인용문을 감싸는 큰따옴표를 <와 >로 바꿉니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
q {
quotes: "<" ">";
}
</style>
</head>
<body>
<h1>Lorem <q>Ipsum</q> Dolor</h1>
</body>
</html>
- 속성값을 4개 부여하면 앞의 두 개는 1단계 인용문, 뒤의 두 개는 2단계 인용문에 사용합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
q {
quotes: "<" ">" "(" ")";
}
</style>
</head>
<body>
<h1>Lorem <q>Ipsum <q>Amet</q></q> Dolor</h1>
</body>
</html>
CSS / Reference / caption-side
caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2
CSS / Reference / aspect-ratio
aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.
content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2
CSS / Reference / list-style-position
list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1
font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
CSS / Reference / border-style
border-style은 테두리(border)의 모양을 정하는 속성으로, 다음 속성의 단축 속성입니다. border-top-style border-right-style border-bottom-style border-left-style
color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1
word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3
CSS / Reference / background-color
background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1
font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1