한 걸음씩

HTML의 원소들은 기본적으로 네모이다. clip-path 속성을 사용하면 원하는 모양을 구현할 수 있다. clip-path: ploygon(0 0, 100% 0, 100% 75vh, 0 100%); https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path clip-path - CSS: Cascading Style Sheets | MDN The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. d..

SASS는 CSS로 컴파일된 스타일시트 언어이다 완전히 CSS와 호환되는 구문으로 변수, 중첩, 믹스인, 함수 등을 사용할 수 있다. SASS는 대규모 스타일시트를 잘 정리된 상태로 유지하고 프로젝트 내외에서 디자인을 쉽게 공유할 수 있도록 도와준다. npm install -g sass ▶ Preprocessing sass는 vaiables, nesting, operators, imports, partials, mixins, function, extends, control directives와 같은 기능을 가진다. sass 코드가 css 코드로 컴파일되어 사용된다. 이는 css가 가진 방대하고, 복잡하고 유지하기 어려운 부분을 해결해 주는 것이다.. ▶ Variables 변수는 내가 재사용하고자 하는 c..

소규모 프로젝트에서는 스타일을 구성하는 방법이 일반적으로 큰 문제가 되지 않는다. 하지만 더 크고 복잡한 프로젝트의 경우 코드를 구성하는 방법론이 존재한다. 이는 코드를 작성하는 데 걸리는 시간, 필요한 코드의 양에 영향을 준다. 그리고 브라우저에서 수행해야 하는 로딩 시간, 팀원과 작업할 때 높은 성능이 필수적인 경우 특히 중요하다. ▶ 방법론 OOCSS - CSS '객체'로 컨테이너와 콘텐츠 분리 SMACSS - CSS 규칙에 대한 5가지 범주로 CSS를 작성하기 위한 스타일 가이드 SUITCSS - 구조화된 클래스 이름과 의미 있는 하이픈 Atomic - 스타일을 원자적 또는 분할할 수 없는 조각으로 분해 ▶ 왜 BEM을 사용할까? 어떤 방법론보다 구조화된 CSS 및 UI의 이점을 누릴 수 있다. ..

파란색으로 로딩되는 부분을 div로 만들어서 해야하는줄 알았는데 가상요소를 만들어서 하는 방법도 있었다 .line-button{ position: relative; padding: 18px 30px; line-height: 1.25; font-size: 20px; /* 마우스 모양 바꾸기 */ cursor: pointer; } /* 가상요소만들기 */ .line-button::after{ content: ''; /* 아래,왼쪽에 붙어있어야하기 때문 */ left: 0; bottom: 0; /* 가상요소는 만들지만 hover했을때 효과가 나타나야하기 때문에 넓이가 0 */ width: 0; height: 3px; /* line-button에 붙어있도록 */ position: absolute; backgro..

절대 단위 Absolute unit px 상대 단위 Relative unit em : Equal to capital M 실제로 적용된 폰트 사이즈 상위 요소에 적용된 폰트 사이즈를 상속 rem : Root eM html에 적용된 폰트 사이즈를 상속 html에 폰트 사이즈가 20px이 적용되어있고, 내부 p태그에 3rem을 적용하면 p태그의 실제 폰트 사이즈는 20 * 3 = 60px이다. line-height 줄간격 em을 많이 사용 em으로 표현할 때 em단위를 생략함 letter spacing 자간 글자간 간격 px, em font-family 폰트 서체 font-family: 'Poppins', 'serif', 'sans-serif'; → 앞에 있을 수록 우선순위가 높음 font-weight 폰트 ..