,



css3에서 새로 생긴 ::selection 선택자는, 블록 지정 등 웹페이지에서 마우스 좌클릭 후 스크롤할 때 반응하는 선택자입니다.


제 블로그에도 적용했는데, 아래 캡쳐와 같이 일반적인 웹페이지에서 스크롤하는 것과 다른 색깔로 블록지정이 되는 것을 확인할 수 있습니다.


원래도 윈도우즈의 기본 블록지정 색깔은 푸른색이긴 하지만 아래 캡쳐의 색깔이 기본 색상보다 좀 더 진하고 코발트색상이 섞여있다는 것을 확인할 수 있어요.



이 ::selection 선택자의 특이한 부분은, 제 블로그에 삽입한 것처럼 어두운 색상의 background가 아닌 밝은 색상의 background-color를 넣었을 때 볼 수 있습니다.


그 부분을 직접 확인하기 위해 아래 소스코드가 어떻게 동작하는지 체크해 봅시다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>


<title>tistory_p000001</title>

<style type="text/css">

*{padding:0;margin:0;font-size:1em;font-family:"돋움";line-height:1.5;}

ul, ol{list-style-type:none;}

body{background-color:#ffa;}

#header{background-color:#333;position:fixed;width:100%;top:0;left:0;height:7em;}

#header h1{color:#fff;width:1140px;margin:0 auto;font-size:4em;padding-top:0.15em;}

#container{background:url("images/tistory_p000002a.gif") repeat-y 70% top;width:1140px;margin:0 auto;overflow:hidden;margin-top:12em;box-shadow:0 0 10px rgba(0,0,0,0.2);}

#content{width:56%;padding:3.5% 7%;float:left;}

#sidebar{width:26%;padding:2%;float:left;}

#sidebar a{color:#fff;text-decoration:none;display:block;padding:5px;}

#sidebar a:hover{text-decoration:underline;}

#footer{width:900px;padding:50px 120px;margin:0 auto;}

@media screen and (max-width:1200px){

#header h1{width:95%;}

#container{width:95%;}

#footer{width:75%;padding:3% 10%;}

}

@media screen and (max-width:800px){

#content{float:none;width:86%;background-color:#fff;}

#sidebar{float:none;width:96%;background-color:#2c3e50;}

}

::-moz-selection{

background-color:#FFF55A;

color:#B92C28;

}

::selection{

background-color:#FFF55A;

color:#B92C28;

}

</style>

</head>


<body>

<div id="header">

<h1>화영의 인생교향곡</h1>

</div>

<div id="container">

<div id="content">

<p>이 책은 제가 네이버 블로그에서 창의적인 자기계발서로 극찬했던 책 &lt;관점을 디자인하라&gt;의 이론적인 토대가 되는 책입니다. 대부분의 브랜드들이 차별화를 주장하지만 실제로는 경쟁에 내몰린 나머지 다른 브랜드들과 비슷비슷해지는 현상을 고발하면서, 진정한 차별화를 하려면 어떤 전략이 필요한지를 이야기하는 경영서적입니다.</p>

<p>이 책은 그저 남들 하는 방법과 똑같이, 똑같은 목표를 가지고 열심히 노력해서는 성공할 수 없다는 사실을 극명하게 보여줍니다. 오히려 무작정 열심히 노력하는 것보다는 관점을 바꿔서 남과는 다른 목표를 가지고 다른 방식으로 노력해야 한다는 사실을 보여줍니다. 이 책의 이야기는 기업 경영에 대한 이야기이지만, 퍼스널 브랜드를 통해 성공하고자 하는 사람들에게도 유용한 전략이 될 것으로 보입니다.</p>

<p>이 책을 읽으면서 이 책에서 이야기하는 전략이 정말 필요한 곳은 우리나라의 사회적기업이라는 생각이 들었습니다. 우리나라 사회적기업들은 일반적으로 사회적인 가치에 있어서는 우수한 브랜드이지만, 일반적인 영리기업보다 경쟁의 측면에서 불리한 위치에 서 있기 때문입니다. 경쟁에서 불리한 환경을 갖춘 브랜드가 성공하는 방법이 있다면 이 책에서 말한 혁신적인 아이디어를 통한 차별화가 될 것으로 보입니다. 하지만 이 책에서 말하는 전략을 실천하는 사회적기업은 많지 않은 것으로 보입니다. 어쩌면 그런 현실 때문에 우리나라에서 성공적인 사회적기업이 드문 것이 아닌가 라는 생각을 해 봅니다.</p>

<p>여러모로 괜찮은 책이라는 생각이 듭니다. 리디북스에서 싸게 산 책인데 내용이 좋아서 본전 이상을 뽑았다는 생각이 드네요.</p>

</div>

<div id="sidebar">

<ul>

<li><a href="#">책 리뷰</a></li>

<li><a href="#">블로그 만들기</a></li>

<li><a href="#">Front-end 개발</a></li>

<li><a href="#">웹디자인</a></li>

<li><a href="#">포트폴리오</a></li>

<li><a href="#">프로그래밍</a></li>

<li><a href="#">IT일반</a></li>

<li><a href="#">취미생활</a></li>

</ul>

</div>

</div>

<div id="footer">

Copyright by <a href="http://zoahaza.tistory.com" target="_blank">Hwayoung</a>

</div>

</body>

</html>


위의 소스코드는 참고로 티스토리 반응형 블로그의 원리를 소개하면서 예제로 작성했던 소스코드를 조금 변경한 정도 수준입니다.

소스코드 직접 확인해 보시면 다음과 같은 모양이 나타남을 알 수 있습니다.



여기에서 특징적인 부분은, 밝은 배경에서 블록지정을 할 때와 어두운 배경에서 블록지정을 할 때 보여지는 배경색이 조금 다르게 보여진다는 것입니다.


이 것을 좀 더 확실하게 확인하기 위해, 배경색을 흰색으로 변경시켜 봅시다.


::-moz-selection{

background-color:#FFF;

color:#B92C28;

}

::selection{

background-color:#FFF;

color:#B92C28;

}


이렇게 소스코드를 조금 변경시킨 후 html을 실행하면 다음과 같이 나타납니다.



확실히 어두운 배경색 부분의 블록지정한 부분이 흰색이 아님을 확인할 수 있습니다.


일반적으로 저런 현상이 일어났을 때, 코드상으로 저렇게 보여지는 이유는 rgba 속성 때문이거나, opacity 속성 때문입니다.


하지만 background-color를 16진수값으로 넣었으므로, 첫번째는 이유가 될 수 없습니다.


그러니까 opacity 값이 브라우저 기본값으로 잡혀있다고 추정할 수 있습니다.


따라서 2번째 부분만을 체크해 봅시다.


아까 넣었던 부분에서 opacity:1; 을 추가해 줍니다.


opacity:1;의 역할은 요소를 완전 불투명하게 만드는 역할을 합니다.


::-moz-selection{

background-color:#FFF;

color:#B92C28;

opacity:1;

}

::selection{

background-color:#FFF;

color:#B92C28;

opacity:1;

}


그러나 이 소스코드의 결과는 opacity:1; 속성을 넣지 않은 것과 완전 똑같습니다.


이로 추정해 보건대, 배경색이 불투명해 보이는 이유는 css 기본값이 아니라 ::selection 선택자의 고유 특성으로 해석할 수밖에 없습니다. (만약 opacity 값이 원인이었다면, 진한 배경색을 넣었을 때에도 색깔이 불투명하게 나타나야 할 것입니다. 하지만 실제 결과는 그렇지 않으므로 ::selection 선택자의 고유 특성임을 추정할 수 있습니다.)




그러니까 만약 ::selection 코드를 조작할 때 색깔 변형을 원하지 않는다면, background-color를 요소의 배경색보다 진하게 설정하는게 방법입니다.


::selection 은 단독으로만 먹히는 css 선택자가 아닙니다. 따라서 다음과 같은 방법도 사용 가능합니다.


#sidebar ::-moz-selection {

    color: #fff;

    background: #000;

}

#sidebar ::selection {

    color: #fff;

    background: #000;

}


따라서 특정 요소에만 선택적으로 좀 더 진한 색상을 설정할 수도 있다는 뜻이 되겠습니다.


제 블로그에도 이미 이 부분까지 적용되어 있으므로 제 블로그의 소스코드를 보면 확인하실 수 있습니다.


::selection 선택자와 관련된 이 부분은 다음 버전 nQuark 스킨(nQuark 2.3 예정)부터 적용 예정입니다.





댓글을 달아 주세요

티스토리 툴바