어제 오늘 내일

지난번에는 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 선택자를 사용하여, 이 ..

: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 선택자를 사용하여, 배경색을 하늘색으로 지정하였습니다.

지난번에는 이미지에 마우스 오버했을 때, 이미지를 어둡게 하는 방법을 알아보았습니다. [HTML/CSS] 마우스 오버 시 이미지 어둡게 하기 (천천히) 이번에는 텍스트에 마우스를 올렸을 때 바로 아래에 이미지를 보여주는 코드입니다. ' ' (descendant) 선택자 사용하기 '+' 선택자 사용하기 1. ' ' (descendant) 선택자 사용하기 my_mouseover_text.html 여기에 마우스를 가져오세요 my_mouseover_text.css .my_img { display: none; } .my_box:hover .my_img { display: block; } 결과 여기에 마우스를 가져오세요