모르는 사람이 의외로 많은 CSS 문법 (2)

앞의 글에서 선택자 만드는 규칙을 알려드렸습니다.

 

1. 태그 선택자 : HTML 태그를 스타일 선택자로 사용

2. 클래스 선택자 : .classname 으로 사용자가 필요한 스타일 선택자 생성

3. ID 선택자 : HTML요소에 고유한 성격을 부여하는 ID를 선택자로 활용

 

여기에 추가로, 

 

1. 활용할 수 있는 HTML 태그가 있으면 적극 활용하고

2. 예약어(태그, 속성 등에 쓰이는 단어)는 가급적 선택자로 사용하지 말아야 한다.

 

는 주의사항까지 정리해 드렸습니다.

긴 글을 쓴 것 같은데 이 몇줄로 간단히 요약이 되네요 ㅜ.ㅜ

 

이번 글에서는 특수 선택자를 간단히 정리해 보겠습니다.

특수 선택자란 태그, 클래스, ID 선택자와는 달리 특수한 목적을 위해 사용하는 선택자를 의미합니다. 특수 선택자라는 용어는 뜻이 명확히 규정되어 있지 않아 제가 설명드리는 범위와 다른 설명에서 사용하는 범위가 다를 수 있습니다. 여기에서 얘기하는 '특수 선택자'는 태그, 클래스, ID를 제외한 특수한 목적으로 지정된 선택자를 의미합니다.

 

1. @page Rule

 

전자책 스타일에서 간혹 보이는 선택자입니다. 참고로 @가 붙으면 선택자라고 하지 않고 Rule이라고 합니다. @font-family Rule, @page Rule 하는 식으로요.

 

@page는 인쇄를 위한 규칙입니다. HTML은 '가변형 화면' 즉 폭과 높이가 바뀌는 화면에 내용을 표현하기 위한 언어입니다. 그런데 화면을 인쇄하려면 A4, B5처럼 정해진 크기에 맞춰야하지요. 지금 보고 계신 이 내용을 A4용지 프린터로 인쇄하면 어떻게 나올가요? 보이는 그대로 나올까요?(궁금하면 해보세요 ^^)

 

@page는 인쇄를 할 때 여백을 지정하기 위한 규칙입니다. 그래서 인쇄에 필요한 페이지 사이즈(size), 상하좌우 여백(margin) 등 제한적인 속성만 사용할 수 있어요. 

 

전자책 전체 페이지의 마진을 줄 때 사용할 수 있지만, 그리 권해드리고 싶은 속성은 아닙니다. page-break처럼 인쇄를 목적으로 만든 규칙이라 다양한 화면에서 보는 전자책에 어울리지는 않습니다. 그래도 마진은 문제 없이 지정되니 '쓰면 안된다' 정도는 아니에요.

 

@page에 대한 자세한 설명은 이 글을 참고하세요.

https://developer.mozilla.org/ko/docs/Web/CSS/@page

 

2. * 전체 선택자

 

앞에 곱하기(*) 기호는 오타가 아닙니다. 이 선택자가 * 예요.

 

* {

margin : 0;

padding : 0;

font-family : '명조';

font-size : 1.2em;

...

}

 

전체 선택자로 문서 전체에 영향을 주는 스타일을 지정할 수 있습니다.

만약 책의 모든 글씨체를 '명조'로, 글자 크기를 1.2em으로 지정하고 싶다면 위 스타일을 넣어보세요.

모든 CSS 선택자에 '명조'를 지정하지 않아도 알아서 명조가 지정이 될거예요.

 

책 전체에 적용해야 하는 기본 설정이 있다면 전체 선택자를 사용할 수 있습니다. @page 속성 대신 여백을 줄 때 주로 사용해요. 그리고 줄간격, 문단간격을 없애려고 모든 선택자에 margin : 0; padding : 0;을 추가하는 수고도 덜 수 있습니다.

 

3. Pseudo-class 선택자(가상 클래스 선택자)

 

가상 클래스 선택자는 특정 항목이 특수한 상태일 때만 속성을 부여하는 선택자입니다.

예를 들어, 링크를 생각해 보세요.

 

링크 텍스트 : 파란색 밑줄

링크 클릭상태 : 빨간색 밑줄

클릭했던 링크 : 갈색 밑줄

 

링크 속성에는 이렇게 3가지 스타일이 있습니다.

이 스타일을 변경하려면 a 태그 스타일을 수정해 주면 되요.

a {

color : #000000;

text-decoration : none;

}

 

이러면 밑줄이 사라지고 글자 색은 검정색이 됩니다. 

 

문제는, 링크를 클릭한 상태에서도, 링크를 다녀와도 항상 밑줄 없는 검정색이라는거예요.

각 상태별로 다른 스타일(예를 들어 링크를 클릭하고 있을 때 노란 바탕색)을 주고 싶으면?

 

이럴 때 가상 클래스 선택자를 사용할 수 있습니다.

 

a:link {

/*링크가 걸린 텍스트의 스타일*/

}

 

a:visited {

/*방문했던 링크 텍스트의 스타일*/

}

 

a:hover {

/*링크 위에 마우스를 올렸을 때 스타일. 터치 모니터에서는 효과를 나타내기 어려움*/

}

 

a:active {

/*링크를 누르고 있는 상태에서 텍스트의 스타일*/

}

 

이 외에도 다양한 가상 클래스 선택자가 있습니다.

 

p::first-letter {

color : red; /*문단의 첫 글자만 빨간색으로*/

}

 

p::first-line {

color : red; /*문단의 첫번째 줄만 빨간색*/

}

 

p::before, p::after {

content :("!!경고!!");/*문단의 앞뒤에 !!경고!! 문구 자동 삽입*/

}

 

가상 클래스는 종류가 다양해서 제가 자주 쓰는 몇가지만 여기에 소개합니다. 

이 중에 ::before, ::after는 정말 활용도가 높습니다.

더 자세히 알고싶다면 이곳을 참고하세요.

https://www.w3schools.com/css/css_pseudo_classes.asp

 

오늘은 여기까지.

다음 글에는 복합선택자(Combinator)를 설명할게요. 이전 글에서도 몇번 설명한 적이 있는데 전체적으로 다시 정리하겠습니다.