nth-child 셀렉터
.cart-table td:nth-child(2) {
color: red;
} 여러 요소를 찾은 다음
원하는 n번째 요소만 스타일을 주고 싶으면 :nth-child(n) 이걸 뒤에 붙여주면 됩니다.
위의 코드는 그래서 .cart-table 안에 있는 모든 td를 찾은 다음
2번째 나오는 td에만 color를 줄 수 있습니다.
테이블에서 원하는 순서의 셀에 스타일줄 때 가끔 유용하게 사용합니다.
.cart-table td:nth-child(even) {
color: red;
}
이러면 짝수로 등장하는 td에만 스타일을 줄 수도 있고
(odd라고 쓰면 홀수입니다)
.cart-table td:nth-child(3n+0) {
color: red;
}
이러면 3의 배수로 등장하는 3,6,9,12.. 번째 등장하는 요소에만 스타일을 줄 수 있습니다.
3n + 1 이렇게 작성하면 (3의배수 +1) 번째 등장하는 요소에만 스타일을 줄 수 있습니다.
중요 : 테두리 색상을 밑에만 넣고 싶으면
표 만들 때, 특정 테두리 부분을 없애고 싶었다. 이때, 이걸 써서 없애고 내가 원하는 부분만 테두리를 남겨놓을 수 있었다.
td, th {
border-bottom : 1px solid black;
}
// top , left, right, bottom 사용가능표를 만들 때, width 관해 알아둬야할 점
셀 블록마다 width를 설정해줄 수 있습니다.
<table>
<tr>
<td class="name">상품명</td>
<td class="price">가격</td>
<td>수량</td>
</tr>
</table>
.name {
width : 50%
}
.price {
width : 20%
}
하나의 td에 width를 주어도 전체 열의 width가 변합니다.
그리고 표에 한해서는 width가 max-width와 같은 역할을 한다. 왜냐면, 다른 행의 열들도 최소 수준의 width를 가지고 있어야 내용물들이 들어갈 수 있기 때문이다.
나름 편리한 점이라고 볼 수 있겠습니다.
표에서 <td> 여러개를 합치고 싶으면
<td colspan="4"></td>colspan에 원하는 숫자를 넣으면 그 숫자만큼 옆의 셀을 합쳐줍니다.
border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우
간혹 border-collapse 속성을 table태그에 적용하면 border-radius가 안먹는 경우가 있습니다.
그럴 때 사용할만한 방법들을 소개해드립니다.
table 태그에 border-radius가 안먹을 때 1.
table {
border-collapse : collapse;
border-spacing : 0;
}
(왼쪽위에있는 td) {
border-top-left-radius : 5px;
}
table 태그에 border-radius가 안먹을 때 2.
table {
border-collapse : collapse;
border-radius : 7px;
border-style : hidden;
box-shadow : 0 0 0 1px #666;
}
box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법입니다.
box-shadow는 그림자 넣는 속성입니다.
상태에 따라서 스타일을 줄 수 있는 Pseudo-class 셀렉터
.btn:hover {
background : chocolate; /*마우스를 올려놓을 때*/
}
.btn:focus {
background : red; /*클릭 후 계속 포커스 상태일 때*/
}
.btn:active {
background : brown; /*클릭 중일 때*/
}
pseudo-class 셀렉터를 붙이시면 여러 상태에 따른 스타일을 지정해줄 수 있다.
hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작합니다.
1. hover
2. focus
3. active
이다. hofa로 외우면 잘외워지겠군!!
이거 말고도 수많은 pseudo-class가 있기 때문에 필요하면 찾아쓰도록 합시다.
:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/
:playing /*동영상, 음성이 재생중일 때*/
:paused /*동영상, 음성이 정지시*/
:autofill /*input의 자동채우기 스타일*/
:disabled /*disabled된 요소 스타일*/
:checked /*체크박스나 라디오버튼 체크되었을 때*/
:blank /*input이 비었을 때*/
:valid /*이메일 input 등에 이메일 형식이 맞을 경우*/
:invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/
:required /*필수로 입력해야할 input의 스타일*/
:nth-child(n) /*n번째 자식 선택*/
:first-child /*첫째 자식 선택*/
:last-child /*마지막 자식 선택*/
이거 말고도 매우 많다.
input 등에도 자주 사용한다.
input:focus {
border : 2px solid red;
}인풋에 커서가 찍혀있을 때 인풋에 스타일을 주고 싶으면 당연히 :focus를 붙이면 된다.
a 태그에도 자주 사용한다
a:link {
color : red; /*방문 전 링크*/
}
a:visited {
color : black; /*방문 후 링크*/
} :link를 붙이면 방문 전 링크
:visited를 붙이면 방문 후 링크에 스타일을 넣을 수 있습니다.
모든 링크의 밑줄제거는 그냥 a태그에 text-decoration : none 붙이면 됩니다.
클릭을 했을 때, 스타일을 다르게 줄 수 있다.
:hover 같은게 수도 클래스이다.
마우스 올릴 때, 스타일은 :hover 이다.
마우스를 누르고 있을 때, 버튼을 누르고 있을 때,
=> 클릭 중 스타일은 :active
button {
cursor: pointer;
}
button:hover {
background-color: chocolate;
}
button:active {
background-color: brown;
}
button:focus {
background-color: white;
}커서 찍혔을 때, 스타일은 :focus
=> 원래, 클릭하고 나서 커서 가 그 자리에 찍혀있단 말이에요.
그리고 다른 데를 누르면, focus 효과가 사라진다.
input 태그 같은 경우는 키보드 커서가 있는 순간이 :focus 겠죠.
:hover => :focus => :active
이 효과들 넣을 때는 순서가 중요하다.
외우기 힘들면, 호빠 라고 외우자!
input {
font-size: 20px;
}
input:focus {
border: 20px solid red;
}
수도 클래스는 a 태그에도 많이 쓴다.
a {
text-decoration: none;
} 링크들의 특징
방문하지 않는 링크는 파란색 그리고 방문한 링크는 보라색이다. by default
그게 싫어서, 색깔을 바꾸고 싶다면,
/* 방문 전 링크 */
a:link {
color: black;
}
/* 방문 후 링크 */
a:visited {
color: pink;
}