Selector2 2월 23일 (2) CSS selector 2, z-index, display, flex 3. 구조 가상 선택자 HTML 요소의 계층 구조를 기반으로 선택 1) :nth-child(n) - 테이블에서 많이 사용된다. border의 색은 아무것도 지정하지 않으면 검정색이지만 글자색에 따라서 표현된다. n, odd, even 반복활용 가능, 수치를 정해주면 그 수치에 지정된 것만 활용할 수 있다. n 수식이나 특정한 키워드를 사용 even(짝수), odd(홀수), 2n, 3n 등 2) :first-child - 동일 계층의 첫 번째 요소 선택 3) :last-child - 동일 계층의 마지막 요소 선택 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프론트엔드 프로그래밍 프.. 2023. 2. 23. 2월 20일 (2) CSS 기본 선택자, box-sizing, padding Selector의 종류 1. 기본선택자 * : html 문서의 모든 요소를 선택, 보통 여백을 제거하는 용도로 사용 padding : 안쪽 여백 margin : 바깥쪽 여백 type (태그명) : 태그명으로 요소를 선택(다수 선택) . : 요소의 class 속성 값에 따라 선택, 묶어줌 다중 클래스 지정 - 한 요소에 여러 개의 class 값을 지정하여 여러 스타일을 설정 공백으로 값을 구분(형광표시) 예) # : 요소의 id 속성 값에 따라 선택, 식별자 id 속성 값은 가급적 유일한 값으로 작성할 것! html과 css에서는 같은 id를 사용해도 실행되지만, 자바스트립트에서는 id를 하나만 사용할 수 있다. 예) 전체선택자 선택자 단락 제목2 예) 클래스와 id 선택자 클래스 선택자 Lorem ips.. 2023. 2. 20. 이전 1 다음
