CSS 요약 정리

강의를 보면서 놓쳤던, 헷갈리는 CSS 관련 내용을 정리해보자!

CSS 작성 요령

• 일정한 규칙을 가지고 작성하는 것이 유지 및 보수에 도움이 됨

box-sizing

• 테두리 크기까지 모두 포함한 값을 크기로 계산

display

• block / inline / inline-block / flex
• inline 요소들은 임의 여백이 발생하게 됨 -> flex로 해결 가능

선택자

기본 선택자

• * 전체 , 태그 , . 클래스 , # ID , 태그[attr] 속성

그룹 선택자

• 여러태그를 다중 선택 시 ,로 구분

결합자

• 자손 선택 시 공백을 이용하여 선택
• 바로 하위 자식요소 >를 이용하여 선택
• 일반 형제 결합자 ~ 해당 요소 뒤의 요소들을 선택
• 인접 형제 결합자 + 해당 요소 바로 뒤의 형제요소 선택

가상(의사) 클래스 선택자

• :hover 마우스를 올려놓을 때
• :focus 탭키로 포커싱이 되었을 때
• :active 클릭 상태를 유지할 때
• :disabled 사용 불가 상태
• :checked 체크 된 상태일 때
• first/last/nth-child()/only-child(자식이 하나일 경우)

가상 요소 선택자

• 선택한 요소의 주변에 가상 요소를 넣어주는 선택자
• ::before { content : '(' } 앞에
• ::after { content : ')' } 뒤에
• ::placeholder { color : red } placeholder 의 디자인 적용 가능

CSS Emmet

• 활용하여 작성 속도를 높여줄 수 있음, 오타 방지 가능