여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. before after content 속성
before after content 속성
7개월전 작성
8개월전 수정

before / after 속성을 이용하여 선택한 요소 앞 뒤로 자식 요소 생성하여 content를 추가해보자.

CSS – before, after

CSS에서 사용할 수 있는 :before, :after에 대해 알아보자.

:before

선택한 요소의 첫 자식으로 의사 요소를 하나 생성한다.

:after

선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성한다.

content

content 속성으로 문자를 넣을 수 있다.

html 태그는 삽입이 불가능하다.

html 태그를 삽입하고자 하는경우 jquery를 이용할 수 있다.

q 태그

이 예시에서는 q 태그의 앞,뒤로 content 추가하는 방법을 알아볼 수 있다.

q 태그 대신 blockquote를 이용해도된다.

CSS
q { quotes: "“" "”" "‘" "’"; }
q:before { content: open-quote; }
q:after { content: close-quote; }
HTML
<q>차가운 <q>적막</q> 속에 갇힌 밤</q>
기본 예시
차가운 적막 속에 갇힌 밤

ul li 태그

CSS
li {
list-style-type: none;
position: relative;
margin: 2px;
padding: 0.5rem 0.5rem 0.5rem 2rem;
background: lightgrey;
font-family: sans-serif;
}

li.done {
background: #CCFF99;
}

li.done:before {
content: '';
position: absolute;
border-color: #009933;
border-style: solid;
border-width: 0 0.3rem 0.25rem 0;
height: 1rem;
top: 1.3rem;
left: 0.6rem;
margin-top: -1rem;
transform: rotate(45deg);
width: 0.5rem;
}
HTML
<ul>
<li>Buy milk</li>
<li>Take the dog for a walk</li>
<li>Exercise</li>
<li>Write code</li>
<li>Play music</li>
<li>Relax</li>
</ul>
Javascript
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
     ev.target.classList.toggle('done');
  }
}, false);
기본 예시

jQuery – before after

jQuery를 이용하여 HTML 태그를 삽입할 수 있다.

before

요소 앞에 컨텐츠를 삽입할 수 있다.

$(요소 이름).before(삽입할 컨텐츠); 와 같이 입력한다.
워드프레스에서는 jQuery(요소 이름).before(삽입할 컨텐츠); 이런식으로 입력한다.

Javascript
$("div").before("<div>Please let me go</div>");
HTML
<div>
긴 어둠 속 날 꺼내줘
</div>
기본 예시
Please let me go
긴 어둠 속 날 꺼내줘

after

요소 뒤에 컨텐츠를 삽입할 수 있다.

$(요소 이름).after(삽입할 컨텐츠);와 같이 입력한다.
워드프레스에서는 jQuery(요소 이름).after(삽입할 컨텐츠); 이런식으로 입력한다.

Javascript
$("div").after("<div>Just let me go</div>");
HTML
<div>
긴 어둠 속 날 꺼내줘
</div>
기본 예시
긴 어둠 속 날 꺼내줘
Just let me go

prepend

요소의 시작 태그 바로 뒤에 컨텐츠를 삽입할 수 있다.

$(요소 이름).prepend(삽입할 컨텐츠);
워드프레스에서는 jQuery(요소 이름).prepend(삽입할 컨텐츠); 이런식으로 입력한다.

Javascript
$("div").prepend("
Please let me go
");
<div>
긴 어둠 속 날 꺼내줘
</div>
기본 예시
Please let me go

긴 어둠 속 날 꺼내줘

append

요소의 종료 태그 바로 앞에 컨텐츠를 삽입할 수 있다.

$(요소 이름).append(삽입할 컨텐츠);
워드프레스에서는 jQuery(요소 이름).append(삽입할 컨텐츠); 이런식으로 입력한다.

Javascript
$("div").append("
Just let me go
");
<div>
긴 어둠 속 날 꺼내줘
</div>
기본 예시
긴 어둠 속 날 꺼내줘

Just let me go
참고
Mingg`s Diary
밍구
공부 목적 블로그