profile
이것저것 정리하는 공간
태그 목록
전체보기 (86)비동기(3)JavaScript(3)js(3)웹 접근성(3)자바스크립트(3)git(3)scss(3)computed(2)웹폰트(2)session(2)웹접근성(2)Cache(2)watch(2)http(2)cookie(2)resposive web(1)뷰 인스턴스(1)SCSS 변수(1)웹표준(1)static(1)scss mixin(1)WAI-ARIA(1)animation(1)v-on(1)animation css(1)라이트하우스(1)computed&watch(1)크로스브라우징(1)positioning(1)웹접근성지침(1)모바일 대응(1)object(1)cors(1)HTML attribute(1)key-value(1)sticky(1)깃 서브트리(1)promise(1)동기(1)형 변환(1)absolute(1)scale(1)unicode-range(1)API(1)object-position(1)instance(1)caching(1)relative(1)가상클래스(1)directive(1)이벤트 핸들링(1)품질개선(1)css blend-mode(1)selector css(1)vue lifecycle(1)column-width(1)ObjectMethods(1)flex box(1)css 변수(1)font CSS(1)object-fit(1)transform(1)세션(1)쿠키(1)브라우저 함수(1)반응형(1)responsive(1)웹호환성(1)렌더링속도개선(1)lifecycle(1)선택자css(1)접근제어(1)모듈(1)SSH key(1)iterator(1)exports/require(1)vue(1)애니메이션(1)export/import(1)column-layout(1)FetchAPI(1)검색엔진(1)Module(1)블렌드모드(1)다단 레이아웃(1)반응형 웹(1)img 스타일(1)at rules 규칙(1)http와https차이(1)스크린리더(1)foit(1)라이프사이클(1)교차 출처 리소스 공유(1)at rules(1)await(1)ajax(1)접근성 디자인(1)scss map(1)px(1)for ~ in(1)Statement(1)counter(1)blend-mode css(1)async(1)form binding(1)행간css(1)for(1)애니메이션css(1)라이프사이클 훅(1)Flex(1)attribute(1)Flexbox(1)transtion css(1)COLUMN(1)selector(1)사스(1)lighthouse(1)폰트렌더링(1)ssh(1)반복문(1)뷰 디렉티브(1)https(1)json(1)비동기처리(1)font family(1)fout(1)비동기수행(1)동기와비동기(1)css 효과(1)캐시(1)filter(1)Web Accessibility(1)img style(1)foreach(1)counter-increment(1)base64(1)Built-inAPI(1)웹 폰트(1)v model(1)속성(1)subtree(1)submodule(1)filter css(1)confirm(1)css 컴파일러(1)column-count(1)scss 폴더구조(1)this(1)setInterval(1)setTimeout(1)pseudo class(1)cross browsing(1)CSS(1)Sass(1)alert(1)html속성(1)의사클래스(1)웹품질개선(1)css선택자(1)line height(1)base64인코딩(1)폰트 CSS(1)웹 접근성 디자인(1)display: flex;(1)git subtree(1)screenreader(1)HTTP프로토콜(1)transition(1)트랜지션(1)rotate(1)blend-mode(1)web standars(1)웹최적화(1)Fetch(1)rem(1)translate(1)skew()(1)접근성 퍼블리싱(1)css filter(1)font-face(1)검색엔진최적화(1)seo(1)pixel(1)css 지정(1)css transform(1)httpProtocol(1)자료형(1)웹 접근성 개발(1)Lifecycle Hooks(1)호출스케줄링(1)columns(1)propmt(1)accessibility(1)pseudo element(1)https프로토콜(1)em(1)웹 표준(1)서브트리(1)브라우저동작과정(1)layout css(1)counter-reset(1)for ~ of(1)

MY DEVICEBlogBlog2디바이스에서 컬러를 표현할 수 있는, 물리적인 수치를 가진 작은 점어떤 그리드에서 특정한 위치를 차지하는, 컬러의 정보를 담은 면적.어떠한 물리적 크기를 정의하거나 가지고 있지 않다.CSS 스펙이 정의한 픽셀 단위.특정한 물리적 크기를

2023년 4월 5일
·
0개의 댓글
·

Git Subtree

Git Subtree는 상위 저장소에 파일을 직접 추가하고 트래킹한다. 자연히 서브트리의 파일 및 변경사항도 상위 저장소에 기록된다. 그리고 서브트리의 원격에 있는 소스와 상위 저장소에 있는 소스가 서로 달라도 subtree merge 기능을 사용해 양쪽의 변경사항을

2023년 2월 20일
·
0개의 댓글
·

SCSS - 페이지 테마화

💡 CHECK사전에 테마를 몇 가지 지정해두고 사용자가 선택하게 하는지?테마 별로 컬러 지정 필요 (기본, 다크테마, 라이트테마 등등)최상단 html에 클래스를 부여하면, 테마에 맞춰 일괄 변경됨사용자가 컬러 하나를 선택하면 그 컬러에 따라 채도/명도/밝기 등 단위로

2023년 2월 20일
·
0개의 댓글
·

SCSS - 폴더구조

연구소 팀의 모든 프로젝트는 IRIS-Design-Core 레파지토리를 Git Submodule/Subtree로 가져와서 style-core 폴더 하위에 담아 퍼블리싱 작업을 하고 있다.이 IDC 에셋을 제외하고 각각 프로젝트에서 사용하는 에셋(이미지, 아이콘, 스타일

2023년 2월 20일
·
0개의 댓글
·

SCSS

문서의 최상위에서 바로 작성한 변수어떤 규칙도 포함되지 않고, 문서 어디서나 사용이 가능class | id가 선언된 블록 코드 { } 내에서만 유효 범위를 가짐정의한 블록의 상위 블록에서 절대사용할 수 없음!global 플래그를 사용하면 전역 변수로 사용할 수 있다.\

2023년 2월 20일
·
0개의 댓글
·

blend-mode

IE 지원 안함 blend-mode 자료형은 요소가 겹칠 경우 색상이 어떻게 나타나야 하는지 정의하는데, 즉 배경의 혼합 상태를 정의한다.blend-mode는 크게 background-blend-mode 와 mix-blend-mode 로 설정할 수 있다.backgro

2023년 2월 20일
·
0개의 댓글
·

object-fit & object-position

IE 지원 안함<img> 나 <video>, <svg>, <object> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정한다.프로필 이미지, 고정된 크기의 썸네일을 출력하는 경우에 제각각의 크기를 가진 콘텐츠

2023년 2월 20일
·
0개의 댓글
·

Filter

IE 지원 안함filter 속성은 흐림 효과나 색상 변형, 대비 조절 등 그래픽 효과를 요소에 적용한다. 보통 filter는 이미지, 배경, 테두리 렌더링을 조정하는데 쓰인다.img, svg, div 등에 적용할 수 있다.svg 필터를 가리키는 URI를 받는다.주어진

2023년 2월 20일
·
0개의 댓글
·

Base64

Reference파일에 저장된 정보의 형태나 형식을 데이터표준화, 보안, 처리 속도 향상, 저장 공간 절약 등을 위해서 다른 형태로 변환하는 처리, 처리 방식을 발한다.이메일 / 동영상 / 이미지 영역에서 많이 사용된다.Base64를 말 그대로 직역하면 64진법 이라는

2023년 2월 20일
·
0개의 댓글
·

형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환이 된다. 이런 과정을 “형 변환” 이라고 한다. 이 외에 전달 받은 값을 의도를 갖고 원하는 타입으로 변환 (명시적 변환)해 주는 경우도 형 변환이라고 할 수 있다.문자형의 값이 필요할 때 문자형으로 형

2023년 2월 16일
·
0개의 댓글
·

브라우저 함수

브라우저 환경에서 사용되는 최소한의 사용자 인터페이스 기능. 브라우저에서 제공하는 함수 메세지가 있는 작은 모달 창을 띄울 수 있는 함수다.텍스트 메세지와 입력 필드, 확인 및 취소 버튼이 있는 모달 창을 띄워주는 함수로 두 개의 인수를 받는다.title - 사용자에게

2023년 2월 16일
·
0개의 댓글
·

자료형

‘자바스크립트에서 값’은 항상, 문자열이나 숫자열 같은 특정한 자료형에 속한다.자바스크립트에는 여덟 가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있고, 따라서 변수는 어떤 순간에는 문자열일 수 있고 어떤 순간에는 숫자가 될 수 있

2023년 2월 16일
·
0개의 댓글
·

변수와 상수

어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다.지시자( use strict) 이 지시자가 스크립트 회상단에 오면 스크립트 전체가 ‘모던한’ 방식으로 동작한다.use strict 는 반드시 스크립트 최상단에 있어야 한

2023년 2월 16일
·
0개의 댓글
·

Animation

애니메이션은 애니메이션을 나타내는 CSS 스타일과 sequence(분기)를 나타내는 복수의 키프레임(@keyframes)들로 이루어진다.transition 프로퍼티는 요소 프로퍼티 값이 다른 값으로 변화할 때 주로 사용하며, 요소의 로드와 함께 자동으로 동작되지 않는다

2023년 2월 14일
·
0개의 댓글
·

Transition

요소에 지정된 속성을 변환하고자 할 때 사용하는 속성속성 값으로 특정 CSS 속성을 지정하면 해당 속성만 변환되고, all을 지정할 경우 요소에 지정된 모든 속성이 변환된다. 2개 이상의 속성을 지정할 경우 콤마(,)로 구분하면 여러 개를 지정할 수 있다.변환이 진행되

2023년 2월 14일
·
0개의 댓글
·

Transform

Transform(변형) | 웹접근성과 웹표준(https://seulbinim.github.io/WSA/transform.html요소 박스를 변형하는 속성. 2차원 및 3차원 변형이 가능하며 변형 형태별로 함수 타입의 속성 값을 지정한다.HTML 요소 박스를

2023년 2월 14일
·
0개의 댓글
·

선택자 (Selector)

전체 요소를 대상으로 함인접 선택자, 앞의 요소 바로 뒤에 있는 요소만 적용X 바로 하위 직계 Y만을 적용인접 선택자, X 아래에 있는 모든 Y 요소를 적용속성 선택자(Attribute selector), title 어트리뷰트 값을 갖는 요소만 적용속성 선택자(Attr

2023년 2월 14일
·
0개의 댓글
·

숫자 단위 - Rem | Px | Em

픽셀 단위는 CSS의 가장 기본적인 단위이다. 픽셀 단위로 값을 입력하는 것은, 내가 원하는 값을 정확하게 이 값이라고 절댓값으로 단호하게 선언하는 것이다. 1px은 사용자 디스플레이 기기의 논리적 해상도 1pt에 대응하며, 픽셀 단위로 지정한 크기는 나중에 크기를 변

2023년 2월 14일
·
0개의 댓글
·

웹 폰트 렌더링 방식

웹 페이지가 브라우저에서 렌더링이 될 때 위와 같은 흐름으로 보면 된다. CSSOM을 빌드하는 과정에서 웹 폰트 링크를 다운로드 하기 시작하는데, 이 때 웹 폰트 파일처럼 외부 링크로 연결된 파일이 다운로드가 완료되지 않았으면, 브라우저는 해당 파일을 사용하는 콘

2023년 2월 14일
·
0개의 댓글
·

폰트 사용

@font-face 를 사용해서 웹 페이지의 텍스트에 온라인 폰트 (online fonts)를 적용할 수 있다. @font-face를 사용해서 디자이너가 원하는 폰트를 사용할 수 있게 함으로써, 컴퓨터에 설치된 폰트로만 사용해야 했던 제약이 없어지게 되었다!아래 예제에

2023년 2월 14일
·
0개의 댓글
·