quantumcode

@use "sass:map"; 선언방법:변수를 아래와 같이 선언한다$config: (a: (b: (c: d))); 적용방법:적용시 아래와 같이 적용한다.@debug map.get($config, a, b, c); // d  적용예시) @use "sass:map";$font-weights: ("regular": 400, "medium": 500, "bold": 700);@debug map.get($font-weights, "medium"); // 500@debug map.get($font-weights, "extra-bold"); // null

live sass compiler 컴파일 경로 변경 : { "liveSassCompile.settings.formats":[ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css" } ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.generateMap": false, "liveSassCompile.settings.autoprefix": [ "> 1%", "last 2 versions" ], }

transition transition-property​ ​: css 속성 이름을 지정합니다. 표기 )​ transition-property : width; transition-duration ​: 이벤트 발생 후 동안 재생할지 지정합니다. 표기 )​ transition-duration : 1s transition-timing-function ​: 이벤트 발생후 재생 속도를 지정합니다. 표기 )​ transition-timing-function : ​esae transition-delay​ ​: 몇 초 후에 이벤트가 발생할지 지정합니다. 표기 )​ transition-delay : .5s 참고 사이트 : https://www.w3schools.com/cssref/css3_pr_transition.asp ..

사용방법 : display : flex​ ​- 박스를 블록 수준의 플레서블 박스로 작동하게 합니다. 표기 )​ display: flex; flex 속성 : flex-direction row ​: 박스를 왼쪽에서 오른쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고 , 교차축은 세로가 됩니다. 표기 )​ flex-direction : row; row-reverse ​: 박스를 가로로 배치하되 역방향으로 배치합니다. 즉, 오른쪽에서 왼쪽으로 배치합니다. 해당 속성값으로 설정 시 주축은 가로가 되고,교차축은 세로가 됩니다. 표기 )​ flex-direction : row-reverse; column ​: 박스를 위에서 아래로 배치합니다. 해당 속성값으로 설정 시 주축은 세로가 되고, 교차축은 가..

pointer-events : 해당 속성은 그래픽 요소가 어떤 상황에서 포인터 이벤트의 대상이 될 수 있는 지정합니다. 키워드 값 중 auto, none을 제외한다면 대부분 SVG에 적용되는 속성입니다. /* 키워드 값 */ pointer-events: auto; pointer-events: none; pointer-events: visiblePainted; /* SVG only */ pointer-events: visibleFill; /* SVG only */ pointer-events: visibleStroke; /* SVG only */ pointer-events: visible; /* SVG only */ pointer-events: painted; /* SVG only */ pointer-eve..

브라우저 공급업체는 실험적이거나 비표준적인 CSS 속성 및 JavaScript API에 접두사를 추가하여 사용할 수 있습니다. 이를 벤더프리픽스( 접두어 )라고 하며 브라우저 공급업체에서 접두어가 필요없는 속성을 제공하기전까지는 접두어를 사용하여 속성을 정의할 수 있습니다. 최근에는 대부분의 브라우저 공급업체가 많이 향상되어서 기존에 접두어로 사용하였다 속성을 접두어 없이 사용할 수 있도록 제공하고 있기때문에 벤더 프리픽스는 기존 노후된 브라우저에 대응하기 위해 사용하는 경우가 많습니다. 아래 브라우저 별 제공하는 접두어 입니다. ● IE ○ Engine: ​Trident ○ CSS- prefix: ​-ms ● edge ○ Engine: ​EdgeHTML​ → ​Blink ​3 ○ CSS- prefix:..

다중 class 사용 사용 방법 : 태그의 class attribute에 다중 클래스 입력 시 공백으로 표기하여 입력 표기 )​ box 다중클래스 선택방법​ ​: css에서 다중클래스 사용 시 “ . “으로 연결하여 사용한다. 표기 )​ box ​주의 : ​#boxgroup .box{} 자식요선택 요소(element)선택 방법: 1. tag ​: 태그명을 사용하여 선택할 수 있다. 표기 ) css div{ /*속성기재*/ } ​html test 2. ID ​: id명을 사용하여 선택할 수 있다.​( “#“으로 표기 ) 표기 )​ css #box{ /*속성기재*/ } html test 3. class ​: class명을 사용하여 선택할 수 있다.​(“ .” 으로 표기 ) 표기 )​ css .box{ /*속..

@media 규칙 @media 규칙은 다양한 장치에서 html 문서가 적절한 형태를 갖추게 만들어 주는 규칙입니다. https://www.w3schools.com/cssref/css3_pr_mediaquery.asp all print screen speech 등과 같은 출력장치에 대응할 수 있습니다. 화면 가로형 @media screen and (orientation: landscape ) { /*source code*/ } 화면 세로형 @media screen and (orientation: portrait ) { /*source code*/ } html 문서에 적용 방식 link 방식 - ex) @import- ex) @import url(“print.css”) print; ex)

css 파일 구성방식은 아래와 같이 한줄형 또는 들여쓰기를 사용하여 속성마다 한줄씩 표기하는 방식등이 있습니다. 한줄형 : 공백이 적기 때문에 파일 용량이 들여쓰기 보다 비교적 작지만 가독성이 떨어진다. div { background: red; color: white; font-size: 16px; } 들여쓰기 속성 마다 명확한 값을 확인 할 수 있기때문에 가독성은 좋지만 빈공백이 많아서 파일 용량이 한줄형 보다 크다. div { background: red; color: white; font-size: 16px; } 작업 파일로 사용할 경우 들여쓰기를 추천하며, 일반적으로 프로젝트를 진행할 경우 공동 작업으로 파일을 공유하여 사용하기 때문에 코드를 명확히 알 수 있는 들여쓰기가 작업이 용이해 보입니다...

웹브라우저에서 user agent style 과 같은 기본 스타일이 적용되어 있습니다. 해당 스타일은 웹 제작 시 도움이 되는 경우도 있지만 잘 사용하지 않는 스타일도 있기 때문에 초기화가 필요한 경우가 있습니다. 직접 초기화 코드를 만들어서 사용하는 경우도 있지만 이미 만들어진 초기화 코드를 사용하는 경우도 있습니다. 오늘은 후자의 경우에 대해서 알아보겠습니다. normalize.css 1. 직접 다운로드 방식 적용 : https://necolas.github.io/normalize.css 해당 링크에 접속해서 파일 다운로드 css3 css 초기화 CDN 방식으로 적용 Google normalize 1. 직접 다운로드 방식 적용 : https://github.com/jonathantneal/normal..