빵 입니다.

우리는 이미지를 화면 사이즈의 변함에 따라 꽉 차게 작업할 때 img {width: 100%; height: auto;} 혹은 img {max-width: 100%; height: auto;}를 사용한다. 그렇다면 동영상에도 그렇게 적용할 수 있을까? 정답은 NNNNN 동영상, 특히 유튜브를 퍼온다면 을 사용하게 되는데 이미지처럼 height: auto가 적용되지 않는다. 유튜브 동영상을 화면 사이가 변함에 따라 & 비율에 맞게 적용하려면? 조건1. 화면 사이즈가 반응형되더라도 비율에 맞추어 항상 꽉찬 화면 제공한다. 조건2. 유튜브가 제공하는 16:9 비율에 맞추되 상하에 검정 여백 없이 삽입한다. 문제점 분석 에 넓이를 주든 높이를 주든 고정된 값이다. 화면이 커지면 검정 여백이 생기고, 작아지면 영..

회사에서 SCSS에서 rgba() 사용에 대한 질문을 받았다. rgba(red, green, blue, alpha); 혹은 rgba(aqua, 0.5); 막연하게 위의 내용처럼 사용하면 되는구나 생각했다. 만약 rgba 값으로 var() 함수를 이용해 사용자 지정 속성 사용하고 싶다면 어떻게 해야 할까? 그래서 테스트를 해보았다. // (O) color: rgba(red, 0.5); color: rgba(#ff0000, 0.5); color: rgba(#f00, 0.5); color: rgba(255, 0, 0, 0.5); color: rgba(rgb(255, 0, 0), 0.5); $red: #f00; color: rgba($red, 0.5); 색상명 HEX 코드 3자리 HEX 코드 풀어쓴 rgb 값 ..

[2022. 09. 14] sass-migrator를 사용해서 이전 버전의 소스를 한 번에 변경해보자! Sass에서 @import를 사용하지 않고, @use와 @forward를 사용하는 이유를 공부했다. [1/2] @import 대신 @use 사용하자. 그럼 @forward 는? [2022. 08. 30] 이론부터 털어보자! @import와 @use는 여러 페이지에서 공통으로 사용할 mixing, function, variable을 가져와 사용하게 해준다. @import는 파일을 전역으로 가져오기 때문에 CSS 에러가 발생할 경. webduck.tistory.com 그렇다면 Sass 버전 업을 할 경우, 그 많은 소스를 어떻게 바꿔야 할까? 그 고민을 해결하기 위해 전체 소스를 한 번에 바꿀 수 있는 s..

CSS 사용자 정의 속성 -- 접두사를 붙여 사용자 정의 속성 선언 후, var() 안에 사용자 정의 속성을 넣어 사용한다. :root { --first-color: #16f; --second-color: #ff7; } #firstParagraph { background-color: var(--first-color); color: var(--second-color); } CSS 스펙은 사용자 정의 속성 선언에서 거의 모든 문자열을 사용하는 것을 허용한다. CSS 속성에 대해 의미가 없을 수 있지만 JavaScript에서 액세스 할 수 있다. :root { --flex-theme: { border: 1px solid var(--theme-dark-blue); font-family: var(--theme-f..

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. Sass 내에서 일부는 /를 나누기 연산으로 처리하고, 다른 일부는 구분 기호로 처리한다. 사용자가 /의 의미를 구분하기 어렵고, 작업하기 어렵게 만든다. 나누기 대신 소수 곱하기 calc($val / 2) 대신 calc($val * 0.5)를 사용한다. => 소수의 값이 무한소수일 경우 대응이 어렵다. Sass 내장 함수 math.div() 사용하기 @use "sass:math"; 를 선언해서 내장 함수를 가져온다. * SassError: @use rules must be written before any other rules. =>..

font-size 속성은 폰트의 크기(대문자 “M”의 크기)를 지정한다. em em은 웹 브라우저에서 글꼴 사이즈를 지정하지 않았을 때의 기본값 웹 브라우저에서 1em = 16px rem CSS3에서 새로 등장한 rem = root em root 요소는 rem 단위는 요소에 지정된 글꼴 크기로부터 ~ 선택된 요소의 글꼴 크기를 상대적으로 결정한다. em vs rem em은 부모 요소에 상대적으로 글꼴 크기를 상속받는다. rem은 root 요소()에 상대적으로 글꼴 크기를 상속받는다. em em은 부모로부터 글꼴을 물려받기 때문에, 같은 값을 지니더라도 노드가 깊어지면 글꼴 크기가 무한히 작아진다. => 부모, 조상 노드 가운데 어떤 요소의 글꼴 크기를 변경하면 자식, 자손 요소 모두가 영향받는다. => ..

절대 단위 다른 것과 관련 없이 일반적으로 항상 동일한 크기 대부분 화면 출력이 아닌 인쇄에 사용될 때 유용하다. 보통 사용하는 유일한 값은 px cm 센티미터 1cm = 96px/2.54 mm 밀리미터 1mm = 1/10th of 1cm Q 4분의 1 밀리미터 1Q = 1/40th of 1cm in 인치 1in = 2.54cm = 96px pc Picas 1pc = 1/6th of 1in pt 포인트 1pt = 1/72th of 1in px 픽셀 1px = 1/96th of 1in 상대 단위 다른 요소(상위 요소의 글꼴 크기 또는 viewport 크기)와 관련 있다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 계획할 수 있다. em 요소의 글꼴 크기 ..

CSS Postprocessor(후처리기) SCSS로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환한다. 장점 모듈식 사용 필요한 플로그인만 포함하여 사용할 수 있다. 전체를 다 포함하지 않아도 되므로 속도가 빠르다. (해당 페이지에 필요한 모듈만 갖다쓸 수 있다는…) JavaScipt 기반 필요한 플러그인을 직접 개발할 수 있다. CSS 표준 문법 기반 CSS 작성을 위해 별도로 학습할 필요가 없다. 단점 (Sass에 비해) 강력한 문법을 제공하지 않는다. 필요한 플러그인을 직접 찾아서 조립해야 한다. 플러그인 지원 중단될 수 있다. 웹팩 사용 시 설정 // webpack.dev.js const path = require('path'); ..

:read-only vs readonly :read-only 가상 클래스 요소를 사용자가 변경, 컨트롤 할 수 없다. input, textarea 제외한 모든 요소에서 사용 가능 readonly 속성 요소를 사용자가 변경, 컨트롤 할 수 없다. input, textarea 에만 적용 가능 📌 input, textarea 에 readonly 속성이 있으면 :read-only 가상 클래스 사용이 가능하다. 📌 input[readonly] 를 사용해 readonly 속성 들어간 요소에만 css를 줄 수 있다. readonly vs disabled readonly 속성 input, textarea 에만 적용 가능 포커스 받을 수 있다. (Tab키 사용 가능) 서버로 값이 전달된다. disabled 속성 butt..

ruby-sass? libsass?? node-sass??? dart-sass???? sass-loader?????????? 무엇을 설치해야 하는지 모르겠어서 정리를 해봤다. Sass(SCSS)를 사용하기 위해 어떤 걸 설치할까? Sass(SCSS)는 Ruby 기반이다. (Ruby-sass) - Ruby on rails 설치 후 사용 Ruby 아닌 다른 환경에서 사용하려면, C/C++ 언어 기반의 Libsass 를 사용해야 한다. (Ruby 기반보다 컴파일이 빠른 장점이다.) Node 환경에서 사용하려면, Node-sass가 필요하다. Sass(SCSS) 파일을 로드하고, 컴파일 해주기 위해서 Webpack의 Loader인 Sass-loader와 함께 쓰면 된다. 그러나! 2020년부터 Libsass, ..