상태 선택자 -part2-
전 시간에 이어서 이번시간에도 상태 선택자에 대해 설명 하도록 하겠습니다. START~ focus선택자쪽만 보시기 바랍니다. 각각 input태그로 서로 다른 속성을 가진 네이버와 다음을 코딩 하였습니다. 그리고 CSS 부분에 input:focus+a 라고 입력을 하였습니다.focus는 초점이 맞추어진 input태그를 선택합니다.즉, css에서 선택한 곳에 마우스를 클릭하면 css에서 입력한 대로 style이 입혀져요 좀더 정확하게 알아보기 위해 내용을 약간 더 추가하도록 할게요 이렇게 속성이 기본값인 type=text인 input 태그를 작성을 해주고css에다가는 배경색을 갈색으로 해줍니다. 그러면 text입력창에 마우스를 클릭하면 위와같이 갈색으로 배경이 입힙니다. focus 상태 선택자에 대해 어느정..
동위 선택자, 반응 선택자, 상태 선택자 -part1-
이번 포스팅에서는-동위 선택자-반응 선택자-상태 선택자에 대해 예제와 함께 알아보도록 하겠습니다. 가장 먼저 동위 선택자! 1. 동위 선택자동위.. 동위라는 뜻은 같은 위치에 있는 이라는 의미를 가지고 있습니다.(다들 아시겠지?;;)따라서 동위 선택자는 같은 위치에 있는 것들을 선택한다 라는 뜻 입니다. 사용 문법선택자A + 선택자B -> 선택자 A 바로 뒤에 위치하는 선택자 B를 선택 선택자A ~ 선택자B -> 선택자A 뒤에 위치한 선택자 B를 선택 예제를 통해서 한번 알아보도록 할게요 일단 결과는 이렇게 나왔어요 여기다가 이제 style을 입혀볼게요 이제 동위 선택자가 어떤 의미인지 아셨나요?? 이 동위 선택자는 CSS3 애니메션을 사용해 동적으로 움직이는 레이아웃을 구성할 때 동위 선택자를 사용한다..