본문 바로가기
반응형

Web30

CSS 크기 단위 고정 크기 단위 - 부모나 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위 - 이 단위들은 대부분 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 단위 설명 in 인치 (1in = 2.54cm = 96px) px 픽셀(1px = 1/96in) pt 포인트(1pt = 1/72in) pc 파이카 (1pc = 12pt = 1/16in) cm 센티미터 (1in = 2.54cm, 1cm = 96px/2.54) mm 밀리미터 (1in = 25.4mm, 1cm = 10mm) 가변 크기 단위 - 상위요소나 뷰포트 크기에 상대적인 크기를 지니는 단위 - 이 단위들을 사용할 떄는 부모가 누구인지, 무엇을 기준으로 크기를 잡을 건지 생각하면서 쓰는것이 좋다 - 웹 개발에 가장 유용한 단위 단위 설명 em 부.. 2020. 12. 20.
CSS 선택자 - 가상요소, 가상클래스 가상클래스 문서의 특정위치, 특정영역, 특정요소를 선택하기 위해 미리 만들어 놓은 선택자 - 이미 존재하는 요소를 선택하는 선택자 1. 구조선택자 - 숫자가 아니고 순서를 의미하는 것 - 특정위치에 있는 요소 선택 - 선택자 : 요소명:가상클래스 (요소명대신 아이디, 클래스 명도 가능) 가상클래스 의미 :first-child 연속되는 자식 요소(같은부모의 자식) 중 첫번째 자식 :last-chlid 연속되는 자식 요소(같은부모의 자식) 중 마지막 자식 :nth-child(수열) 연속되는 자식 요소(같은부모의 자식) 중 수열에 해당하는 자식 :nth-child(odd) 연속되는 자식 요소(같은부모의 자식) 중 홀수번째 자식(2n+1) :nth-child(even) 연속되는 자식 요소(같은부모의 자식) 중 .. 2020. 12. 19.
CSS 선택자 - 조합선택자(후손,자식,형제) 후손?자손?자식? 1. 후손선택자 = 자손선택자 = 하위선택자 - 자식을 포함하는 의미 = 계층구조에서 하위에 오는 모든 자손선택 - 선택자 : 공백(스페이스바 한번) → 사진이 의미하는 것 : #container ul 2. 자식선택자 - 앞 요소의 자식인 뒷요소를 선택 = 직계 자식만을 선택 - 선택자 : > → 사진이 의미하는 것 : #container > ul 📢 참고 후손보다는 자식을 많이 사용한다 (사용자 위주로 생각하기) 요소의 가중치를 둬야하는지 항상 생각하면서 선택자 쓰기 3. 동위선택자 = 형제선택자 - 같은 부모를 가진 요소들 = 계층구조에서 요소 바로 다음에 오는 요소선택 - 선택자 : +, ~ - 인접형제선택자(+) : 앞의 요소 바로 뒤에 있는 요소만선택 → 사진이 의미하는 것 :.. 2020. 12. 18.
CSS 선택자 - id, class 선택자 선택자란? 요소들에게 스타일을 주기 위해서 해당 요소를 DOM에서 찾기 위한 수단이다 ◆ 선택자의 종류 1. 기본선택자 - 기본선택자는 선택자를 하나를 사용하는 것 - 전체선택자(*), 태그선택자(h1, p, div), id선택자(#X), class선택자(.X), 가상요소, 가상클래스 2. 조합선택자 - 조합선택자는 선택자를 여러개를 사용하는 것 - 하위(자손)선택자, 자식선택자, 동위(인접형제)선택자 0. 전체선택자 - 모든 요소를 선탤 할 때 사용 - 선택자 : * - 브라우저에 적용되어있는 magin, padding값을 초기화시켜주기 위해서 많이 사용된다 - 하지만!! 브라우저의 성능을 떨어뜨리는 주범으로 사용하는 것을 권장하지 않음 1. 태그 선택자(요소 선택자) - 태그명이 선택자와 같은.. 2020. 12. 17.
반응형