어제 오늘 내일

:nth-child() nth-child() 는 파라미터로 입력 된 패턴의 순서에 따라 요소를 선택하는 선택자입니다. 이 선택자를 이용하여, 테이블의 짝수 또는 홀수 행에만 스타일을 적용할 수 있습니다. 파라미터로는 함수 또는 지정된 키워드를 입력할 수 있습니다. 함수 예제 2n+1 : 홀수 번째 요소를 선택합니다. 2n : 짝수 번째 요소를 선택합니다. 5 : 5번째 요소를 선택합니다. 5n : 5의 배수 번째가 되는 요소를 선택합니다. 이런 식으로 원하는 함수를 입력할 수 있습니다. 키워드 odd : 홀수 번째 요소를 선택합니다. even : 짝수 번째 요소를 선택합니다. 테이블의 홀수 행에만 스타일 적용하기 이름 나이 Anna 20 Tina 30 David 33 table, td, th { bord..

CSS의 요소 중 홀수 번째, 또는 짝수 번째 요소를 선택하는 방법입니다. :nth-child() 형제 요소들 중 파라미터로 입력된 패턴에 따라, 요소를 선택합니다. 파라미터에는 다음과 같은 값들을 넣을 수 있습니다. 키워드 odd : 홀수 번째 요소를 선택합니다. even : 짝수 번째 요소를 선택합니다. 함수 예제 2n+1 : odd와 같습니다. 홀수 번째 요소를 선택하게 됩니다. 2n : even과 같습니다. 짝수 번째 요소를 선택하게 됩니다. 5n : 5의 배수 번째 요소를 선택합니다. 7 : 7번째 요소를 선택합니다. n : 모든 요소를 선택합니다. 이 외에도 자유롭게 필요한 함수를 입력하여 원하는 요소를 선택할 수 있습니다. 홀수, 짝수 선택자(odd, even) 홀수 짝수 홀수 짝수 홀수 짝..

테이블의 행(row)에 마우스를 올릴 경우, 해당 행의 배경색을 변경하는 방법입니다. :hover css의 pseudo-class(의사 클래스)인 :hover는 보통 마우스 포인터가 요소 위에 올라가면 선택됩니다. 이 :hover를 사용하여, 마우스가 테이블의 특정 row에 올라갔을 때, 행 전체의 배경색을 변경할 수 있습니다. 마우스오버 시, 행(row) 배경색 변경 이름 나이 Anna 20 Tina 30 David 33 table, td, th { border: 1px solid black; border-collapse: collapse; } table tr:hover { background-color: GreenYellow; } table tr:hover { background-color: Gree..

테이블의 제목을 붙이기 위해 태그를 사용할 수 있습니다. 여기서는 이 캡션의 위치를 지정하는 방법을 알아보도록 하겠습니다. 캡션의 위치 지정 (caption-side) 캡션의 위치를 지정하기 위해 caption-side 속성을 사용할 수 있습니다. top : 캡션을 테이블의 위쪽에 배치합니다. bottom : 캡션을 테이블의 아래쪽에 배치합니다. 캡션 위쪽에 놓기 학생 이름 나이 Anna 20 Tina 22 table, td, th { border: 1px solid black; border-collapse : collapse; } caption { caption-side: top; } caption-side: top; caption-side 속성 값을 top으로 지정하여, caption을 테이블의 위쪽..

border-color table/tr/td 태그에 border-color 속성을 이용하여 테이블의 테두리 색상을 지정할 수 있습니다. border border는 테두리의 너비, 스타일, 색상을 지정할 수 있는 단축 속성입니다. border 속성 안에 다음과 같은 속성을 한번에 지정할 수 있습니다. border-width border-style border-color border 속성으로 border-color로 지정할 수 있으므로, border 속성을 이용해도 테이블의 테두리 색상을 변경할 수 있습니다. border-color 속성 사용해서 테두리 생상 지정하기 이름 나이 Anna 20 Tina 22 table, td, th { border-width: 1px; border-style: solid; b..

마우스로 텍스트 영역을 드래그했을 때, 선택된 부분의 배경색과 글자색을 변경하는 방법입니다. ::selection ::selection은 사용자가 마우스로 드래그하거나 클릭하여 선택한 텍스트 영역에 스타일을 적용할 수 있는 pseudo-element(의사 요소)입니다. ::selection { color: red; background-color: yellow; } ::selection 하위에는 다음의 속성을 정의할 수 있습니다. color background-color text-decoration text-shadow -webkit-text-stroke-color, -webkit-text-fill-color, -webkit-text-stroke-width 드래그 영역 글자색, 배경색 변경하기 이 영역을 ..

지난번에는 CSS에서 첫 번째 요소만을 선택하는 법과 마지막 요소만을 선택하는 법을 알아보았습니다. [HTML/CSS] 형제 요소 중 첫번째 요소 선택하기 (:first-child) [HTML/CSS] 형제 요소 중 마지막 요소 선택하기 (:last-child) 이번에는 반대로 첫번째 또는 마지막 요소를 제외하고 나머지 요소를 선택하는 방법을 알아보도록 하겠습니다. :not(selector) :not(selector) 선택자를 사용하면 selector로 선택된 요소를 제외한 나머지를 선택할 수 있습니다. 첫 번째 요소를 제외하고 나머지 선택하기 (:not(:first-child)) 첫번째 두번째 세번째 마지막 .my { background-color: yellow; } .my:not(:first-chil..

지난번에는 ':last-child' 선택자를 이용하여 형제 요소 중 마지막 요소를 선택하는 방법을 알아보았습니다. [HTML/CSS] 형제 요소 중 마지막 요소 선택하기 (:last-child) :first-child CSS에서 ':first-child' 선택자를 이용하여 형제 요소 중 첫번째 요소를 선택할 수 있습니다. 첫번째 두번째 마지막 .my { background-color: yellow; } .my:first-child { background-color: skyblue; } .my:first-child 예제에는 'my'라는 클래스명을 가지는 3개의 형제 div가 있습니다. 이 중 가장 첫 번째 div를 선택하기 위해서 먼저 my클래스를 선택하고, :first-child 선택자를 사용하여, 이 ..

CSS의 선택자 중 자식 요소(부모 요소 바로 하위의 요소), 자손 요소(부모 요소 하위의 요소, 바로 하위가 아니어도 된다)를 선택하는 방법을 알아보도록 하겠습니다. 자식 요소 선택하기 ( '>' ) 부모 요소 바로 하위의 자식 요소를 선택하기 위한 결합자로 '자식 결합자(Child Combinator)'라고 합니다. 부모선택자 > 자식선택자 위와 같은 형식으로 사용하며, 부모 요소 바로 하위의 자식 요소를 선택합니다. 자식요소1 자식요소2 자손 div > h5 { background-color: yellow; } div > h5 div 요소 바로 하위의 h5 요소만 선택합니다. 자손 요소 선택하기 ( ' ' ) 보통 한 칸의 공백 문자로 표현하는 '자손 결합자(Descendant Combinator)..

:last-child CSS의 :last-child 선택자를 이용하여 형제 요소중 마지막 요소를 선택할 수 있습니다. 첫번째 두번째 마지막 .my { background-color: yellow; } .my:last-child { background-color: skyblue; } 위 예제는 'my' 라는 클래스명을 가지는 3개의 형제 div 요소가 있습니다. 이 3개의 형제 요소 중, 마지막 div 요소를 선택하는 예제입니다. 'my'라는 클래스를 가지는 div 영역은 배경색이 모두 노란색입니다. 이중, 마지막 div 영역만 하늘색으로 표시하기 위해서, .my:last-child 선택자를 사용하여, 배경색을 하늘색으로 지정하였습니다.