IT 기초/CSS (2) 썸네일형 리스트형 미디어 쿼리 개념 정리 ▶ 미디어 쿼리 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법 → 반응형 웹에서 필수로, 화면 크기마다 각각 다르게 CSS 적용 @media 미디어 유형 and (조건) {스타일} * 미디어 유형 all print (인쇄 장치) screen (컴퓨터 스크린) tv (음성과 영상이 동시에 출력되는 TV) aural(음성 합성 장치) braille(점자 표시 장치) handheld (패드) projection (프로젝터) tty (디스플레이 기능이 제한된 장치) * (조건)에 들어갈 속성들 - 웹 문서의 가로 너비와 세로 높이 속성 width, height min-width, min-height max-width, max-height - 단말기의 가로 너비와 세로 높이 속성 device.. 가상 클래스(:) & 가상 요소(::) ▼ 가상 클래스 문서 트리에 존재하는 요소의 특정 상태를 선택하는데 사용 * 사용자 동작에 반응하는 가상 클래스 :link 방문하지 않은 링크에 스타일 적용 ex. 텍스트 링크의 밑줄 없애거나 색상 바꿈 :visited 방문한 링크에 스타일 적용 :hover 특정 요소에 마우스 포인터를 올려놓으면 스타일 적용 :active 웹 요소를 활성화했을 때 스타일을 적용 (링크나 이미지 클릭했을 때) :focus 웹 요소에 초점이 맞추어져있을 때 스타일 적용 * 요소 상태에 따른 가상 클래스 :target 문서에서 같은 사이트나 다른 사이트의 페이지로 이동할 때는 링크 이용, 같은 문서 안에서 다른 위치로 이동할 때는 앵커 이용 → 앵커(a)의 목적지가 되는 부분의 스타일을 적용 :enabled :disabled.. 이전 1 다음