코딩/CSS
-
[패스트캠퍼스] 프론트엔드 강의 2주 차 후기코딩/CSS 2023. 3. 22. 12:28
- 내 코딩 스타일리고 할 건 없지만, 될 수 있으면 HTML을 깨끗하게 쓰고 싶은 타입이라 학원 수업 때부터 인라인 스타일은 되도록 사용하진 않았다. 꾸밈은 모두 css에서 하려고 했고 동작은 자바스크립트에서 하려고 했다. (이렇게 나열하고 보니 당연한 거 아닌가 싶지만...) 하지만, 막상 코딩을 하면 그때그때의 상황에 따라 코드가 뒤죽박죽이 되기 때문에 흔히들 말하는 스파게티 코드가 되어버리기 쉽다. 그래서 나는 영역(?)을 최대한 나눠서 작업하려고 했고 HTML 안에서 테일윈드를 쓰더라도 레이아웃을 나누는 플렉스 정도만 쓰려고 했다. 왜 이렇게 서론이 길어졌냐면, CSS 파트의 선택자 우선순위랑 강의를 듣고 있자니.... 정말 저거 계산하고 있을 시간에 필요 없는 코드를 지워버리는 게 더 효율적이..
-
[패스트캠퍼스] 프론트엔드 강의 1주 차 후기코딩/CSS 2023. 3. 14. 13:32
- 1주 차 수업 내용은 웹의 전반적인 흐름 및 HTML의 개념 및 핵심만을 정리해서 간단하게 설명해 주는 시간이었는데, 개인적으론 그동안 학원에서 배웠던 내용을 복기하는 과정이기도 했다. 그동안은 뭐랄까... 배운 대로 코딩을 하고는 있는데 이 코딩의 원리에 대해서 확실히 알지 못한 채 적용하고 있는 기분이었다면, 이번 1주 차에서는 그동안의 그 애매함들이 확실해지고 단단해지고 있는 기분이 들었다. 기억에 남는 수업 내용 1. reset css cdn 즉, css 스타일 초기화. 왜 기억에 남는가 하면 학원에서는 일일이 노멀라이즈 하는 방식으로 배웠기 때문이다. 뭐 이것도 메모장(맥일 경우)에 작성해 놓고 css 작성할 때마다 복붙으로 가져다 쓰면 그만이긴 했지만... reset css cdn으로 cs..
-
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; }