이번 포스팅에서는 속성 선택자, display:none; , input[ ]:checked{ }, 인접 접근자 + , :nth-child( )에 대해 알아보도록 하자.
<목차>
- 속성 선택자
- display: none;
- input[id=" "]:checked { }
- 인접 접근자 +
- :nth-child( )
<속성 선택자>
이번에 알아볼 내용은 css 속성 선택자이다. 지금껏 우리가 사용해 왔던 선택자들을 살펴보면 다음과 같다.
- * : 모든 엘리먼트를 선택하는 선택자
- element name (div, body, a, ul, li, ... ) : 직접적으로 특정 엘리먼트를 그대로 적는 방식의 선택자.
- . : class를 부여해준 엘리먼트를 선택하는 선택자.
- # : id를 부여해준 엘리먼트를 선택하는 선택자.
속성 선택자는 주로 input 박스를 조작할 때 사용하게 되는데, 다음과 같은 이슈가 존재한다고 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="icon">test</div>
<input type="checkbox" id="icon">
<label for="icon">
check
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
#icon {
height: 100px;
background:red;
}
기존에 있는 <div>의 id가 "icon"으로 지정되어 있는 상황에서 <input> 엘리먼트의 id 역시 "icon"으로 하고 싶은 상황이 발생할 수도 있다. 그런 상황에서 #icon{ }과 같이id를 이용해 css를 적용하게 되면 동일한 id를 가지고 있는 엘리먼트 모두에게 css가 적용되는 결과를 초래할 수 있다. 나는 input 박스에만 속성을 부여하고 싶은데 <div>엘리먼트에게도 속성이 부여되는 상황이 생겨버린 것이다. 즉, 동일한 id 값을 가지는 서로 다른 엘리먼트가 존재할 경우 속성 선택자를 사용해서 해당 이슈를 해결할 수 있다.
속성 선택자는 다음과 같이 작성하면 된다.
input[id="icon"] {
background: red;
}
위에 적혀 있는 것은 모든 <input> 엘리먼트 중에서 id가 "icon"인 경우에만 해당 속성을 부여하겠다는 의미로 해석할 수 있다. 기존에 사용해 왔던 다른 선택자들과 비교해 보면서 그 뜻을 좀 더 정확히 알아보도록 하자.
- input { } : css파일에 존재하는 모든 html 엘리먼트 중에서 모든 <input> 엘리먼트에게 속성값 부여.
- #icon{ } : 모든 엘리먼트 중에서 "icon"이라는 id를 가진 엘리먼트에게만 속성값 부여.
- input[id="icon"] { } : 모든 엘리먼트 중에서 id가 "icon"인 <input> 엘리먼트에게만 속성값 부여.
이렇게 속성 선택자를 사용하게 되면 동일한 id를 가지고 있는 서로 다른 엘리먼트들에게 css 속성을 적용할 때 발생하는 이슈들을 해결할 수 있다.
display: none;
앞서 우리는 display: inline; , display: block; , display: inline-block; 을 배웠고 사용해 왔다. 이번에 알아볼 내용은 display: none; 이 어떠한 효과를 주는가에 대한 것이다. display: none; 은 단어 뜻 그대로 "없다"는 뜻이다. 우선 아래 코드를 보면서 이해해 보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"] {
display: none;
}
display: none; 을 적용하기 전에는 우리가 알던 그대로 <input>에 의해 생성된 체크박스와 <label>에 의해 생성된 문자가 화면 상에 나타나고 있다. 여기서 display: none;을 input[id="icon"]에 적용하게 되면 체크박스가 사라지는 것을 확인할 수 있다. display: none; 은 화면에서 안 보이도록 하는 기능을 가지고 있다. 여기서 주의해야할 점은 삭제와는 다르다는 것이다. 해당 input 박스는 눈으로 보이지 않을 뿐, 삭제된 것이 아니다. input 박스를 가지고는 있지만 우리 눈에 안 보이게끔만 처리를 하는 것이다. 실제로 우리가 check 글자를 클릭할 때마다 input 박스의 체크 표시는 계속 작동 하고 있다. 즉, 엘리먼트가 화면 상에 랜더가 안됐을 뿐, 실제 기능적으로는 살아있고 작동되고 있는 것이다.
input[id=" "]:checked { }
해당 속성에 대해서는 아래의 코드를 살펴 보면서 이해해보도록 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"]:checked {
width: 50px;
}
input[id="icon"] {
width: 10px;
}
input[id="icon"] 선택자 끝에 " :checked "를 추가였을 때 나타나는 변화에 대해 이야기해 보고자 한다. 위의 코드를 실행한 결과는 아래와 같다.
그림을 통해 알 수 있듯이 선택자에 :checked를 써줌으로써 체크가 되었을 때의 css 스타일과 체크가 되어 있지 않았을 때의 css 스타일을 다르게 부여할 수 있다. 즉, 해당 효과를 사용함으로써 체크가 되었을 때와 되지 않았을 때의 내용을 구분할 수 있게끔 할 수 있다.
그렇다면 앞에서 배운 display:none;과 input[id="icon"]:checked { }를 동시에 사용하면 어떤 효과를 부여할 수 있을까?
특정 엘리먼트를 display:none;을 사용해 화면 상에서 가려둔 상태에서 checked를 했을 때 display:none;을 풀어줌과 동시에 애니메이션 효과를 주어서 동적으로 움직이는 것처럼 보이게끔 할 수 있는 등 여러 속성들을 융합해 다양하게 응용해 볼 수 있다.
< 인접 접근자 + >
인접 접근자는 우리가 사용해 왔던 접근자 >와는 다르게 "+" 기호를 이용해 사용한다. 아래의 코드를 살펴보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
check1
</label>
<label for="icon">
check2
</label>
</body>
</html>
/* CSS style sheet */
*{
margin:0;
padding:0;
}
input[id="icon"]:checked {
display:none;
}
input[id="icon"] + label {
background:red;
}
위에 나와있는 html 코드를 보면 <input>엘리먼트 아래에 두개의 <label>엘리먼트가 존재해서 각각 check1과 check2라는 텍스트가 쓰여있고 첫번째 <label>에만 css 효과가 부여된 것을 확인할 수 있다.
input[id="icon"] + label {
background:red;
}
인접 접근자 +는 위와 같이 작성하는데 내가 선택한 input[id="icon"] 엘리먼트 바로 아래에 있는 (같은 선상에 있는) 엘리먼트에게 css를 주고 싶을 때 사용한다. 여기서 주의해야 할 점은 + 접근자가 사용된 <input>엘리먼트와 <label>엘리먼트가 부모, 자식 관계가 아닌 같은 레벨에 있다는 사실이다. 그렇다면 label { background:red; } 형태로 쓰지 않고 위와 같이 인접 접근자를 사용해서 쓰는 이유는 무엇일까? css를 아래와 같이 작성할 경우를 살펴보자.
label {
background:red;
}
인접 접근자를 사용하여 input[id="icon"] + label { } 형태가 아닌, label { } 만을 썼을 경우, 위에서 보이는 것처럼 모든 lavel 에 효과가 적용된 것을 확인할 수 있다. 즉, 인접 접근자 +를 사용해 <input>엘리먼트 바로 아래에 있는 <label>만을 선택하고 싶을 때 사용할 수 있다.
인접 접근자는 input[id="icon"]:checked + label { } 의 형태로 많이 사용하는데 이는 해당 input 박스에 체크가 되었는지 안 되었는지에 따라 css를 다르게 적용하기 위함이다. 즉, checked를 했을 때와 안했을 때를 구분하여 css를 적용하기 위해 input + label 형태로 접근하는 것이다.
:nth-child( )
nth-child에 대한 개념을 설명하기 위해 다음과 같은 html 코드가 작성되어 있다고 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href=".\practice.css" type="text/css" rel="stylesheet">
</head>
<body>
<input type="checkbox" id="icon">
<label for="icon">
<span></span>
<span></span>
<span></span>
</label>
</body>
</html>
위에 제시되 html코드를 토대로 css를 작성한다고 했을 때 해당 코드 안에 존재하는 <span>엘리먼트들에게 각각 css를 다르게 부여하고 싶은 경우가 발생할 수 있다. 이럴 때 우리는 여태까지 각각의 <span>엘리먼트에 id 혹은 class를 지정하여 css를 부여하였다. 해당 방법 역시 하나의 방법이지만 너무 많은 id와 class를 부여하여 조금은 복잡해질 가능성이 있다. 이러한 것을 해결하기 위해 사용하는 것이 바로 :nth-child( )이다. 아래 작성된 css를 보자.
input[id="icon"] + label > span:nth-child(1) {
/* css 입력 */
}
input[id="icon"] + label > span:nth-child(2) {
/* css 입력 */
}
input[id="icon"] + label > span:nth-child(3) {
/* css 입력 */
}
<input>엘리먼트 아래에 있는 <label>엘리먼트 안에 있는 <span> 중에 첫번째 <span>을 선택하여 속성을 부여하고 싶을 때, input[id="icon"] + label > span:nth-child(1)을 사용할 수 있다. nth-child( ) 괄호 안에 숫자를 부여해 몇번째 엘리먼트에게 속성을 부여할 것인지를 지정하게 되는데, nth-child(n)이라고 작성한다면 n번째 엘리먼트에게 속성을 부여하겠다는 뜻이다. 이제 nth-child( )를 이용해서 엘리먼트 하나하나에 id 혹은 class를 부여하지 않아도 같은 레벨의 같은 엘리먼트들에게 각각 서로다른 속성을 부여할 수 있다.
'CSS' 카테고리의 다른 글
CSS skills(3) - !important , class 여러 개 주기 , input:focus { } (0) | 2021.12.28 |
---|---|
CSS 응용(1) - 햄버거 버튼(메뉴바) 만들기 (1) | 2021.12.27 |
CSS skills(1) - display, float, position (0) | 2021.12.22 |
CSS 문법 (0) | 2021.12.21 |
CSS(2) - width, height, margin, padding (0) | 2021.12.21 |