셀렉터를 이용해 CSS 코드 양 줄이기

이빈·2023년 10월 22일

html/css

목록 보기
8/18
post-thumbnail

HTML 태그에 클래스 두개 이상 붙이기

<div class="A B"> </div>

띄어쓰기 하면 됨.

셀렉터 사용법: 공백

<nav>
        <ul class="navbar">
            <li><a href="#">블로그</a></li>
            <li><a href="#">쇼핑</a></li>
            <li><a href="#">맛집</a></li>
            <li><a href="#">이메일</a></li>
        </ul>
    </nav>
.navbar li{
    display: inline-block;
}

공백을 이용하여 클래스 안의 자손을 선택할 수 있음.

셀렉터 사용법: 꺾쇠 (>)

.navbar>li{
    display: inline-block;
}

바로 밑에 있는 자식만 선택가능.

++) .navbar li>span 이렇게 상세히 선택 가능.


간단한 링크 디자인

[링크 밑줄 없애기]

text-decoration: none;

[링크 방문 후 스타일 지정]

.class:visitied{
color: black;
}

0개의 댓글