728x90 반응형 웹UI/CSS14 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. z축에 영향을 미치는 속성 (z-index ) position이 3차원일 경우 사용 → relation, fixed, absolute z-index는 가장 마지막에 적용된 것이 우선순위를 갖는다 (위 쪽에 위치하게 됨) z-index의 값이 큰 것이 우선 순위를 갖는다 (단위 없음, ( - ) 값 가능) ↓ 3차원 요소 2020/12/24 - [엘리스 코딩/모바일 웹] - CSS position - 2차원과 3차원을 결정짓는 요소 CSS position - 2차원과 3차원을 결정짓는 요소 1차원 - 선의 세계 2차원 - 평면의 세계 3차원 - 공간의 세계 웹사이트는 2차원 + 3차원 이다 웹사이트의 레이어(층)의 유무 → postion속성 부모 자식간 마진 병합 현상이 있다 → 2차원 자식의 높이 nantes.tistory.com 2020. 12. 24. 이전 1 2 3 4 다음 728x90 반응형
