부트캠프교육중/CSS14 [CSS] Selector (기타) #가상클래스 셀렉터 a: link { } //사용자가 방문하지 않은 a요소를 선택한다 a: visited { } // 사용자가 방문한 a요소를 선택한다 hover : 마우스를 요소위에 올렸을때 active: 활성화된(클릭된) 상태일때 focus: 포커스가 들어와있을때 #UI 요소 상태 셀렉터 input:checked + span { } // 체크상태일때 선택한다 input: enabled + span { } //사용가능한 상태일때 선택한다 input: disabled + span { } //사용불가능한 상태일때 선택한다 #구조 가상 클래스 셀렉터 p:first-child { } ul > li:last-child { } ul > li:nth-child(2n) { } section > p:nth-child(.. 2022. 12. 22. [CSS] Selector (자식/후손/형제) 첫번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. header > p { } 첫번째로 입력한 요소의 후손을 선택한다. 아래 예시의 경우 자식인 p 요소 뿐아니라 자식의 자식인 p요소까지 모두 선택된다. header p { } 같은 부모 요소를 공유하면서, 첫번째 입력한 요소 뒤에 오는 두번째 입력한 요소를 모두 선택한다. 아래 예시의 경우 section 요소 뒤에 있는 세개의 p요소를 모두 선택한다 section ~ p { } 같은 부모 요소를 공유하면서, 첫번째 입력한 요소 바로 뒤에 오는 두번째 입력한 요소를 선택한다. 예시의 경우 section 요소 뒤에 있는 세개의 p요소 중 첫번째 p요소를 선택한다. section + p { } 2022. 12. 22. [CSS] Selector (기본) * :문서의 모든요소를 선택 같은 태그명을 가진 모든 요소를 선택. 복수로도 가능 h1/ div/ section, h1 : section과 h1 모두를 선택했다는 의미이다 #id로 입력하여 선택 ex) #only 같은 class를 가진 모든요소를 선택 .class ex) .widget 같은 속성을 가진 요소를 선택 2022. 12. 22. [CSS] 박스를 구성하는 요소 # border 테두리 -심미적인 용도 외에도 개발과정에서도 매우 의미있게 사용된다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할수 있도록 만든다. border: 1px solid red; -테두리두께(border-width)/ 테두리 스타일(border-style)/ 테두리 색상(border-color) - 둥근모서리: border radius -border style # margin (바깥여백) -값이 4개면 top, right, bottom, left (시계방향) 값이 2개면 top와 bottom, left와 right (10px 20px이면 top=bottom=10, left=right=20) 값이 1개면 모든 방향 위의 내용은 padding도 동일하.. 2022. 12. 22. 이전 1 2 3 4 다음
