happy cat image

everdevel

Happiness is Here

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
에버디벨이 만든 무료 클라우드 개발환경을 소개합니다.

안녕하세요. 에버디벨입니다.
저의 실수로 2020년 3월 22일,23일,24일,27일,29일 서버에 문제가 발생하여 서비스가 멈췄습니다.
지금까지 에버디벨을 찾아주신 95만명의 방문자분들에게 불편을 드려죄송합니다.
현재 에버디벨 사이트는 복구했고 eeos는 점검중에 있습니다. 빠른복구하겠습니다.
eeos의 프로젝트 파일과 데이터베이스는 안전히 백업되어 복구한 상태입니다.
이번 일을 계기로 백업시스템을 더욱 강화했습니다.
유저님들 모두 코로나 바이러스 조심하시기 바랍니다. 감사합니다. ^-^*

CSS 셀렉터 5(선택자)

위치 가상 클래스

태그의 위치를 지정하여 선택할 수 있습니다. nth-child(위치)를 사용합니다.
예를 들어 5번째에 위치한 태그를 선택한다면 nth-child(5)를 선택합니다.

위치 가상 클래스 사용방법

선택자:nth-child(n){속성:값}

해봅시다. ^^

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>위치 가상 클래스</title>
<style>
    p:nth-child(3){color:skyblue}
</style>
</head>
<body>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
</body>
</html>

(로그인을 하시면 위의 코드를 웹에서 바로 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 에버디벨에 비밀번호 정보 제공없이 순식간에 로그인 하세요.)

3번째에 위치한 p태그에만 CSS가 적용되었네요. ^^

특정 태그 안에서 3번째에 위치한 p태그를 선택하면 다음과 같겠죠?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>위치 가상 클래스</title>
<style>
    aside p:nth-child(2){color:skyblue}
</style>
</head>
<body>
    <section>
        <p>everdevel</p>
        <p>everdevel</p>
        <p>everdevel</p>
    </section>
    <aside>
        <p>tomodevel</p>
        <p>tomodevel</p>
        <p>tomodevel</p>
    </aside>
</body>
</html>

(로그인을 하시면 위의 코드를 웹에서 바로 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 에버디벨에 비밀번호 정보 제공없이 순식간에 로그인 하세요.)

이번엔 역순으로 마지막에서 순서를 정하는 방법애 대해 알아보겠습니다.
nth-last-child(n)을 사용합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>위치 가상 클래스</title>
<style>
    p:nth-last-child(2){color:skyblue}
</style>
</head>
<body>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
</body>
</html>

(로그인을 하시면 위의 코드를 웹에서 바로 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 에버디벨에 비밀번호 정보 제공없이 순식간에 로그인 하세요.)

마지막에서 2번째에 있는 p태그를 선택했으므로 끝에서 2번째에 있는 태그에 CSS가 적용되었습니다.

처음오는 요소 마지막에 오는 요소 선택하기

위에서 사용한 태그 선택은 태그가 몇번째 인지 알아야 했습니다.
이번엔 오직 처음오는 것과 마지막에 오는 것만 선택하는 선택자입니다.
first-of-type과 last-of-type을 사용합니다.
이름만 들어도 용도를 알겠죠?

선택자:first-of-type{속성:값}
선택자:last-of-type{속성:값}

그럼 예제를 통하여 처음과 마지막 태그에만 색을 적용해볼게요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>위치 가상 클래스</title>
<style>
    p:first-of-type{color:skyblue}
    p:last-of-type{color:hotpink}
</style>
</head>
<body>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
    <p>everdevel</p>
</body>
</html>

(로그인을 하시면 위의 코드를 웹에서 바로 실행 할 수 있습니다.
oAuth인증 방식으로 빠르고 간편하게 로그인할 수 있습니다.
네이버, 구글, 카카오, 라인의 ID로 에버디벨에 비밀번호 정보 제공없이 순식간에 로그인 하세요.)

그럼 다음시간에 더 많은 셀렉터에 대해 알아봅시다.


    
    

강좌로 돌아가기

댓글 0개

정렬기준