본문 바로가기
반응형

Web/CSS16

공간차지요소(display 속성) display 속성 요소를 어떤 방식으로 표시를 할 건지 결정하는 속성 📢 들어가기전 살펴봐야 할 것 더보기 요소가 두가지 형식으로 나누어지는데 1. block 형식 차곡차곡 쌓아 올려지는 형식 언제나 새로운 라인에서 시작 웹페이지의 너비만큼 공간 차지 한 줄에 하나씩 수직방향으로 디스플레이됨 width, height 속성으로 요소 크기 지정 가능 , ~, , , , , , ... 2. inline 형식 한줄 안에 차례대로 위치하는 형식 해당 요소의 내용만큼 공간차지 수평방향으로 디스플레이됨 요소 크기 지정 불가능 , , , , ... display 속성 설명 display : block → 요소를 block요소처럼 표시합니다. display : inline → 요소를 inline요소처럼 표시합니다. (.. 2021. 2. 25.
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.
반응형