content : 컨텐츠 및 문자열 추가
가상 선택자를 이용해 가상의 컨텐츠를 끼워넣을 수 있는 속성.

사용법은 다음과 같다.
1. open-quote, close-quote
  
  ::before, ::after를 활용해 임의의 문자열을 앞 뒤로 넣을 수 있다.
  
  1
  2
  3
  4
  5
  6
  7
  .paper p::before{
  content: open-quote;
  }
  .paper p::after{
  content: close-quote;
  }
  cs
  
  코드 예시
  
  졸려요. 지금은 새벽 2시 14분.
  
  content : open-quote, close-quote
2. ""
  
  "" 안에 넣고 싶은 텍스트를 넣으면 된다. (텍스트만 가능)
  
  1
  2
  3
  4
  5
  6
  7
  .paper2 p::before{
  content: "%";
  }
  .paper2 p::after{
  content: "%";
  }
  cs
  
  코드 예시
  
  졸려요. 지금은 새벽 2시 14분.
  
  content : ""
3. 혼용하기, 여러 개 쓰기
  
  ""와 open-quote · close-quote를 혼용해서 쓸 수 있다.
  
  또한 띄어쓰기로 구분해서 여러개 쓸 수도 있다. 작성한 순서대로 적용된다.
  
  1
  2
  3
  4
  5
  6
  7
  .paper3 p::before{
  content: open-quote "#";
  }
  .paper3 p::after{
  content: "#" close-quote;
  }
  cs
  
  코드 예시
  
  자고인남. 지금은 오후 12시 17분.
  
  content : 혼용하기
quotes : 좌우 문자열 추가

가상 선택자를 쓰지 않고도 간단하게 문자열을 추가 해준다. 인용문을 작성할 때 쓰는 q 전용 속성.

1
2
3
.paper4 q{
quotes: "+""+";
}
cs

코드 예시

빈수레가 요란하다.

quotes 사용

작성 시 유의사항

값은 무조건 두 개 넣어야 한다.

쌍 따옴표는 홑 따옴표 안에, 홑 따옴표는 쌍 따옴표 안에. 이 규칙을 꼭 지켜야 한다.

counter-increment, counter : 번호 매기기

특정 구획에 넘버링을 할 수 있는 속성.

사용법은 아래 코드의 주석문 참고.

1
2
3
4
5
6
7
8
9
10
11
12
13
.paper5 p{/*넘버링 하고 싶은 태그(선택자)를 선택*/
    margin-bottom: 20px;
    counter-increment: numburing;
    /*변수명 지정. 네이밍 규칙은 class나 id와 동일함*/
}
.paper5 p::before{/*넘버링은 가상 선택자로 들어간다.*/
    content: counter(numburing, upper-roman);
    /*변수명, 원하는 문자열(선택사항)*/
    font-size: 20px;
    font-weight: bold;
    color: red;
}
cs

counter-increment, counter 속성 적용 코드

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non. Quis hendrerit dolor magna eget est lorem ipsum dolor sit. Volutpat odio facilisis mauris sit amet massa.

Commodo odio aenean sed adipiscing diam donec adipiscing tristique. Mi eget mauris pharetra et. Non tellus orci ac auctor augue. Elit at imperdiet dui accumsan sit. Ornare arcu dui vivamus arcu felis. Egestas integer eget aliquet nibh praesent.

Senectus et netus et malesuada. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Neque convallis a cras semper auctor. Libero id faucibus nisl tincidunt eget. Leo a diam sollicitudin tempor id. A lacus vestibulum sed arcu non odio euismod lacinia.

문단에 번호 매기기

MDN 문서를 찾아보니 좀 더 복잡한게 사용할 수도 있는 것 같았다.

링크 참고. CSS 카운터 사용하기

넘 어려워서 중간에 읽는 걸 포기함...

콘텐츠 생성하기

Freedom is not worth having if it does not include the freedom to make mistakes. Mahatma Gandhi 실수할 자유가 없는 자유란 가치가 없다. 마하트마 간디

The future depends on what we do in the present. Mahatma Gandhi 미래는 현재 우리가 무엇을 하는가에 달려 있다. 마하트마 간디

content : 컨텐츠 및 문자열 추가

quotes : 좌우 문자열 추가

작성 시 유의사항

counter-increment, counter : 번호 매기기

콘텐츠 생성하기