지난 글에 이어 CSS에 대해
알려드리도록 하겠습니다.
저번 글에서는
position 중
Static, Relative,
Absolute에 대해
알려드렸는데요.
만약 기억이 잘 나지 않으시거나
혹시 모르시는 분들은
밑에 글을 참고해주세요.
기초코딩 - CSS의 기초 (Static, Relative, absolute에 대해)
지난 글에 이어 CSS에 대해 알려드리도록 하겠습니다. 저번 글에서는 position 중 하나인 Fixed에 대해 알려드렸는데요. 만약 기억이 잘 나지 않으시거나 혹시 모르시는 분들은 밑에 글을 참고해주
tm-csc.tistory.com
이번 글에서는
pseudo Selectors를
알려드리겠습니다.
일단 Pseudo Selectors는
좀 더 세부적으로
엘리먼트를 선택한다고
말할 수 있습니다.
어떤 박스나 콘텐츠의
스타일은 변경하고 싶으면
보통 div, body 등
태그의 이름을 적거나
. 점을 찍고 클래스명을 적고
#을 쓰고 아이디를 적는 방법으로
원하는 콘텐츠를 부르게 되는데요.
그런데 가끔은 다른 방식으로
해당 콘텐츠 또는 엘리먼트를
선택하고 싶을 수도 있습니다.
쉽게 말해 클래스를 선택하는데
div 다음에 오는 클래스를
선택한다던가 또는
처음이나 마지막에 있는
클래스만 선택하고 싶을 때
pseudo Selectors를 이용해서
선택할 수 있습니다.
그럼 먼저
VSC를 실행시켜주세요.
그리고 이렇게 DIV를
6개 정도 만들겠습니다.
기존의 DIV는 그대로 둔 채
div:last-child {
background-color: green;
}
div 중 마지막 아이의
색상을 초록으로 변경해
라고 적어주게 되면
이렇게 맨 끝에만
초록색 상자로 변경된 것을
확인할 수 있습니다.
당연한 얘기겠지만
div:first-child {
background-color: red;
}
div 중에 첫 번째 div를
빨간색으로 변경해
라고 적게 되면
이렇게 첫 번째 상자만
변경되게 되죠.
사실 이렇게 스타일을
변경하는 것이 CSS에만 적고
HTML은 변환시키지 않기에
더욱 효과적인 방법이라고
할 수 있습니다.
또한 이렇게 처음과 끝 외에도
다르게 선택할 수도 있는데요.
이렇게 문자가 들어간
span 박스가 여러 개
있다고 가정하고
두 번째 박스를
초록색으로 변경해보겠습니다.
그럼 이렇게
span:nth-child(2) {
background-color: green;
}
nth-child를 사용해서
원하는 번호를 적고
원하는 스타일로
변경시킬 수 있습니다.
또한
span:nth-child(2),
span:nth-child(4) {
background-color: green;
}
이렇게 두 번째, 네 번째
적으면서 변경시킬 수도 있죠.
하지막 계속해서
교차해서 변경시키고
싶다고 2,4,6,8,10
계속 적는 건 비효율적이기에
그때는
span:nth-child(even) {
background-color: green;
}
짝수를 뜻하는 even을
적어주게 되면
그럼 계속해서
div 또는 span을
만들어도 짝수 박스는
변경되겠죠.
당연히 홀수를 뜻하는
ODD를 적어도 가능합니다.
또한 2n +1 등을 원하는
수열을 적어서 규칙성 있게
스타일은 변경시킬 수도 있죠.
즉 조금 더 다양하고
편하게 스타일은 변경할 수
있는 만큼 자주 사용하게 되며
직접 적고 실행한다면 조금 더
쉽게 익힐 수 있습니다.
그럼 여기까지 궁금하신 점은
댓글에 남겨주시고
공감과 구독도 부탁드립니다.
