CSS / quotes / 인라인 인용문의 기호를 꾸미는 속성

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>

인용문을 감싸는 큰따옴표를 다른 기호 또는 문자로 바꿔주는 것이 quotes 속성입니다. 예를 들어 <와 >로 바꾼다면 다음과 같이 합니다.

<!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>

인용 기호를 사용하지 않으려면 속성값을 none으로 합니다.

quotes: none;

Related Posts

CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

CSS / 애니메이션 / animation / @keyframes - 모양의 변화를 정하는 속성

@keyframes @keyframes로 어떤 모양에서 어떤 모양으로 변할 지 정합니다. IE는 버전 10 이상에서 사용할 수 있습니다. 문법 @keyframes name { 0% { ... } n% { ... } 100% { ... } } name : 애니메이션의 이름을 정합니다. 0% : 시작할 때의 모양을 정합니다. 0% 대신 from을 사용해도 ...

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

CSS / box-shadow / 박스에 그림자 효과 만드는 속성

개요 box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 box-shadow: none | x-position y-position blur spread color | inset | initial | inherit none : 그림자 효과를 없앱니다. x-position : 가로 위치입니다. 양수면 오른쪽에, 음수면 왼쪽에 그림자가 만들어집니다. (필수) y-position : 세로 위치입니다. 양수면 아래쪽에, 음수면 ...

CSS / 애니메이션 / transition / transition-timing-function - transition 진행 속도 조절하는 속성

CSS / 애니메이션 / transition / transition-timing-function - transition 진행 속도 조절하는 속성

transition-timing-function transition-timing-function으로 transition의 진행 속도를 조절할 수 있습니다. IE는 버전 10부터 지원합니다. 문법 transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps( n, start|end ) | cubic-bezier( n, n, n, n ) | initial | inherit; 기본값은 ease입니다. ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같습니다. linear : cubic-bezier( 0, ...

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

CSS / max-width, height로 반응형 웹디자인을 위한 이미지 스타일링 하기

반응형 웹디자인은 웹브라우저의 가로폭에 따라 레이아웃이 변하고, 그에 따라 각 요소의 가로폭도 변합니다. 텍스트는 일반적으로 바뀐 폭에 맞추어 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다. 이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보다 큰 이미지는 부모 요소를 벗어나서 나타납니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

CSS / Flex / align-self / 아이템의 교차축 정렬 정하는 속성

align-items로 교차축(cross axis) 아이템 정렬을 정합니다. 이렇게 정한 정렬은 콘테이너 안의 모든 아이템에 적용됩니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> body { box-sizing: border-box; ...

CSS / 기초 / !important

CSS / 기초 / !important

개요 CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용됩니다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 !important를 붙입니다. 문법 property: value !important; 예를 들어 다음은 마지막에 설정한 color의 값이 blue이므로, red는 무시하고 문단의 글자색을 파란색으로 만듭니다. p { color: red; } p { color: blue; } 하지만 다음은 red에 !important가 있으므로 문단의 글자색을 ...

CSS / float와 overflow

CSS / float와 overflow

float float는 요소를 왼쪽 또는 오른쪽에 배치할 때 유용한 속성입니다. float 속성을 부여한 요소의 다음 요소는 float 속성을 부여한 요소가 차지하는 위치만 제외하고 나머지 공간을 채우게 됩니다. 사진을 왼쪽 또는 오른쪽에 배치하고 그 주위를 텍스트로 채울 때 사용하거나, 사이트 레이아웃을 만들 때 사용합니다. overflow overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. ...

CSS / 표(table) 꾸미기 / 크기 정하기

CSS / 표(table) 꾸미기 / 크기 정하기

표와 셀의 기본 크기 표와 셀의 크기는 정해져있지 않습니다. 내용이 짧으면 작게, 내용이 길면 크게 표와 셀이 만들어집니다. 의도하지 않은 결과가 나오지 않게 하려면 크기를 정하는 게 좋습니다. 크기를 직접 정할 때 사용하는 속성은 width 속성과 height 속성입니다. 다음은 크기를 파악하기 위해 테두리만 추가한 간단한 표입니다. 여기에 스타일을 추가해서 크기를 변경해보도록 하겠습니다. <!doctype html> <html lang="ko"> ...

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

CSS / text-decoration / 선으로 텍스트를 꾸미는 속성

개요 text-decoration은 선으로 텍스트를 꾸밀 수 있게 해주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1 문법 text-decoration: none | line-through | overline | underline | initial | inherit none : 선을 만들지 않습니다. line-through : 글자 중간에 선을 만듭니다. overline : 글자 위에 선을 만듭니다. underline : 글자 아래에 선을 만듭니다. initial : 기본값으로 ...

CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성

CSS / 애니메이션 / animation / animation-direction - 진행 방향 정하는 속성

animation-direction animation-direction은 애니메이션의 진행 방향 정하는 속성입니다. 애니메이션 관련 속성은 IE 버전 10 이상에서 사용할 수 있습니다. 문법 animation-direction: normal | reverse | alternate | alternate-reverse | initial | inherit normal : 기본값입니다. 정해진 순서로 진행합니다. reverse : 반대 순서로 진행합니다. alternate : 정해진 순서로 진행했다가 반대 순서로 진행합니다. alternate-reverse : 반대 순서로 진행했다가 정해진 순서로 진행합니다. initial : ...

CSS 강좌