728x90 반응형 웹UI46 CSS 가상 선택자, 가상 요소 pseudo selector -> 현재 존재하지 않는 구조 -> 특정 요소의 상태를 미리 추정 가상 클래스 ( pseudo class ) -> 미리 정의해놓은 상황에 적용이 되도록, 보이지 않는 클래스 정의되어있는 가상 클래스 -> https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 문서 구조와 관련된 가상 클래스 -> first-child : 첫 번쨰 자식 요소, last-child : 마지막 자식 요소 링크 가상 클래스 -> link : 아직 방문하지 않은 링크, visited:방문한 링크 사용자 동작 관련 가상 클래스 -> focus: 입력 포커스를 갖는 요소에 적용 -> hover: 마우스 포인터가 위치해 있는 요소에 적용 -> active.. 2021. 1. 10. CSS 문서 구조를 이용한 선택자 자손 선택자 ex) div span {} -> 요소의 자손을 찾을 때 -> 공백으로 구분 자식 선택자 ex) div > span {} -> 요소의 자식 요소만 선택 -> > 기호로 구분 인접 형제 선택자 ex) div + span {} -> 인접한 형제 요소만 선택 ( 떨어져 있으면 적용이 되지 않음 ) -> 세 선택자를 조합하여 사용할 수 있음 2021. 1. 10. CSS 이해하기 & 문법 Cascading Style sheets HTML(마크업 언어)를 꾸며주는 언어 html을 디자인하는 언어 CSS 문법 선택자 속성 값 선언 선언부 규칙 h1 {color:yellow; font-size:2em;} h1 - 선택자 (selector) color - 속성 (property) yellow - 값 (value) 속성과 값을 묶어서 선언(declaration)이라고 부른다 각 선언은 세미콜론 ( ; )으로 구분 선언을 포함하는 중괄호 부분을 선언부(declaration block) 라고 부른다 이 전부를 규칙 (rule set)이라고 부른다 주석 -> /* 내용 */ CSS 적용방식 inline -> 하나의 html 태그 내에 style 속성으로 바로 적용 internal -> html head.. 2021. 1. 10. HTML 블록(block)& 인라인(inline) BLOCK level 한 줄에 하나의 요소 div, h1~h6, p, ul, li, table 등 INLINE level 한 줄에 여러개 요소 (블록 레벨의 자식 요소) span, i , img, em, strong 등 -> inline 요소는 block레벨을 감쌀 수 없지만 예외로 a태그가 있다 2021. 1. 10. 이전 1 ··· 6 7 8 9 10 11 12 다음 728x90 반응형