[웹코딩의 기초] 웹.꾸.의 기본, css (2) id, class, 가상속성

지난 포스팅에서는 기본적인 스타일 작성법에 대해 알아보았습니다.

어떤 태그에 대해 공통적인 스타일을 작성하는 법은 알았는데, 어떤 div에는 이런 스타일을 적용하고, 다른 div에는 저런 스타일을 적용하고 싶다면 어떻게 해야할까요? 인라인 형식으로 한땀한땀 적용시켜주는 방식도 있겠지만, 개발자들은 훨씬 더 간편한 방법을 만들어냈습니다. 바로 id와 class 라는 선택자입니다.

html 태그에 id나 class 값을 부여하고 css에서 해당 선택자를 불러와서 스타일링을 하는 방식으로 사용됩니다.

<section id="myId" class="myClass">
    <p class="myClass">
    	내용
    </p>
</section>

이런식으로 지정하는데요 한개의 태그에 id와 class를 동시에 적용할 수 있다는것을 알 수 있습니다.

이제 각 요소를 구분하거나 선택하는 방법에 대해 알아봅시다

 

 

id

아이디는 한 페이지에서 단 한개의 요소에만 붙일 수 있습니다.

<section id="myId">
    <p id="myId">
    	내용
    </p>
</section>

↑이런식으로 사용하면 안된다는 뜻입니다. 

단 한개의 요소에만 쓸수 있기 때문에 특수한 곳에 쓰는게 좋겠죠? (헤더라던지..)

물론 page1.html 이라는 문서와 page2.html 이라는 두개의 각자 다른 문서가 있다면 같은 아이디를 또 사용해도 상관 없지만 같은 아이디를 써야할 스타일이면 id 대신 class를 쓰는것을 추천합니다

id는 색인이 빠르고 중요도가 높지만 이렇게 중복되면 안되기 때문에 남용하지 않도록 하는것이 좋습니다.

 

css에서 아이디는 #아이디이름 과 같은 형식으로 씁니다.

<section id="myId">
    <p>
    	내용
    </p>
</section>
<section>
    <p>
    	내용2
    </p>
</section>

예를 들어 ↑이런 내용이 있을때

#myId { background: #ccc; }

↑이런식으로 css를 작성하면  myId라는 아이디를 가진 태그에만 배경색이 적용됩니다.

 

그런데 만약 아래와 같이 썼다면 어떻게 될까요?

#myId { background: #ccc; }
section { background: #eee; }

css는 위에서부터 아래로 읽어내려가고 중복되는 내용을 덮어씌우지만, 아이디는 태그 선택자보다 우선순위(명시도)가 높기 때문에 #myId에 적용한 #ccc의 배경색상이 덮어씌워지게 됩니다.

(명시도 점수에 대해서는 나중에 설명합니다)

아이디는 대소문자를 구분하고 id, id1, iD 이런식으로 써도 각자 다른 아이디로 인식합니다.

 

아이디에는 특수한 기능이 있는데 바로 a 태그의 href에 url대신 아이디를 넣어서 문서 내에 해당 아이디가 있는 위치로 갈수 있게 만들어주는 기능입니다 (목차 색인). 형식은 css에서처럼 아이디 앞에 #를 붙여 <a href="#아이디">내용</a> 이런식으로 씁니다

<section id="myId">
    <p>
    	내용
    </p>
</section>
<section>
    <p>
    	<a href="#myID">myId로 보내주세요</a>
    </p>
</section>

 

이런 내용이 있다면 링크(a태그)를 눌렀을때 myId가 시작되는곳으로 스크롤이 움직이게 되는것이죠(스크롤이 움직이는 효과는 없고 그냥 한방에 위치로 보내줍니다)

이 기능때문에 id는 중복되면 안되는 것도 있습니다(그외 다른 여러 문제가 있지만 설명하지 않겠습니다)

혹시 뜯어보신적이 있다면 아시겠지만 이 블로그의 목차도 같은 방법으로 작성되었답니다

* 참고로 아이디없이 #만 쓴다면 문서 맨 위로 보내줍니다

 

 

class

클래스는 여러개의 요소에 붙일 수 있습니다. 또한 한개의 요소에 여러개의 클래스를 지정할 수도 있습니다.

<section class="myClass container">
    <p class="myClass paragraph">
    	내용
    </p>
</section>

이런식으로 말이죠

각 클래스는 띄어쓰기로 구분해서 씁니다. 예를들어 myClass라는 클래스를 지정하고싶었는데 실수로 띄어쓰기를 써서 my Class 라고 써버렸다면 각각 my라는 클래스와 Class라는 클래스를 만들어낸것과 같습니다

또한 아이디와 마찬가지로 대소문자를 구분하고 class, class1, cLass 이런식으로 써도 각자 다른 클래스로 인식합니다.

css에서 클래스는 .클래스이름 과 같이 작성합니다.

.myClass { padding: 10px; }
.container { background: #ccc; }
.paragraph { color: #333; }

여기서 myClass라는 클래스를 가진 태그는 section과 p 태그 두개이니 section에도 padding(안쪽 여백) 10px이, p에도 padding 10px이 적용됩니다

 

그런데 만약 이렇게 쓴다면 어떻게 될까요?

.paragraph { color:#333; }
p { color: #666; }

클래스도 태그보다 우선순위가 높기 때문에 .paragraph에 적용한 #333의 색상이 덮어씌워지게 됩니다.

 

이렇게 css에는 우선순위가 있기 때문에 작성 순서나 우선순위를 설정하는것이 중요합니다. 가급적 중복되는 스타일을 작성하지 않는것도 좋겠죠 (하지만 이건 그리 쉽지 않습니다)

 

 

가상속성

가상속성은 크게 가상 클래스와 가상 요소 두가지로 나눌수 있습니다.

가상 클래스는 어떤 요소가 특정한 상태일때, 혹은 어떤 조건을 만족시킬때에만 적용되는 키워드입니다.

예를들면 마우스를 올렸을때만 색상이 바뀐다던지, 첫번째 div에만 배경색을 다르게 적용하고싶다던지 하는 것입니다.

 

css에서는 요소:가상클래스이름 과 같은 형식으로 사용합니다. 

앞에 요소를 지정하지 않으면 모든 요소에 대응됩니다

section:hover { background: #aaa; }
.paragraph:first-child { color: #999; }

이런식으로 사용할 수 있습니다. 각각 의미는 section 태그에 마우스를 올렸을 경우, paragraph라는 클래스중 첫번째요소 라는 뜻입니다

 

 

가상 요소는 가상 클래스와 쓰는 방법은 비슷하지만 클래스와 달리 요소의 일부분에 스타일을 적용할수 있는 키워드입니다. 예를들면 문단의 첫번째 글씨만 크게 만들고 싶다던가 하는 경우에 사용됩니다.

css에서는 요소::가상요소이름 과 같은 형식으로 사용합니다. 

* 다만 과거에는 가상요소들과 가상클래스는 동일한 문법을 사용했기 때문에 :가 한개여도 작동하기도 합니다.

마찬가지로 앞에 요소를 지정하지 않으면 모든 요소에 대응합니다.

예시:

p::before { content: "*"; }
.paragraph::first-letter { font-size: 1.5em; }

 

 

가상요소중 많이 사용하는 특수한 요소가 있는데 ::before 와 ::after 입니다.

각각 요소 앞과 뒤에 내용을 추가하고 꾸며줄 수 있는데 content:""; <이 속성이 필수입니다. 따옴표 안에는 아무것도 넣지 않아도 상관 없지만 이걸 쓰지 않으면 백날천날 스타일을 써도 나타나지 않습니다.

위 예시에서는 p 태그 앞에 *을 붙여주도록 스타일링을 했습니다. 실제로 브라우저에서는 *내용 이렇게 보이게 되겠죠?

만약 ::before 대신 ::after를 썼다면 내용* 이런식으로 보이게 됩니다

 

 

* 참고로 가상속성들은 다소 최근에 생긴 것들이 제법 있기 때문에 브라우저별, 버전별로 지원되지 않는 속성이 있을 수 있습니다.

 

모든 가상 속성에 대해 소개하기는 어려우니 아래 문서를 참고해 주세요

* 가상 클래스의 전체 목록은 이쪽☜

* 가상 요소의 전체 목록은 이쪽☜

 

 

추가로 section#myId.myClass(첫번째 예시) 라던가  p.paragraph.myClass(class 설명 아래 첫번째 예시) 이런식으로 명시도를 높이기 위해 한 태그에 부여된 아이디나 클래스를 띄어쓰기 없이 연속해서 쓰는것도 가능합니다.(태그이름은 맨 앞에 와야하지만 클래스나 아이디의 순서는 중요하지 않음) 

 

다음 포스팅에서는 복합적인 css 문법 작성법과 우선순위(명시도) 점수에 대해 써보도록 하겠습니다. 명시도 점수는 어떻게 계산하는지, 왜 명시도를 높이는지, 더 명시도를 높이기 위해서는 어떻게 쓰는지 등에 대한 내용이 궁금하다면 다음 포스팅을 기대해주세요(?)