CSS 핵심 개념 : 선택자 레시피

모든 곳에서 border-box를 쓰고 싶을 때

박스 모델의 크기는 기본적으로 콘텐트(context-box)를 기준으로 정해짐

모든 요소의 크기를 테두리(border-box)를 기준으로 하고 싶다면 아래처럼 추가하고 쓰면 됨

항상 이 코드를 추가하는 것도 좋음

* {
  box-sizing: border-box;
}

 

같은 클래스지만 변화를 주고 싶을 때

똑같은 상품 버튼이지만, 품절된 상품의 버튼을 보여줄 때나 똑같은 이미지이지만 유저가 선택한 이미지를 보여줄 때처럼 같은 클래스지만 살짝 다른 경우에 쓰면 좋음

<div class="menu">
    <a class="menu-link" href="/">메인</a>
    <a class="menu-link selected">소개</a>
    <a class="menu-link" href="/blog">글</a>
</div>

.menu {
    background-color: #000000;  
    padding: 16px;
}

.menu-link {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.menu-link.selected,
.menu-link:hover {
    color: #aaaaaa;
}

 

클래스를 넣어 줄 태그가 너무 많을 때

자손 조합자는 적용해야 할 태그가 너무 많아서, 일일이 적용하기 어려울 때 쓰면 좋음

예를 들어서 아래 코드에서 <a> 태그에다가 전부 클래스를 추가하기보다는 자손 조합자를 쓰는 게 훨씬 효율적임

여기서 자식 조합자 (.info > a)를 쓰지 않고 자손 조합자를 쓴 것도 참고

만약 <a> 태그 위치가 <div> 안에서 자식이 아니라 자손으로 바뀌어도 그대로 동작할 것임

<div class="info">
    부엉이는
    <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8%EB%AA%A9" title="올빼미목">올빼미목</a>
    <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8%EA%B3%BC" title="올빼미과">올빼미과</a>의
    <a href="/wiki/%ED%95%9C%EA%B5%AD" title="한국">한국</a>에 서식하는
    <a href="/wiki/%EB%A7%B9%EA%B8%88%EB%A5%98" title="맹금류">맹금류</a> 중
    <a href="/wiki/%EC%86%94%EB%B6%80%EC%97%89%EC%9D%B4" title="솔부엉이">솔부엉이</a>,
    <a href="/wiki/%EC%88%98%EB%A6%AC%EB%B6%80%EC%97%89%EC%9D%B4" title="수리부엉이">수리부엉이</a>,
    <a href="/wiki/%EC%B9%A1%EB%B6%80%EC%97%89%EC%9D%B4" title="칡부엉이">칡부엉이</a>,
    <a href="/wiki/%EC%87%A0%EB%B6%80%EC%97%89%EC%9D%B4" title="쇠부엉이">쇠부엉이</a> 등을 통틀어 이르는 통칭이다.
    <a href="/wiki/%EA%B7%80%EA%B9%83" title="귀깃">귀깃</a>(우각)의 차이로
    <a href="/wiki/%EC%98%AC%EB%B9%BC%EB%AF%B8" title="올빼미">올빼미</a>와
    구분한다고도 하지만 솔부엉이와 쇠부엉이는 귀깃이 없기 때문에 이는 정확한 구분법은 아니다.
    주로 밤에 활동하는 야행성이다.
</div>

.info a {
    color: #379379;
    text-decoration: none;
}

 

가로 마진을 일정하게 하고 싶을 때

<div class="article">
    하나
</div>
<div class="article">
    둘
</div>
<div class="article">
    셋
</div>

.article {
    margin: 24px 0;
    background-color: #ededed;
}

세로 마진은 겹치니까 article 사이의 간격은 24px

<span class="chip">섬</span>
<span class="chip">해변</span>
<span class="chip">오두막</span>

.chip {
    background-color: #dedede;
    text-align: center;
    display: inline-block;
    width: 100px;
    padding: 16px;
    margin: 0 24px;
    border-radius: 9999px;
}

가로로 24px만큼씩 여백이 생김

가로 마진은 안 겹치니 chip과 chip 사이에는 24 + 24 = 48px 만큼 간격이 생길 것임

만약 가로로 전부 일정하게 24px로 주고 싶다면?

.chip {
    background-color: #dedede;
    text-align: center;
    display: inline-block;
    width: 100px;
    padding: 16px;
    margin-right: 24px;
    border-radius: 9999px;
}

.chip:first-child {
    margin-left: 24px;
}