빵 입니다.

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

📌 HTTP 트랜잭션은 요청 명령과 응답 결과로 구성되어 있다. 📌 웹 페이지는 여러 객체로 이루어질 수 있다. 애플리케이션은 보통 하나의 작업을 수행하기 위해 여러 HTTP 트랜잭션을 수행한다. HTML 레이아웃, 외부 리소스 등을 가져오기 위해 추가로 HTTP 트랜잭션들을 수행한다. 🌀HTTP 요청 메시지 클라이언트에서 서버로 보낸다. 명령과 URI를 포함한다. 📌 메서드 모든 HTTP 요청 메시지는 한 개의 메서드를 갖는다. 여러 가지 종류의 요청 명령을 지원하는 HTTP 메서드가 있다. 📌 요청 메시지 예시 요청 시작줄(명령) GET /test/hi.txt HTTP/1.0 요청 헤더 Accept: text/* Accept-Language: en, fr 요청 본문 없음 🌀HTTP 응답 메시지 서버에..

인터넷 상에서 수천 가지 데이터 타입을 다루기 위해 MIME 타입이라는 데이터 포맷 라벨을 붙인다. MIME(Multipurpose Internet Mail Extensions, 다목적 인터넷 메일 확장) 원래 각기 다른 전자메일 시스템 사이에서 메시지가 오갈 때 겪는 문제점을 해결하기 위해 설계되었다. MIME은 이메일 상에서 아주 잘 작동했기에, HTTP에서도 멀티미디어 콘텐츠를 기술하고 라벨을 붙이기 위해 채택되었다. MIME 타입은 슬래시(/)를 중간에 두고, 주 타입(primary object type)과 부 타입(specific subtype)으로 이루어진문자열 라벨이다. HTML로 작성된 텍스트 문서는 text/html 라벨이 붙는다. JPEG 이미지는 image/jpeg 라벨이 붙는다. G..

canvas 크기 조절 방법 HTML 요소의 width, height 속성 값을 스크립트로 조정한다. 👉🏻 canvas가 가진 픽셀 수 자체를 바꾸는 방법 CSS transform의 sclale 값을 조정한다. 📌 canvas를 그릴 때 숫자 값을 정수 처리해 줘야 그릴 때 성능이 더 좋아진다.

Tabindex는 HTML 속성이지만 카테고리를 웹 접근성으로 선택했다. 제대로 사용한다면 접근성에서 유용하게 쓰이기도 하고, 잘못 사용하면 접근성에 위배되기도 때문이다. Tabindex 속성을 사용하는 것은 문서의 자연스러운 흐름 방해하고, 웹 접근성에 위배되는 일이며 HTML을 깔끔하게 작업하지 못한 것을 증빙하는 일이라고 생각했었다. 또한, 과거엔 비표준 요소라 여겨졌었기 때문에 사용을 더욱 꺼렸었다. 그러나 요즘 웹상의 소스를 가져와 사용하면 tabindex를 이용해 초점을 맞추는 것을 심심찮게 볼 수 있다. 트렌드에 맞게 잘 사용하고 싶어서 tabindex를 파보았다. 가장 먼저 공식 문서의 Tabindex에 대한 설명을 읽어 보았다. MDN 한국어 버전과 MDN 영문 버전은 내용의 퀄리티 차..

회사에서 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..

Splash Screen (스플래시 스크린) 앱 실행 시 가장 먼저 뜨는 화면 앱 실행 시 로딩 시간의 공백을 덜기 위해 배치한다. 앱의 아이덴티티를 보여주기도 하고, 간략한 소개나 광고를 진행하기도 한다. Coach Mark (코치 마크) 앱을 처음 사용하는 사용들에게만 보이는 화면 반투명한 화면 위에 앱의 사용 방법을 간략하게 설명해 준다. 초기 애플리케이션을 실행할 때만 볼 수 있도록 설계된다. Walkthrough (워크스루) 코치 마크와 유사하지만, 좀 더 자세한 매뉴얼이나 상세 도움말 등을 단계 별로 제공하는 화면 제품을 처음 사용하는 온보딩(Onboading) 과정에서 나타난다. 앱 내의 콘텐츠에 대한 홍보도 가능하다. 단계별 페이지이기 때문에 건너뛰기 또는 홈 바로 가기 버튼을 제공하는 것..

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. =>..