CSS
-
[CSS] CSS를 대체할 CSS in CSS와 CSS in JS에 대해 알아보자 (CSS Module , SCSS 등)웹 개발/HTML & CSS 2021. 5. 11. 19:37
프로젝트가 커질수록 모든 html 요소에 클래스 naming을 해줘야하고 컴포넌트 스타일을 변경할 때 클래스에 맞는 선택자를 일일히 찾아 변경해야하기 때문에 번거롭다. 또한 JS 파일과 분리되어있기 때문에 컴포넌트의 상태값 변화를 공유하기 힘들다. CSS 문제점 (Vjeux) - Global namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제 - Dependencies: css 간의 의존관계를 관리하기 힘든 문제 - Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제 - Minification: 클래스 이름의 최소화 문제 - Sharing Constants: JS 코드와 상태 값을 공유..
-
[HTML/CSS] CSS의 수평 수직 정렬구조 (float / flex)웹 개발/HTML & CSS 2021. 4. 8. 17:18
flutter에서는 수직을 column 위젯으로, 수평을 row 위젯으로 정의해 레이아웃을 만들었다. css에서는 flutter와 달리 float, display 등 레이아웃을 위한 다양한 방법이 있었는데 그 중 display property! 대부분의 요소들이 수직으로 display되는 block 구조이고 inline, inline-block처럼 수평으로 display되는 구조도 있다. 하지만 block 구조는 계속해서 수직으로 쌓이고 inline은 수평으로 쌓여서 내가 원할 때 줄바꿈을 어떻게 해야할지, 다른 방법은 있는지 고민이 많았다. 그래서 정리해보았다! float 속성을 이용한 수평 정렬 - clear property float을 이용해 수평구조를 만든 후 float의 적용을 없애고 수직으로 ..
-
[CSS] CSS 기본 문법웹 개발/HTML & CSS 2020. 6. 23. 01:08
내가 보려고 정리하는 CSS 기본 문법 https://heropy.blog/ 를 참고했습니다. 선택자 (Selector) css를 적용할 html의 특정 부분을 지정하는 사인(sign) 이다. 선택한 부분을 속성 (Properties)와 값(Value)로 설정할 수 있음 (속성 : 값) 예시1) 로 정의해놓은 부분에 css 적용 div { color : red; font-size : 20px; width : 300px; height : 200px; margin : 20px; padding : 10px 20px; position : absolute; } 예시2) h1 부분과 p 부분에 각각 색상에 대한 css를 적용 title content h1 { color:red; } p { color:blue; } ..