반응형 전체 글39 SASS(SCSS) Nesting 기능과 사용법 Nesting은 중첩이라는 뜻입니다. SASS에서 부모선택자를 기준으로 자식 선택자를 사용하여 하나의 스타일 규칙을 다른 규칙 안에 중첩하는 기능을 말합니다. 즉 Nesting을 사용하면 부모 선택자의 반복을 피하고 자식(=후손) 셀렉터를 간단하게 작성할수 있습니다. Nesting을 사용하는 이유는 다음과 같습니다. css셀렉터는 많이 사용하다보면 소스가 복잡해지는데,그러다 보면 어떤 요소를 꾸미는지 제대로 파악하기 어렵게 됩니다. 예시) div.container h1.headTitle > span > a:hover 이때 중첩을 이용하면 가독성과 유지관리가 쉬워집니다. nesting 문법 다음 코드는 css로 작성했을 때와 scss로 작성했을 때입니다. scss는 셀렉터 대신에 nesting을 이용하여.. 2022. 12. 29. VScode로 쉽게 Sass(Scss) 설치, 세팅하기 sass란 css의 단점을 보완하기 위해 만든 CSS전처리기(Preprocessor)입니다. 큰 프로젝트를 하다보면 css의 코드가 길어지고 가독성이 떨어지게 됩니다. 또한 유지보수도 불편하게 됩니다. 이럴때 sass를 사용한다면 코드의 양을 줄일수 있고, 변수나 함수를 이용하여 코드의 재활용이 가능합니다. SASS개발환경 세팅하기 npm으로도 설치하여 사용할수 있지만 VScode툴을 이용하면 쉽게 sass를 이용할수 있습니다. 1. VScode 에디터가 없다면 먼저 설치해줍니다. Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, .. 2022. 12. 29. UI 디자인에서 색상을 사용을 위한 3가지 팁 UI 디자인에서 색상을 사용하기 위한 몇 가지 팁에 대해 알려드리도록 하겠습니다. 디자인을 할 때 색상의 경우 무궁무진하기 때문에 색상 작업하기가 어려운 것 중 하나입니다. 디자인에서 색상 작업을 하는 데 도움이 된 세 가지 내용에 대해 알려드리겠습니다. 1. 그레이스케일로 디자인 먼저 흑백 컬러로 생각하여 디자인하면 디자인 색상에 대해 지나치게 고민하지 않게 됩니다. 사용자가 각 화면에서 집중하기를 원하는 기본 클릭을 유도할 수 있는 것이 무엇인지 생각하고 이를 더 집중되게 만드세요. 인터페이스의 나머지 부분에 따라 더 어둡거나 더 밝게 하면 됩니다. 2. 디자인의 색상 수 제한 사람들이 색상을 최대 3개로 제한하여 사용을 하곤 합니다. 사람들이 사용하는 팁 중에 하나는 전체 색상 수를 줄이기 위해 .. 2022. 12. 20. UI 브레드크럼(breadcrumbs)의 유형 UI용어 중 브레드크럼이라는 용어가 있습니다. 여러 페이지를 돌아다니는 것을 의미합니다. 곧 이동 경로라고 할 수 있습니다. 헨젤과 그레텔이 숲에서 길을 잃지 않기 위해 남긴 빵부스러기 떨어뜨리며 길을 갔는데, 여기서 유래된 용어이기도 합니다. 웹사이트도 여기저리 이동하다보면 길을 잃을 수 있는데, 이때 유용한 것이 브레드크럼입니다. 1. UI 브레드크럼 이란? UI 브레드크럼는 사용자가 사용자 인터페이스 또는 웹 사이트의 계층 구조 내에서 서로 다른 섹션 사이를 쉽게 탐색할 수 있도록 하는 표준 길 찾기 장치입니다. 이러한 이동 경로는 종종 현재 페이지와 이전 페이지, 그 이전 페이지 등을 나타내는 링크의 가계도로 나타납니다. 홈 페이지에 대한 링크는 "/" 또는 ">"와 같은 기호로 구분된 후속 페.. 2022. 12. 19. 이전 1 2 3 4 5 6 7 8 ··· 10 다음 반응형
