css :before, :after 가상태그의 활용

점점 모바일과 반응형 사이트의 빈도가 많아지면서 가상태그를 사용하게 되는 경우가 많아졌습니다.

아래와 같이 간단하게 마크업을 했을 경우에 

<p>welcome to designsharp</p>

css로 :before 가상태그를 넣어줍니다.

p:before {
    content: "hi bro! ";
    font-weight: bold;
    font-style: italic;
}

그럼 아래와 같은 결과화면을 볼 수 있습니다~

---

이번에는 :before 가상태그를 이용해 아이콘을 한번 넣어보겠습니다~

p:before {
    content: "";
    display: block;
    background: url("http://icons.iconarchive.com/icons/iconsmind/outline/128/Angry-icon.png") no-repeat;
    width: 128px;
    height: 128px;
    float: left;
    margin: 0 6px 0 0;
}

css는 위와 같이 작성을 했습니다.

그럼 결과화면은 다음과 같습니다.

css를 어떻게 작성하느냐에 따라서 :after를 사용해 텍스트 이전 혹은 이후에 삽입 할 수 있습니다.

---

이번에는 가상태그를 응용하여 현재위치(Breadcrumbs)를 보여주는 태그를 작성해보겠습니다.

서브페이지에서 많이들 보시는 home > 1뎁스메뉴 > 2뎁스메뉴 이런 식으로 말이죠~

<p>
    <a href="#">Home</a>
    <a href="#">designsharp</a>
    <a href="#">css</a>
</p>

a {
    text-decoration: none;
    font-weight: bold;
    color: #000;
}
a:after {
    content: " /";
}
a:first-child:before {
    content: " » ";
}
a:last-child:after {
    content: "";
}

css를 살펴보면 a태그 뒤에 "/" 컨텐츠를 이후(:after)에 붙도록 마크업이 되어있고,

첫번째(first-child) a태그 이전(:before)에 "»" 태그를 붙였습니다.

그리고 마지막으로 a태그의 마지막(:last-child) a태그 뒤로(:after)는 content를 공백으로 두어 아무것도 붙지 않게 하였습니다.

그동안 위와같은 방식이 있음에도 불구하고 국내 웹환경은 익스플로러 구버젼에 굉장히 많이 의존적이라 사용하기가 굉장히 껄스러웠습니다. 하지만 익스플로러의 구버전(ie8 이하)들을 조금씩 버리기 시작하면서 앞으로는 가상태그를 보편적으로 마크업 할 날들이 많아질 것 같습니다.

해당 가상태그는 ie9부터 완벽 지원이 됩니다. 물론 8도 사용은 할 수 있죠~ 그러러면 문서타입(<!DOCTYPE>)을 선언해줘야 하고 또한 콜론(:)을 반드시 한개만 써야한다는거...

위의 방법 말고도 class를 이용해 background로 이미지를 붙여서 작업을 하거나 스크립트를 활용하여 breadcrumb를 만들 수도 있습니다. 

$links = array('Home', 'Designsharp', 'css');
$str = '» ';
for($i=0; $i<count($links); $i++) {
    $str .= '<a href="#">'.$links[$i].'</a>';
    if($i < count($links)-1) {
        $str .= ' / ';
    }
}
echo $str;

breadcrumb를 개발을 이용해 뿌려줄 경우에는 이렇게 단순하게 만들어 뿌려도 좋긴 하겠습니다~