선택자
-
inline-grid (라이브러리)코딩/CSS 2022. 6. 3. 16:01
지금까지 수업을 들으면서 요소 사이사이의 미묘한 공백들이 신경쓰였는데 그걸 없앨수 있는 방법을 드디어 배웠다. 심지어 당장 이해하기 어려우면 우선, 코드를 복붙해서 써먹으란다. 이제야 속이 다 후련하군. inline-grid 라이브러리란? inline-block을 이용해서 만든 그리드 라이브러리. 요소를 공백없이 가로로 배치하기 위해 사용한다. .class로 활용 .inline-grid { font-size: 0; } .inline-grid > * { display: inline-block; vertical-align: top; font-size: 1rem; }
-
CSS 선택자 모음1 ( 내 위주)코딩/CSS 2022. 6. 1. 22:19
학원 선생님께서 CSS 선택자 공부할 때 도움이 될거라며 수업시간에 알려주신 게임(?) 사이트. 총 32단계로 되어 있는 나름 알찬 구성의 선택자 게임이다. CSS Diner 처음엔 반신반의했지만, 정말 CSS 선택자 공부에 많은 도움이 되고 있기에 오늘 포스팅은 이 게임을 하면서 반복적으로 헷갈렸던 부분 위주로 정리해봤다. A B A 내부의 모든 B를 선택 A > B A의 직계자식인 B를 선택 A * A 내부의 모든 요소를 선택 A + B A 바로 뒤에 오는 B 요소를 선택 서로 뒤따르는 요소를 형제라고 한다. !!! div + a 는 div 바로 다음에 오는 모든 요소를 선택한다. !!! A ~ B A ~ B는 A 다음에 오는 모든 B를 선택 이것은 A + B와 비슷하지만 A 다음에 오는 B요소를 하..