웹/HTML & CSS27 [SASS] Sass란 / 간단하게 설치하기 / vscode scss 설정 / 파셜(partial)파일 1. Sass란?Sass는 CSS 전처리기입니다.CSS의 단점을 보완하여 보다 가독성이 높고 코드의 재사용성이 유리합니다.CSS의 문법은 배우기가 쉬워 프로젝트의 규모가 작을 때는 문제가 없어보이지만, 프로젝트의 규모가 커지면 수정이 빈번히 발생하게 되면 코드가 지저분해지고 유지보수가 어려워지는 단점을 가지고 있습니다.Sass는 보다 심플한 표기법과 CSS를 구조화하여 표현할 수 있습니다. 2. 설치하기(window)1) 먼저 루비언어를 설치해줍니다. (without dev 최신버전으로)https://rubyinstaller.org/downloads/2) cmd 창에서 gem install sass 입력해서 sass를 설치해줍니다.3) sass -v 로 설치된 버전 정보를 확인해줍니다. 3. vscode.. 2020. 6. 9. [CSS] @keyframes / animation 속성 / 애니메이션 구현 1. keyframes @keyframes는 각 구간에서 어떤 스타일로 모션을 적용시킬지 정하는 문법입니다. IE는 버전 10 이상에서 사용할 수 있습니다. 크롬, 사파리는 -webkit- 만 붙이면 거의 모든 버전 가능합니다. 문법 @keyframes name{ 0%{ } 100%{ } } name - keyframes가 적용될 이름을 정합니다. 0% - 시작할 때 적용될 구간 100% - 끝날 때 적용될 구간 예제 @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } 2. Animation animation 속성은 애니메이션에 이름을 지정하거나 지속시간, 속도 조절 등을 지정할 수 있는 속성을 가지고 있습니다. animation 축약형 animati.. 2020. 5. 30. [CSS] 간단하게 SVG 적용하는 법 SVG란? SVG(Scalable Vector Graphics)는 말그대로 확장 가능한 벡터 그래픽입니다. 벡터 그래픽이기 때문에 화질이 선명하며, 용량이 적습니다. 또한 SVG는 그 자체로 이미지 파일이자 소스파일이기 때문에 일러스트레이터와 같은 이미지 툴이나 코드에디터에서 바로 편집이 가능하다는 장점이 있습니다. 하지만 지원하지 않는 브라우저도 있으니 (ie 8이하 또는 안드로이드 2.3이하 버전) 참고해주세요. * SVG 이미지 다운받을 수 있는 사이트 하나 추천해드리겠습니다. Material Design Icons https://design.google.com/icons/ Material Icons Get Material Icons material.io - 구글에서 제공하는 아이콘이기 때문에 구글.. 2020. 5. 27. [CSS] clear 속성, float 속성, float 해제하는 방법(가상요소) clear 속성은 보통 float 속성을 해제할 때 많이 사용합니다. float은 블록요소를 강제로 좌우배치할 때 쓰이는데요, 하지만 float을 사용하게 되면 float이 설정된 요소는 브라우저가 높이 값을 인지하지 못하기 때문에 이때 clear을 사용해줍니다. clear의 속성은 clear은 취소하다라는 의미를 가지고 있는 것에 걸맞게 float 값을 해제해주어 높이 값을 인식합니다. * float 해제하는 방법 float을 해제하는 방법은 총 6가지 방법이 있습니다. 1. float된 요소의 부모태그에 강제로 높이 값을 지정해줍니다. (단점 : 반응형시 자동 높이 값 설정 불가) 2. float된 요소의 부모태그에 overflow:hidden을 적용해줍니다. (단점 : 해당 요소 안의 컨텐츠를 박스.. 2020. 4. 19. 이전 1 2 3 4 ··· 7 다음
