CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 부른다. 선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있다.
선택자 {
선언;
선언;
선언;
}선택자 목록
콤마,로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있다.
선택자1,
선택자2 {
...
}선택자 붙여 쓰기
여러 조건을 동시에 만족하는 요소를 선택하고 싶을 때, 선택자를 붙여 쓸 수 있다.
<h2 id="mandu" class="chinese menu">중식당메뉴판</h2> 방법1 : 아이디 + 클래스
#mandu.menu {}방법2 : 클래스 + 클래스
.chinse.menu { }방법3 : 태그 + 아이디 + 클래스
h2#mandu.chinese.menu { }자식 결합자(Child Combinator)
오른쪽 꺽쇠로 선택자를 이어주면 된다.
<div class="article">
<img src="menu.png">
...
</div>.article > img {
width: 100%;
}자손 결합자(Descendant Combinator)
스페이스(띄어쓰기)로 선택자를 이어 준다. 예를 들어 아래 코드에서 menu.png를 보여주는 이미지 태그를 선택하려면 .article img로 선택할 수 있다.
<div class="article">
<p> 이번에 리뷰해 볼 식당은 중식당입니다.
<img src="menu.png">
</p>
...
</div>.article img {
width: 100%;
}가상 클래스(Pseudo-class)
가상 클래스는 의사 클래스, 가짜 클래스라고도 부른다. 요소의 상태 같은 걸 선택할 때 사용하는 클래스다. 정해진 이름 앞에 콜론(:)을 붙여서 사용한다. 대표적으로 :hover(마우스를 올렸을 때), :active(클릭한 상태), :visited(방문한 적이 있는 링크), :focus(포커싱 됐을 때)등이 있다.
밑줄이 없는 링크에 마우스를 올렸을 때 밑줄이 생기도록 하려면 :hover를 활용하면 된다.
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}전체 선택자
*라는 선택자는 모든 요소를 선택하는 선택자다.
* {
box-sixing: border-box;
}.restaurant의 모든 자식 요소 선택하기
.restaurant > * {
width:120px;
height: 90px;
}n번째 자식 선택자(n-th child Selector)
:nth-child()를 사용한다. 괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있다. 여기서는 1부터 시작한다. (첫 번째 자식은 1이고, 세 번째 자식은 3이다.)
.restaurant의 세 번째 자식
.restaurant :nth-child(3) {...}.restaurant의 짝수 번째 자식
.restaurant :nth-child(even) {...}
.restaurant :nth-child(2n) {...}.restaurant의 홀수 번째 자식
.restaurant :nth-child(odd) {...}
.restaurant :nth-child(2n+1) {...}.restaurant의 첫 번째, 마지막 자식
.restaurant :first-child {...}
.restaurant :last-child {...}이렇게 다양하게 선택자를 조합할 수 있지만, 최대한 단순하게 쓰는 것이 편하다.(그래야 수정하기 편하고 고칠 때 알아보기 편하다!)
그래도 조합해서 쓰면 유용한 경우들이 많다. 그중 조합 몇개를 예시를 들어보려고 한다.
모든 곳에서 border-box를 쓰고 싶을 때
박스 모델의 크기는 기본적으로 콘텐트(content-box)를 기준으로 정해진다. 모든 요소의 크기를 테두리(border-box)를 기준으로 하고 싶다면, 항상 이 코드를 추가하는 것도 좋다.
* {
box-sizing: border-box;
}같은 클래스지만 변화를 주고 싶을 때
똑같은 상품 버튼이지만, 품절된 상품의 버튼을 보여줄 때나 똑같은 이미지이지만 유저가 선택한 이미지를 보여줄 때처럼 같은 클래스지만 살짝 다른 경우에 쓰면 좋다.
예를 들어 똑같은 menu-link 클래스지만, 현재 보고 있는 페이지가 소개 페이지인 경우라 해당하는 메뉴만 selected 클래스를 추가로 넣는다고 하자.
<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;
}가로 마진을 일정하게 하고 싶을 때
"세로 마진은 겹친다"라는 규칙이 있다. 예를 들어 세로로 article이라는 클래스의 <div> 태그를 배치하고, 세로 마진을 24px로 준다고 해보자. <div> 태그는 블록 요소니까 위에서부터 아래로 배치된다.
<div class="article">
하나
</div>
<div class="article">
둘
</div>
<div class="article">
셋
</div>.article {
margin: 24px 0;
background-color: #ededed;
}그런데 세로가 아닌 가로 배치가 된다면 어떻게 될까? <span>태그를 배치해서 볼 수 있다.
<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로 주고 싶으면 어떻게 해야할까?
예를 들어서 아래 3개의 chip에 가로 마진을 24px로 주면 chip들 사이의 가로 마진은 24 + 24해서 48px이 된다. 이럴 때는 margin-left(왼쪽 마진), margin-right(오른쪽 마진)라는 속성과 함께 fist-child나 :last-child를 활용하면 좋다.
<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-right: 24px;
border-radius: 9999px;
}
.chip:first-child {
margin-left: 24px;
}