① 기본/CSS (2) 썸네일형 리스트형 실무에서 자주 쓰는 필수 CSS 선택자 정리 실무에서 자주 쓰는 필수 CSS 선택자 아래 리스트는 실무에서 자주 쓰는 CSS 선택자입니다. 종류 선택자 예시 설명 클래스선택자 .class .intro intro를 클래스로 가진 모든 요소 Both .class1.class2 .name1.name2 name1과 name2를 둘 다 가진 모든 요소 자손선택자 .class1 .class2 .name1 .name2 name1의 자식 중 name2를 클래스로 가진 모든 요소 아이디선택자 #id #firstname firstname을 아이디로 가진 모든 요소 전체선택자 * * 모든 요소를 선택, 렌더링 성능 저하 가능 요소선택자 element p 모든 p 요소 And element,element div, p 모든 div 요소와 모든 p 요소 자손선택자 elem.. display:none 과 visibility:hidden 의 차이 display:none 과 visibility:hidden 의 차이 이 둘은 사용자의 눈에 보이지 않는다는 공통점이 있습니다. 하지만, 전자는 렌더링 트리에서 없고, 후자는 렌더링 트리에 있다는 큰 차이점이 있습니다. visibility:hidden은 브라우저 렌더링 과정에서 본인의 크기만큼 차지하며 레이아웃을 그립니다. 요소를 완전히 없애고 싶은지, 혹은 차지하는 공간은 놔둔채로 사용자 눈에서만 보이지 않고 싶은지에 따라 구분에서 사용하면 됩니다. 아래 예시에서, 버튼을 눌러 차이점을 확인해 보세요. See the Pen xxgJqNJ by leepro (@leepro225) on CodePen. 정리 display:none 은 렌더 트리에서 없어짐 vs visibility:hidden은 렌더 트리에 .. 이전 1 다음
프론트엔드 개발자의 주머니에는 뭐가 들었을까?
