코딩
-
float-grid 라이브러리 (feat. inline-grid)코딩/CSS 2022. 6. 21. 09:16
웹퍼블리셔가 가장 많이 사용하는 속성이라고 한다... 내가 봐도 그러해 보이기에 써 놓는 거임. float란? block 요소는 float 요소를 무시한다. float:left; : 좌에서 우로 나열된다. float:right; : 우에서 좌로 나열된다. clear:both; : float 계의 줄바꿈, 적용시킨 요소부터 새로운 줄에 나온다. (나부터 새 줄에 나올거야!) ㄴ clear:both;를 적용시키기 위해서는 반드시! display가 block이어야 한다. float을 사용하게 되면 부작용이 생긴다. block 요소가 float 요소를 무시하게 된다. ㄴ 해결방안 : 부모의 ::after에 높이가 '0'인 막내를 만들어 형들 아래에 딱 붙여준다. 이러한 문제점까지 보완한 것이 바로 아래의 라이브..
-
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요소를 하..
-
Normalize.css (노멀라이즈 모음)코딩/CSS 2022. 5. 30. 15:17
노멀라이즈란? 기존에 적용되어 있는 스타일을 제거하여, 평범하게 만들어 주는 과정이다. 노멀라이즈를 할 때에는 항상 CSS 위 쪽에 써 준다. a의 노멀라이즈 a { color:inherit; text-decoration:none; } body의 노멀라이즈 body { margin:0; } 리스트 태그의 노멀라이즈 ul, li { list-style:none; margin:0; padding:0; } 헤딩 태그의 노멀라이즈 h1, h2, h3, h4, h5, h6 { margin:0; font-weight:inherit; font-size:inherit; }