css content 특성을 다뤄보자.

CSS의 잔기술이나 조각 집 따위를보고 있으면 가끔 볼 content프로퍼티. "그러고 보니이 녀석 도대체 누구 ... !?」라고 생각한 분도 있을지도 모르기 때문에 새삼 다시 content프로퍼티의 소개를하려고합니다.

content 프로퍼티 에 대해서 알아보자.

content특성은 요소의 전후에, :before또는 :after라는 의사 요소를 사용하여 텍스트 나 이미지 등의 콘텐츠를 삽입 할 때 사용합니다. 가짜 요소는 HTML 등의 문서에 설명되지 않은 요소를 CSS에 의해 새롭게 생성 된 가상의 요소입니다. Web 크리에이터 상자에서도 지난 기사 " 예전에는 JavaScript를 사용하고 있었지만, 지금은 CSS만으로 구현할 수있는 10의 잔기술 "과 " 경력이나 회사의 연혁 페이지에! 간단한 CSS로 구현하는 타임 라인 '등 에서 소개 한 잔기술로 이용하고 있습니다.

기억 되길 바란다는이 content특성을 사용하여 표시 한 텍스트는 선택하거나 복사 및 붙여 넣기 수 없습니다 . 문장으로 표시하려면 CSS를 사용하지 않고, 제대로 HTML 내에 기술합시다.

: before와 : before 차이

CSS 샘플 등이 :beforeや:after라고 쓰여진 것과 ::before, ::after라고 쓰여진 있지만 두 가지를 본 적이 있을지도 모릅니다. 이것은 CSS 버전의 차이에 의해 작성이 다릅니다. CSS2까지 결장 하나로 묘사하고있었습니다 만, CSS3되어 콜론이 두되었습니다. 현재 콜론 두 사용 문제 없다고 생각 합니다만, IE8 다음 이전 브라우저에 대응하고 있지 않기 때문에, 만약 대응할 필요가 있다면 지금 그대로 콜론 하나에 해 둡시다.

그럼 content프로퍼티를 사용한 몇 가지 예를 소개합니다! 데모의 "HTML" "CSS"탭을 클릭하면 각각의 코드가 표시됩니다!

텍스트를 표시

:before나 :after의사 요소를 사용하여 요소의 전후에 텍스트를 볼 수 있습니다. 쓰기는 쉽고 의사 요소 content: "텍스트의 내용";를 추가하면 OK. 텍스트는 단일 또는 더블 클릭 쌍 따옴표로 둘러싸을 잊지 않고!

다음의 예에서는 "new"라는 클래스가 붙은 목록 후 "NEW!"라는 텍스트를 표시하고 있습니다. 텍스트 장식도 있기 때문에 멋지게 정의 해 버려서주시면 됩니다.!

<ul>

  <li class="new">사과셋트 - $198.00</li>

  <li>오이셋트 - $48.00</li>

  <li>가지셋트 - $98.00</li>

  <li class="new">오렌지셋트 - $148.00</li>

</ul>

li {

  margin: 10px 0;

}

.new:after {

  content: "hi!";

  font-size: .75em;

  background: #FF9F80;

  color: #fff;

  padding: 5px 5px 3px;

  margin-left: 5px;

  border-radius: 3px;

}

참고로 텍스트를 줄 바꿈하려면 \A를 설명합니다. 원래 요소 white-space: pre;를 추가하지 않으면 잘 줄 바꿈되지 않는 것 같습니다.

<ul>

  <li class="new">사과셋트 - $198.00</li>

  <li>오이셋트 - $48.00</li>

  <li>가지셋트 - $98.00</li>

  <li class="new">오렌지셋트 - $148.00</li>

</ul>

li {

  margin: 10px 0;

}

.new {

  white-space: pre;

}

.new:before {

  content: "hi";

  display: inline-block;

  text-align: center;

  font-size: .5em;

  background: #FF9F80;

  color: #fff;

  padding: 5px 5px 3px;

  margin-right: 5px;

  border-radius: 5px;

  line-height: 1.2;

}

이미지보기

content는 텍스트뿐만 아니라 이미지를 지정할 수도 있습니다. 배경 이미지를 지정하는 것과 마찬가지로 url에서 이미지의 경로를 설명합니다. 예를 들어 링크 나 파일 유형에 따라 아이콘을 변경하고 있습니다.

http:// 에서 시작하는<a href="http://google.com">외부 링크</a>아이콘을 플러스. mailto를 사용한<a href="mailto:hello@example.com">이메일 링크</a>에 이메일 아이콘. URL을 지정할 수도 있습니다.<a href="example.pdf">PDF 파일 등 파일 확장자 지정도 할 수 있네요!

a:before {

  padding: 0 5px;

}

/* 外部リンク */

a[href^="http://"]:before {

  content: url(http://webcreatorbox.com/sample/images/link.svg);

}

/* メール */

a[href^="mailto:"]:before {

  content: url(http://webcreatorbox.com/sample/images/email.svg);

}

/* PDF */

a[href$=".pdf"]:before {

  content: url(http://webcreatorbox.com/sample/images/doc.svg);

} 

카운터

"제 장 제 2 장 ..."이나 "한 시간 째 두 시간 째 ..."등 숫자 + 다른 단어도 함께 표시하려면 counter-increment속성과 content특성을 함께 사용합니다. 이 특성을 사용하면 지정된 요소가 등장 할 때마다 숫자를 하나씩 늘려 나갈 수 있습니다. 또한 목록 태그를 사용하지 않고도 구현할 수 있지만, "번호 목록"의 역할을 가진 ol태그를 사용하는 것이 무난라고 생각합니다.

  <li>안녕하세요</li>

  <li>감사해요</li>

  <li>잘있어요</li>

  <li>다시만나요</li>

</ol>

li {

  list-style: none;

  counter-increment : chapter;

}

li:before {

  content : "하" counter(chapter) "마";

  padding-right: 10px;

} 

링크의 URL을 표시하는

content속성은 표시 할 속성을 지정할 수 있습니다. 예를 들어 링크 URL입니다. 페이지를 인쇄 할 때 링크 텍스트는 인쇄해서 URL이 표시되지 않기 때문에 어디에 연결되어 있는지 알 수 없습니다. 그럴 때 @media print에 인쇄 CSS를 준비하고 content: " (" attr(href) ")";에서 링크 텍스트 옆에 URL을 표시하면 좋을 것입니다. 또한 다음 예제에서는 링크가 #와 JavaScript의 경우는 표시하지 않도록하고 있습니다. 

<p>

    HyperText Markup Language（하이퍼 텍스트 마크 업 언어）、약기・약칭：HTML（html）과、

    웹상의 문서를 작성하기위한 마크 업 언어이다. 문장 안에 기술하는 것으로 다양한 기능을 설명 설정할 수있다.<br>

    - <a href="http://ja.wikipedia.org/wiki/HTML">Wikipedia</a>보다

</p>

<p>

    <a href="#">링크가 # </a>의 경우 URL은 표시되지 않습니다.

</p>

@media print {

    a[href]:after {

        content: " (" attr(href) ") ";

    }

    a[href^="#"]:after,

    a[href^="javascript"]:after {

        content: "";

    }

}

툴팁에 title 속성의 텍스트를 표시

URL과 마찬가지로 속성을 지정하여 표시하는 잔기술을 하나 더. " 예전에는 JavaScript를 사용하고 있었지만, 지금은 CSS만으로 구현할 수있는 10의 잔기술 "에서 소개 한 툴팁의 예제에서는 content: attr(title);에서 title속성을 지정하여 표시하고 있습니다. 아이디어 나름으로 여러가지 응용이 있을지도?

<a href="#" title="Hello from speech bubble!" class="tooltip">CSS Tooltip! Hover me!</a>

body {

  margin-top: 100px;

  text-align: center;

}

a {

  font-size:25px;

  color: #0bd;

  text-decoration: none;

}

.tooltip {

  display: inline;

  position: relative;

}

.tooltip:hover:after{

  display: -webkit-flex;

  display: flex;

  -webkit-justify-content: center;

  justify-content: center;

  background: #444;

  border-radius: 8px;

  color: #fff;

  content: attr(title);

  margin: -82px auto 0;

  font-size: 16px;

  padding: 13px;

  width: 220px;

}

.tooltip:hover:before{

  border: solid;

  border-color: #444 transparent;

  border-width: 12px 6px 0 6px;

  content: "";

  left: 45%;

  bottom: 30px;

  position: absolute;

}

인용문에 괄호를 붙이는

blockquote내 문장의 전후에 CSS에서 자동으로 괄호를 추가합니다. 우선 blockquote요소에 quotes속성으로 전후에 이용하는 부류를 지정. (물론 괄호 이외의 캐릭터 라인도 OK!) 그리고 :before그리고 :after각 open-quote과 close-quote를 지정해 주면 문장의 앞뒤에 괄호가 표시됩니다.

<blockquote>

  산은 산이요 물은 물이다.

</blockquote>

<blockquote>

  사람의 욕심은 끝이 없고 같은 실수를 반복한다.

</blockquote>

blockquote {

  quotes: "「" "」";

  margin: 30px;

  padding: 20px;

  border-left: 5px #ccc solid;

  background: #eee;

  line-height: 1.5;

}

blockquote:before {

  content: open-quote;

}

blockquote:after {

  content: close-quote;

}

의사 요소와 content특성에 수 많은 장식으로 디자인에 덧붙이는 정도의 것이 많을 까 생각합니다. 그러나 잘 다룰하면 꽤 유용하기 때문에 이것 저것 시도하십시오!