가상 선택자와 클래스
2022.08.15.
- <비전공자를 위한 첫 코딩 챌린지> - DAY 10
: 11 가상 선택자와 클래스
Review
오늘은 국비과정을 수료하는 동안 필라테스 학원에서 매니저로 일하기 위해 면접을 보고 왔다.
내 성격상 긴장하는 타입은 아닌데, 면접 대기 시간 동안 내 전공이 쓰일 만한 일을 단 한 번이라도
해보고 싶어서 욕심이 났는지 긴장되었다.
필라테스에 대한 질문을 하실까봐 조사해 갔는데 물어보지 않으셔서 오히려 다행이었다.
결과는 합격이고 다음주부터 일하기로 했다.
유연성이 꽝이어서 필라테스는 엄두도 못 내어 봤는데 한번 배워봐야 회원분들 상담을 할 수 있다고
배울 기회도 주신다고 하셔서 너무 좋다고 말씀드렸다.
앞으로 그곳에서 내가 하게 될 업무는 기존 매니저님께서 하시는 일을 보조하는 것이다.
인포 데스크에서 안내를 하고 회원 관리나 상담 같은 것은 인수인계가 끝나면 차근차근 알려주신다고
하셨다. 그 외에는 간단한 청소 업무를 하게 될 것 같다.
대학생 때 인바디 후 상담하는 실습을 했었는데 그런 업무도 해보고 싶다. 기회가 주어질지도 모르니
기억을 더듬어 다시 공부해봐야겠다.
다음주는 이사도 해야 하고 개강도 얼마 남지 않아 이것저것 준비할 것들이 많다.
개강 전에 블로그 업로드를 부지런히 하려 했는데 쉽지 않다.
개강 후부터는 국비과정을 들으며 공부하는 것도 포스팅하고 필라테스 학원에서 일하며 느끼는 점도
포스팅할 예정이다. 엄청 바빠지겠지만 대학생 때 일하며 공부했던 때를 떠올리며 다시 열심히
해보려고 한다.
- <비전공자를 위한 첫 코딩 챌린지> - DAY 10
: 이전에 배웠다시피 선택자는 '무언가를 선택하는 요소'이다.
CSS에서 선택자는 스타일링 요소를 선택할 때 사용한다.
오늘은 다양한 선택자 중 가상 선택자(pseudo selectors)를 배웠다.
가상 선택자는 선택한 요소가 특별한 상태일 때 사용할 수 있다.
가상 선택자를 어디에 사용할 수 있을까?
웹 페이지에서 버튼을 누르면 해당 버튼의 색이나 모양이 변한다. 버튼을 눌러도 아무런 변화가
없다면 버튼이 눌렸는지 안 눌렸는지 알 수 없을 것이다.
이와 같이 상태에 따라 꾸미기 변화를 주고 싶을 때 가상 선택자를 사용한다.
가상 선택자는 동적 가상 클래스와 구조적 가상 클래스 2가지로 분류할 수 있다.
<동적 가상 클래스>
: 동적 가상 클래스(dynamic pseudo classes)는 어떤 상태나 조건이 발생할 때, 사용자의 액션에
따라 스타일이 바뀌는 선택자이다.
버튼을 클릭했을 때 색깔이 변하는 것처럼 사용자와 웹 페이지 간의 상호작용이 필요할 때 사용
한다.
동적 가상 클래는 active, visited, disabled, hover, focus 5가지로 분류할 수 있다.
<동적 가상 클래스 : 액션이 필요해 - active>
: active는 클릭 시 활성화되는 가상 클래스이다.
예를 들어, 버튼을 누르면 active 가상 클래스가 활성화 되어서 선택한 항목에 선언한 CSS
스타일이 적용된다.
<style>
a: active {
color: red
}
</style>
이번엔 button 태그를 사용해 클릭할 때 텍스트 색이 바뀌는 코드를 작성해보자.
active 가상 클래스를 사용해 마우스로 버튼을 눌릴 때 연두색으로 변경한다.
button 태그로 버튼을 만든 후 active 가상 선택자로 버튼을 스타일링 한다.
지난번에 button 태그를 사용해서 클릭 박스를 만드는 예제가 설명 없이 포함되어 있어서 헷갈렸는데
이제 윤곽이 잡힌다. 거기다가 클릭하면 텍스트 색이 변화되는 코드까지 배우니 재미가 쏠쏠하다.
<동적 가상 클래스 : 방문 기록을 남기자 - visited>
: visited 가상 클래스는 사용자가 이미 방문한 링크를 표시해준다.
<style>
a: visited {
color: red
}
</style>
검색창에 검색 후 특정 페이지를 들어갔다 나오면 클릭한 페이지의 텍스트 색깔이 변한다. 왜냐하면
링크를 클릭하거나 방문할 때 visited로 표시되기 때문이다.
1. a 태그를 사용해 링크를 먼저 삽입하고
2. visited를 사용할 태그를 지정하고 스타일링한다.
와 ppt 만들 때 하이퍼링크를 자주 이용했는데 클릭하면 글씨 색이 바껴서 왜 그런가 했더니 이런 것도
코드가 필요한지 몰랐다. 너무 신기해
<동적 가상 클래스 : 비활성화하기 - disabled>
: disabled 가상 클래스는 비활성화된 요소를 나타낸다. 말그대로 요소를 비활성화시키는 것이다.
<style>
input: disabled {
background: red
}
</style>
왜 위에선 a 태그 라고 하고 여기서는 input 태그를 사용하지?
책에선 input 태그를 사용하여 입력 폼을 만든 뒤 disabled를 사용하여 폼을 비활성화할 것이라
적혀있다. 일단 예제를 시도해보자.
*input 태그는 텍스트 폼을 작성하는 태그인 것 같다.
1. input 태그를 이용하여 텍스트 폼을 작성한다.
2. 폼에 비활성화(disabled) 스타일을 입력한다.
input 태그를 이용하여 만든 폼은 입력이 가능해야 하지만 폼을 disabled 상태로 바꿔주면
입력이 가능해야 하지만 폼을 disabled 상태로 바꿔주면 입력 폼에 아무것도 적을 수 없다.
보통 disabled는 단독으로 쓰이기보단 조건을 추가해 조건에 해당하지 않는 경우 폼에 입력을
할 수 없도록 만드는 용도로 사용된다.
<동적 가상 클래스 : 마우스로 상호작용하기 - hover>
: hover 가상 클래스는 마우스 커서를 요소에 올려놓았을 때 선언한 스타일을 실행한다.
active가 클릭할 때 반응하는 거라면 hover는 마우스를 올려놓았을 때 반응한다.
예를 들어 버튼에 마우스를 올렸을 때 색깔을 변하게 만들었다가, 마우스를 떼면 원래 모습으로
돌아오게 할 수 있다.
내가 만든 프로필 링크 페이지에도 hover 가상 클래스가 적용된다.
만들 때는 모르고 있었는데 배우고 나니 기억이 난다. 재밌다 !!!!!
<style>
a: hover {
color: orange;
}
</style>
hover 가상 클래스를 사용할 때 주의할 점이 있다고 한다.
1. 스마트폰 같은 터치스크린에서 작동하지 않거나,
2. 요소를 터치한 후 잠시 동안만 작동하거나,
3. 사용자가 터치를 하지 않아도 다른 요소를 터치할 때까지 계속 작동할 수 있다.
개발자가 되어 hover 기능을 사용할 때는 유저들이 사용하는 모든 장치에서 의도한 대로 보이는지
확인해야 한다.
1. span 태그를 스타일링한다.
2. span의 기본 색(하늘색)과
3. hover 시 바뀔 색(골드색)을 지정한다.
이 기능을 응용하면 마우스를 올렸을 때 이미지가 확대되거나 영상의 미리보기가 실행되게 할 수 있다.
오 hover가 나중에 내 작업물에서 어떤 기능을 하게 될지 기대된다.
<동적 가상 클래스 : 클릭하면 반응하는 - focus>
: focus는 input으로 만든 폼 등 집중(focus)을 받은 요소를 나타낸다.
PC에서는 마우스 클릭이나 tab 키를 클릭할 때, 스마트폰에서는 tab을 했을 때 발동한다.
<style>
input: focus {
color: red;
}
</style>
input 태그를 이용하여 텍스트 폼을 만들고 그 폼에 focus로 사용자가 클릭했을 때 스타일이
발동되도록 하자.
코드가 상당히 복잡하다.
1. index.html에 input 태그 2개를 만들고, 특징을 나타내는 class와 value값을 입력한다.
2. style 태그에 각 클래스에 글자와 배경색을 지정한다.
폼을 클릭하면 지정한 스타일이 나타난다. 주로 focus는 사용자가 자신이 클릭한 위치가 어디인지
알려줄 때 사용된다. 시각적인 디자인을 활용한 것이라 흥미롭다.
<구조적 가상 클래스>
: 구조적 가상 클래스(structural pseudo classes)는 CSS에서 id, class 등의 선택자를 사용하지 않고
요소를 선택할 수 있다. 코드를 효율적으로 작성하기 위한 것이라 유용할 것 같다.
우리도 이름을 가지고 있지만 때로는 출석을 부르실 때 학번으로 불릴 때가 있는 것처럼,
태그도 id나 class 같은 이름이 아니라 가상 클래스라고 불리는 것이다.
구조적 가상 클래스에는 first-child, last-child, nth-of-type, only-of-type이 있다.
<구조적 가상 클래스 : 형제 중 첫 번째 요소 선택하기 - first-child>
: first-child는 형제 요소 중 첫 번째, 즉 맏이 요소를 나타낸다.
형제 요소를 선택하기 때문에 first-child로 선택하는 대상은 반드시 부모 요소를 가지고 있어야 한다.
<style>
p:first-child {
color: limel
}
</style>
*여기서 주의할 점은 띄어쓰기다. CSS에서 띄어쓰기는 자식 요소를 의미한다.
띄어쓰기 없이 'p:first-child'를 작성하면 형제 p 태그 중 첫 번째 요소를 가리키지만,
띄어쓰기를 사용하여 'p :first-child'를 쓰면 p 태그의 자식 요소 중 첫 번째 요소를 가리킨다.
1. body 태그에 div 2개를 생성한다.
2. 첫 번째 div 태그에 p 태그 2개를 작성하고,
3. 두 번째 div 태그에는 h2 태그로 작성한다.
4. p 태그의 first-child를 스타일링한다.
첫 번째 p 태그가 선택되어 지정한 스타일이 적용되었다.
그럼 h2 태그를 p 택로 바꾸면 어떻게 될까?
똑같은 p 태그 중 첫 번째 요소가 될테니 first-child의 영향을 받아 p 태그 first-child 스타일값이
적용될 것이다.
h2를 p로 수정하고 다른 곳은 똑같이 유지하였더니 예상한 결과대로 p:first-child가 p 태그 중
첫 번째 요소를 가리키고, 이에 해당하는 p 태그 2개가 스타일링되었다.
<구조적 가상 클래스 : 형제 중 마지막 요소 선택하기 - last-child>
: last-child는 형제 요소 중 마지막, 즉 막내 요소를 나타낸다.
<style>
p:last-child {
color: lime;
}
</style>
1. body 태그에 div를 2개 생성한다.
2. 첫 번째 div 태그에는 p 태그 2개를
3. 두 번째 div 태그에는 p 태그와 h2 태그를 사용한다.
4. p 태그의 last-child 스타일을 지정한다.
:first-child가 이해가 되니 :last-child는 어렵지 않았다.
<구조적 가상 클래스 : 형제 위치 기반 요소 - nth-of-type()>
: nth-of-type()은 형제 그룹 안에서의 위치를 기반으로 형제 요소를 선택한다.
괄호 안을 1, 2, 3과 같이 숫자로 지정할 수도 있지만, n+1처럼 규칙으로도 지정할 수 있어 형제
선택에 유용하다.
<style>
p:nth-of-type(4n)
color: lime;
}
</style>
짝수와 홀수를 선택하는 예제를 실행해보았다.
1. body 태그에 div와 p 태그를 작성한다.
2. nth-of-type()를 이용하여 홀수, 짝수, 첫 번째 문단을 지정한다. 각각 2n+1, 2n, 1로 지정한다.
nth-of-type()를 이용하여 홀수, 짝수를 지정하면 지정된 태그(예제는 p 태그)만을 카운트한다.
그래서 p 태그를 기준으로 홀수 번째 위치한 p 태그가 빨간색으로,
짝수 번째 위치한 p 태그는 파란색으로 보인다.
추가로 nth-of-type(1)처럼 직접 숫자를 써도 된다.
1은 first-child와 같은 효과를 낸다.
이 예제와 비슷하게 대학교 때 들었던 코딩수업에서 홀수, 짝수를 지정하는 코딩을 배웠던
기억이 있다. 그때 되게 헷갈렸는데 지금은 헷갈리면서도 익숙한 느낌이다.
조금씩 코딩 지식이 쌓여가면서 익숙해지는 것이 현재로서는 내 목표이다. 파이팅 !
<구조적 가상 클래스 : 자식 중 유일한 요소 선택하기 - only-of-type>
: only-of-type은 자식 요소 중 유일하게 사용된 요소를 가리킨다.
'유일하게', 즉, 딱 한 번만 사용된 요소를 지정하는 것이다.
<style>
p:only-of-type {
background-color: lime;
}
</style>
1. span 태그에 div, p, i, em 태그를 작성한다.
2. only-of-type를 이용하여 스타일을 지정한다.
그러면 span 태그의 형제 요소 중 유일하게 사용된 태그만 스타일이 지정된다.
여기서 2가지 주의할 점이 있다.
첫 번째, 이 예제는 style 태그에서 span 뒤에 띄어쓰기를 넣었다. 그러니까 p 태그의 자식 요소
중 첫 번째 요소를 가리킨단 뜻이다.
두 번째, only-of-type은 형제 요소 중에 유일하게 쓰인 태그가 해당된다.
예를 들어, 예제에서 div 태그의 자손으로 p 태그를 하나 더 만들어준다면 기존 p 태그와
div 태그의 자손 p 태그는 형제 요소가 아니기 때문에 유일한 태그가 된다.
<핵심 요약>
1. 동적 가상 클래스
-active : 클릭할 떄 활성화되는 가상 클래스이다.
-visited : 사용자가 이미 방문한 링크를 표시해준다.
-disabled : 비활성화된 요소를 나타낸다.
-hover : 마우스 커서를 화면의 요소에 올려놓았을 때 지정한 스타일링을 실행한다.
-focus : input으로 만든 폼 등 집중(focus)을 받은 요소를 나타낸다.
2. 구조적 가상 클래스
-first-child : 형제 요소 그룹 중 첫 번째 요소를 나타낸다.
-last-child : 형제 요소 그룹 중 마지막 요소를 나타낸다.
-nth-of-type() : 형제 그룹 안에서의 위치를 기반으로 형제 요소를 선택한다.
-only-of-type : 자손 요소 중 유일하게 사용된 태그를 지정한다.
챕터 뒤쪽에 미니 퀴즈를 풀면서 다시 한번 요약하여 머리 속에 저장하는 시간을 가졌다.학번이나 출석번호가 학생을 간편하게 지칭하는 것처럼 가상 선택자는 코드를 효율적으로 선택하는 데 도움을 준다. 오늘 배운 것 이외에도 많은 가상 선택자가 있다고 한다.차차 알아가도록 해야겠다. 오늘도 많은 것을 배웠다 !
*이미지 출처
instagram : @postershop.kr