가상 클래스 (1)

가상 클래스 이름 앞에 콜론(:) 1개를 붙여서 표시한다.

 

1. 사용자 동작에 반응하는 가상 클래스

특정 동작을 할 때 스타일이 바뀌도록 만들 때 사용한다.

① :link

방문하지 않은 링크에 스타일 적용

② :visited

방문한 링크에 스타일 적용

③ :hover

마우스 커서를 올린 곳에 스타일 적용

④ :active

웹 요소 활성화 했을 때의 스타일 적용

⑤ :focus

웹 요소에 초점이 맞춰졌을 때의 스타일 적용

(①~④는 꼭 순서대로 작성을 해야 한다.

순서가 바뀌게 되면 스타일이 제대로 적용되지 않는다.)

<style>
	.navi a:link, .navi a:visited { /*방문한 링크와 방문하지 않은 링크에 스타일 적용*/
            display:block;
            font-size:14px;
            color:#000;
            padding:10px;
            text-decoration: none;
            text-align:center;
        }
        .navi a:hover, .navi a:focus { /*커서를 올리거나 포커스를 맞췄을 때 스타일 적용*/
            background-color: pink;
            color:skyblue;
        }
        .navi a:active { /*링크를 클릭했을 때 스타일 적용*/
            background-color: blue;
        }
</style>

<div class="container">
        <nav class="navi">
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">베스트</a></li>
                <li><a href="#">신제품</a></li>
                <li><a href="#">고객 센터</a></li>
            </ul>
        </nav>
    </div>

가상 클래스 - :hover, :focus

가상 클래스 - :active

 

 

2. 요소 상태에 따른 가상 클래스

① :target

앵커 대상에 스타일 적용

<style>
	.navi a:link, .navi a:visited { /*링크를 방문 했든 안했든 적용하는 스타일*/
            font-size: 14px;
            padding:10px;
            text-decoration: none;
        }
        .navi a:hover, .navi a:focus {  /*링크에 마우스 포인터 둘때 적용하는 스타일 */
            background-color: #222;
            color:#fff;
        }
        .navi a:active{ /*링크 클릭할 때 적용하는 스타일*/
            background-color: #f00;
        }
        .contents {
            margin:30px auto;
            width:400px;
            padding:20px;
            border:1px solid #222;
            border-radius: 5px;
        }
        #home:target { /*링크가 id=home인 곳에 적용하는 스타일*/
            background: #ff9844;
        }
        #best:target { /*링크가 id=best인 곳에 적용하는 스타일*/
            background: rgb(157, 223, 165);
        }
        #new:target { /*링크가 id=new인 곳에 적용하는 스타일*/
            background-color: #fff8dc;
        }
</style>

<div class="container">
        <nav class="navi">
            <ul>
                <li><a href="#home">홈</a></li>
                <li><a href="#best">베스트</a></li>
                <li><a href="#new">신제품</a></li>
                <li><a href="ps-2.html">고객 센터</a></li>
            </ul>
        </nav>

        <div id="home" class="contents">
            <h2>홈</h2>
            <p>...</p>
        </div>
        <div id="best" class="contents">
            <h2>베스트</h2>
            <p>...</p>
        </div>
        <div id="new" class="contents">
            <h2>신제품</h2>
            <p>...</p>
        </div>
    </div>

홈 메뉴를 클릭-> 홈 콘텐츠가 있는 곳으로 이동 + 배경색 변경

② :enabled와 :disabled

요소의 사용 여부에 따라 스타일 적용

③ :checked

선택한 항목의 스타일 적용

<style>
	#signup input:checked + label { /*input에 checked가 되면 input의 첫째 동생 label에 스타일 적용*/
            color:red;
            font-weight: bold;
        }
</style>

<form id="signup">
            <fieldset>
                <legend>개인정보</legend>
                <ul>
                    <li>
                        <label for="fullname">이름</label>
                        <input type="text" id="fullname" name="fullname" required>
                    </li>
                    <li>
                        <label for="tel">연락처</label>
                        <input type="tel" id="tel" name="tel">
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <legend>객실 형태</legend>
                <ul>
                    <li>
                        <input type="radio" name="room" id="basic">
                        <label for="basic">기본형 (최대 2인)</label>
                    </li>
                    <li>
                        <input type="radio" name="room" id="family">
                        <label for="family">가족형 (최대 8인)</label>
                    </li>
                </ul>
            </fieldset>
            <button type="submit">제출</button>
        </form>

:checkd

④ :not

특정 요소 제외하고 스타일 적용

위 코드에서 type이 text와 tel인 곳에만 스타일을 적용하고 싶다면

<style>
	#signup input:not([type=radio]){ /*type이 radio가 아닌 input 요소들에 적용할 스타일*/
            border:1px solid #ccc;
            border-radius:3px;
            padding:5px;
            width:200px;
        }
</style>

#signup input[type=text], input[type=tel]{...} /*이것보다 훨씬 코드를 줄여서 쓸 수 있다.*/

 

 

 

 

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.