스크린샷) 빨간 점선은 홀수번째 배경만 스타일은 부여하였음
# css 원하는 순서 및 홀수, 짝수에만 스타일css를 사용하여 스타일을 부여하는 경우 몇 번째 또는 홀수나 짝수에만 스타일을 추가하고 싶은 경우가 있습니다. 어떻게해야할까요?
이 경우 매우 유용한 선택자 방법으로 특정 순번이나 홀수, 짝수 요소에만 스타일을 부여하는 nth-child() 속성을 사용할 수 있습니다. 이 방법을 사용하여 게시판에서 일부 리스트에만 스타일을 줄 때도 많이 사용됩니다.
Element:nth-child(선택될 위치값)
Ex) p:nth-child(2n-1) { style code }
사용방법은 위와 같이 특정 요소의 css선택자에 :nth-child()를 추가합니다. 그럼 아래 예제를 참고하세요.
# nth-child() 속성 예제보기우선 아래와 같은 소스코드가 있다고 생각해보겠습니다.
<body>
<p>테스트 라인 1번</p>
<p>테스트 라인 2번</p>
<p>테스트 라인 3번</p>
<p>테스트 라인 4번</p>
<p>테스트 라인 5번</p>
</body>
연속된 p태그 5개가 보이시죠? 그럼 하나하나 적용해 볼까요? 아래는 아직 아무 스타일도 적용하지 않은 페이지의 모습입니다.
@ 적용되지 않은 모습
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
보시는 것처럼 아무런 스타일도 없습니다. 그럼 아래부터는 각각 다른 스타일을 적용해보도록 하겠습니다.
# 2n번째에 해당하는 모든 p태그에 적용이번에는 2n번째에 해당하는 엘리먼트에 스타일을 추가하여 빨간색으로 표시해보겠습니다.
p:nth-child(2n) {
color: red;
}
위 코드를 실행하면 아래와 같은 결과입니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
! 홀수번째 엘리먼트에 적용홀수번째 에만 스타일을 추가하는 방법을 알아봅니다. 아래의 css에서는 odd 값을 사용하여 홀수번에만 스타일이 추가됩니다.
p:nth-child(odd) {
color: red;
}
코드를 실행할 경우 아래와 같이 홀수번째만 적용되어 출력됩니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
! 짝수번째 엘리먼트에 적용이번에는 홀수가 아닌 짝수번째에만 스타일을 지정하는 방법입니다. 아까와는 다르게 even 값을 사용합니다.
p:nth-child(even) {
color: red;
}
코드를 수행하면 결과는 아래와 같이 짝수번째에만 적용되어 나타납니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
! 3번째 해당하는 엘리먼트에 적용
이번에는 3번째 해당하는 엘리먼트에만 적용합니다.
p:nth-child(3n) {
color: red;
}
코드 실행시 아래와 같이 스타일이 적용됩니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
테스트 라인 6번
!!!!! 3n+2번째에 해당하는 요소에 적용
만약 3n+2에만 스타일을 적용하려면? 아래와 같이 css를 추가합니다.
p:nth-child(3n+2) {
color: red;
}
코드의 실행결과는 아래와 같습니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
! 처음부터 n번째까지 스타일을 적용만약 처음부터 원하는 순번 n에 해당하는 위치까지 동일한 스타일 적용이 필요하다면 어떻게해야할까요? 이때는 마이너스를 기호를 사용하여 -n을 입력합니다. 아래 예제는 처음, 즉 위에서부터 3번째까지의 행에만 스타일을 적용한 예제입니다.
p:nth-child(-n+3) {
color: red;
}
위 코드의 실행결과는 아래입니다.
테스트 라인 1번
테스트 라인 2번
테스트 라인 3번
테스트 라인 4번
테스트 라인 5번
# nth-child() 적용시 주의할 점은?해당하는 태그안에 다른 태그가 존재할 경우 nth-child() 속성은 적용되지 않습니다. 예를 들어 3번째 p태그에만 속성을 지정하고 싶은데...
<div>
<h3>Test Tags</h3>
<p>first</p>
<p>second</p>
<p>third</p>
</div>
위와 같이 서로 이웃하는 p태그 이외의 h2태그가 존재하는 경우 해당 속성은 적용이 되지 않는 점... 꼭 잊지 마세요! 하지만 이와 무관하게 스타일 지정이 가능한 방법이 있습니다. 바로 nth-of-type() 입니다.
참고로 위 속성은 IE8(인터넷 익스플로러 8) 이하에서는 호환되지 않으니 이 점도 참고하세요!
# 마치면서. 더 많은 정보 링크여기까지 nth-child를 사용하는 다양한 방법을 알아보았습니다. css를 사용한 선택자 방법은 매우 다양합니다. 아래는 선택자와 관련된 다른 링크 정보입니다.
@ 공통선택자 * 사용하는 방법 >
http://webisfree.com/2014-01-31/[css]-공통선택자-(asterisk)-알아보기-그리고-활용방법
@ 속성 선택자를 사용하여 스타일 추가하는 방법 >
http://webisfree.com/2014-01-14/[css]-속성-선택자를-사용해-특정-속성을-가진-요소에-스타일-부여방법
[CSS] 속성 선택자를 사용해 특정 속성을 가진 요소에 스타일 부여방법
CSS의 선택자 지정 방법을 알아봅니다. 여기서는 엘리먼트의 속성을 선택하는 경우 사용 가능한 선택자 방법입니다. # CSS 속성을 선택자로 지정하는 방법 DOM 엘리먼트, 태그 요소는 여러가지 어��
webisfree.com
'JAVA HTML JAVASCRIPT > 소오스' 카테고리의 다른 글
| jstl functions (jstl fn) 정리 (0) | 2020.08.21 |
|---|---|
| serialize() 이용 간단히 form 값을 서버로 넘기는 방법 (ajax 사용) (0) | 2020.08.11 |
| 자바스크립트 정렬 함수, sort() (0) | 2020.08.10 |
| 객체(Object) 와 배열(Array) (0) | 2020.08.10 |
| [MyBatis] 동적 쿼리 IF문 (0) | 2020.08.04 |