1. 물결기호 '~'
- 형제 선택자
- 물결기호로 두 selector를 연결할 경우, selector에 해당하는 요소들이 서로 동일 부모를 둔 형제 요소임을 의미
<style>
.box {
width: 200px;
height: 100px;
margin: 10px;
border: 3px solid black;
}
.input-check ~ .box {
background: #fff000
}
</style>아래 내부 스타일링 방식의 스니펫을 보면, .input-check와 .box라는 selector가 물결 표시를 사이에 두고 연결되어 있으며, 배경이 노란색으로 지정되어 있다.
두 selector들의 상관관계는 다음과 같다.
<body>
<input type="checkbox" class="input-check">
<div class="container">
<div class="box">BOX</div>
</div>
<div class="box">BOX</div>
<div class="box">BOX</div>
</body>위 스니펫에서 의미하는 바는 input-check 클래스의 직접적인 하위에 존재하는 box 클래스가 있다는 것이다. 단, container라는 클래스로 한번 더 묶여있는 box 클래스는 동일한 부모를 둔 형제 요소가 아니므로, 해당 스타일링이 적용되지 않아 다음과 같은 결과가 나타나게 된다.
2. 더하기 기호 '+'
- 인접형제 선택자
- 물결표시와 동일하게, 형제 요소들을 지칭하지만 바로 다음에 오는 요소만을 가져온다.
<style>
.input-check + .box {
background: #fff000
}
</style>위와 같이 두 가지 selector 사이에 해당 기호를 사용할 경우,
.input-check 바로 다음에 .box selector가 나올 때에만 해당 selector에 스타일링이 적용된다.
<body>
<input type="checkbox" class="input-check">
<div class="container">
<div class="box">BOX</div>
</div>
<div class="box">BOX</div>
<div class="box">BOX</div>
</body>만약 위 구조에 스타일링을 적용시켜 보면, .ìnput-check 다음에는 .container가 오기 때문에 아무런 스타일링이 적용되지 않는다.
3. label
- label은 input 태그를 설명하는 태그이다.
- 따라서 주로 input 태그와 함께 사용
- 묶어서 label을 클릭해도 input이 함께 클릭되도록 한다.
방법 1
- label에는 for이라는 속성이 있으며, id값을 넣어줄 수 있다.
- input 태그에 id를 지정하고 label의 for 속성에 값을 넣어주면 label + input이 함께 선택된다.
방법 2
- input 태그 자체를 label 안에 넣어준다.
4. :checked
- 인풋이 체크된 상태가 되었음을 지칭하는 표현이다.
- style 태그에서 다음과 같이 사용가능하다.
.input-check:checked ~ . box {
background: #fff000;
}- input이 체크된 상태일 때만 스타일링이 적용될 수 있도록 하는 코드이다.
- 동일한 부모를 가진 box selector가 두 개인 코드에 적용시켜보면 다음과 같이 박스가 노란색으로 변화한다.
- 위에서 더하기 기호 '+'를 설명할 때 언급했듯이, 첫번째로 등장하는 .box 셀렉터는 container라는 div 안에 한번 더 감싸져 있기 때문에 해당 스타일링이 적용되고 있지 않은 상태이다.
5. 체크박스의 변주
- 체크박스의 opacity를 0으로 주고, 이미지로 선택하게 하는 방법도 존재한다.
아래 코드는 위 이미지 캡처에서 체크박스의 스타일링에 해당하는 부분이다.
.jejumap-check {
position: absolute;
top: 30%;
left: 30%;
opacity: 0;
}- background-position을 설정해주면 background에 해당하는 영역을 클릭해도 체크박스가 선택된다.
%등을 통해 전체 이미지 대비 비율로 설정하면 화면이 늘어나도 오류가 생기지 않음- www.spritecow.com 등에서 스프라이트 사이즈 계산 가능
- 고해상도로 표현하기 원한다면, 이미지 에셋은 크게 만들어두고 CSS 등에서 이미지를 줄이는 것도 가능
이미지 스프라이트(image sprite): 여러 개의 이미지를 하나의 이미지로 합쳐서 관리하는 이미지
유저가 왜 그랬을까