Front-end/CSS(SASS,SCSS)27

728x90
[SCSS]SCSS문법과 예시 SCSS (Sassy CSS)는 Sass의 주요 구현 중 하나로, CSS와 거의 동일한 구문을 사용하며 Sass의 모든 기능을 지원합니다. SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 같은 구문을 사용하기 때문에 CSS 코드를 유효한 SCSS로 변환하는 것이 쉽습니다. 1.변수 (Variables)$ 기호를 사용하여 변수를 정의할 수 있습니다.$primary-color: #FF6347; 2.중첩 (Nesting)CSS 선택자를 중첩하여 코드의 가독성을 높일 수 있습니다..container { width: 100%; .header { background-color: #333; color: #FFF; }} 3.Mixin재사용 가능한 코드 조각을 생성하는데..
[CSS]테두리 border에 그라디언트 효과 넣기 CSS 속성 linear-gradient와 border-image-slice 를 이용해서 테두리(border)에 그라데이션 효과를 주는 방법입니다. border-image-slice border-image-slice는 CSS 속성 중 하나로, 배경 이미지를 사용하여 요소의 테두리를 꾸밀 때 이미지를 어떻게 잘라낼지를 지정합니다. 이 속성은 border-image-source, border-image-width, border-image-outset와 함께 사용되어 테두리 이미지를 제어하는 데에 기여합니다. border-image-slice의 기본값은 100%입니다. 이 값은 이미지를 가로 및 세로로 100%만큼 사용하도록 설정하는데, 이는 이미지의 전체 부분을 사용한다는 것을 의미합니다. 다음은 borde..
[CSS]display:flex 와 display:grid 속성과 설명 웹사이트 제작 시 기존에는 레이아웃을 잡을 때 CSS속성 중에 position, float으로 주로 사용했다면, 요즘 웹사이트는 flex와 grid를 주로 이용합니다. flex와 grid를 사용하는 이유는 float로 번거롭게 해야했던걸 더 쉽게 해결해 주기 때문입니다. display:flex;와 display:grid;는 CSS의 두 가지 다른 레이아웃 속성입니다. 이들은 웹 페이지 내 요소들의 배치와 정렬 방법을 지정하는데 사용됩니다. display: flex 예를 들어, 다음은 플렉스 박스를 생성하고 내부 아이템들을 가로 방향으로 정렬하는 코드입니다 .container { display: flex; justify-content: space-between; /* 아이템 사이 간격을 최대한으로 벌립니다..
[SASS]vscode sass 컴파일 경로 설정하기 vscode에서 Live Sass Compiler를 통한 sass 컴파일 경로 설정하는 방법입니다. Live Sass Compiler 설정파일에서 해당부분을 찾아서 수정해줍니다. "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/.." }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/.." } ], savePath에서 설정하시면 됩니다. "savePath": null (현재 .sass파일에 .css생성) "savePath": "~/" (현재 위치로 부터의 상대경로) "savePath": "/"..
[SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다...
[SASS]npm install node-sass 설치 에러, node.js 버전 확인 SASS 설치시 (npm install node-sass) 오류가 발생하면, 설치된 node.js 버전이 node-sass 버전을 지원하지 않을 가능성이 크다.node.js 버전이 호환되는 node-sass 버전표를 참고해보자. NodeJSSupported node-sass versionNode ModuleNode 209.0+115Node 198.0+111Node 188.0+108Node 177.0+, 102Node 166.0+93Node 155.0+, 88Node 144.14+83Node 134.13+, 79Node 124.12+, 72Node 114.10+, 67Node 104.9+, 64Node 84.5.3+, 57Node https://www.npmjs.com/package/node-sass n..
[CSS]세로 두줄이상일때 말줄임 처리하기 예전에는 제목이나 글자수를 ... 줄일때는 개발에서 처리를 했었습니다. CSS에서 기능이 지원되면서 한줄 말줄임은 대부분 CSS에서 처리를 하게 되었습니다. 가끔 두줄일때도 말줄임을 할때가 있는데요. 그럴땐 아래처럼 하시면 됩니다. text{ height:50px; text-overflow:ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden } -webkit-line-clamp:2; 두줄일땐 2, 세줄일땐 3으로 하시면 됩니다. (세로 높이값은 꼭 넣어야합니다.) 위처럼 두줄일때 말줄임... 처리가 됩니다. 만약 한줄일경우는 아래처럼 하시면 ..
반응형