슬기로운 개발노트

user-scalable=yes 만 적용시 Android 웹브라우저 & IOS 네이버 브라우저에서 확대/축소 기능이 불가함. + maximum-scale=2.0 (최대 10.0배 까지 가능) + minimum-scale=1.0 적용 시 Android 웹브라우저 & IOS 네이버 브라우저 에서 확대/축소 기능이 가능함.

SCSS 에서 button component 만들 때 사용한 것 정리!! @each $key변수, $value변수 in 데이터 { 실행문 } # 개발환경 vue.js / vuetify / scss e.g. // button.vue button 100 button 50 button 10 // variable.scss $main—100: rgb(12, 31, 41); $main—50: rgb(14, 14, 31); $main—10: rgb(143, 214, 31); $main—: ( ‘100’: $main—100, ‘50’: $main—50, ‘10’: $main—10 ) // buttons.scss .v-btn { &.c-button { @each $name, $value in $main— { &.main..

프로젝트를 하면서 웹폰트 설정 관련해서 이전엔 안 써본 font 속성에 대하여 정리! - 웹 폰트 최적화 방법 : 텍스트가 항상 보이게 하기 * 웹폰트 적용시 텍스트 번쩍임 현상 발생 1) FOIT (Invisible) (Firefox, Chrome) 웹폰트가 적용되지 않은 “텍스트”가 보이지 않는 상태에서 폰트가 바뀌면 텍스트 번쩍임 현상 발생. 2) FOUT (Unstyled) (Internet Explorer) 웹폰트가 적용되지 않은 “폴백 폰트 상태”에서 폰트가 바뀌면서 텍스트 번쩍임 현상이 일어나는 현상 발생. * CSS의 font-display 속성을 사용하면 외부 라이브러리를 사용하지 않고도 웹폰트의 로딩 상태에 따른 동작 설정이 가능함. (현, IE 미지원.) font-display : a..

- 웹표준 : 브라우저 종류에 상관없이 표준화된 언어를 사용하여 동일한 결과물을 보여주는 것. - 웹접근성 : 장애 여부, 신체적 차이에 상관없이 누구나 웹페이지에 접근가능하며 이용할 수 있는 하는 것. - 웹호환성 : 어떤 브라우저로 접근하던지 사용자에게 유사한 화면으로 동일한 정보에 접근 가능하도록 하는 것. (브라우저마다 코드표현방식이 다르기 때문에 100% 동일한 화면 구현은 불가함.)

mediaquery 에 대하여 찾아보다가 이전까지는 사용하지 않았던 방식을 발견해서 메모메모! header main head 안에 link 태그를 보면 "media="(max-width: 400px)" 이라고 적힌 부분이 보인다. (최대 가로넓이 기준 400px 까지 적용) 예전 프로젝트에서 전체페이지는 적응형이나, main 페이지만 반응형 작업을 요청해서 css 파일 중복으로 애먹은 적이 있었는데, 그 때 이방식을 사용한다면 얼마나 유용했을까! 이 외에도 프린트 할때 색상을 지정하거나 등의 다양한 기능이 있다. 나름 유용할듯! http://tcpschool.com/html-tag-attrs/link-media

transform 의 속성은 크게 2가지로 나눠진다. 1) 2D - 위치이동 : transform(가로, 세로) - 회전 : rotate(각도) - 크기 : scalc(숫자) - 비틀기 : skew(각도) 2) 3D - 3D 공간배치 : transform-style: preserve-3d; - 위치이동 : transform3D(가로, 세로, z축) - 회전 : rotateZ(z축) - 크기 : scaleZ(배수) 참조를 통해 예제 확인할 것. 참조 natsgun.tistory.com/14

animation = css style + @keyframes (애니메이션의 중간상태를 나타내는 것.) keyframes를 통해서 부드러운 렌더링 효과 구현이 가능하다. animation은 단축형과 속기형으로 사용할 수 있다. * 단축형 1) animation-name : animation의 중간상태를 지정하기 위한 이름 정의 keyframes의 이름 = animation의 이름 2) animation-duration : animation을 한 번 재생하는데 걸리는 시간을 설정. 3) animation-delay : animation 시작을 지연할 시간을 설정. 4) animation-direction : animation의 방향을 결정. 속성 예시) normal / alternate / reverse ..

img 태그를 영역안에 맞추는 방식으로, 1. verticalCrop, horizonCrop class 만 만들어서 사용하다보니 다른 방식으로 만드는 방법에 대한 질문에 대답을 못했다..! 😖 .thumbnail{ position: relative; overflow: hidden; } /* 세로이미지 꽉차게 적용. */ .verticalCrop{ /* 고정 가로,세로값 지정 */ width: 150px; height: 80px; } /* 가로이미지 꽉차게 적용. */ .horizonCrop{ /* 고정 가로,세로값 지정 */ width: 80px; height: 150px; } .thumbnail img{ position: absolute; top: 50%; left: 50%; transform: tra..

자식요소에 position: absolute; 을 준 경우 위치값을 잡기 위해서만 종종 쓰였으나, 다른 용도로 쓰이는 경우도 정리해보자 ✍️ 1. position: absolute에 대한 기준점이 필요할 경우 2. z-index 값을 인식시키고자 할 경우 3. 요소의 위치를 유지한채로 top, left, bottom, left 값을 주고자 할 경우 (static의 원래위치로부터)

# 그리드의 기본적인 형태 정의 grid-template-columns grid-template-rows # repeat 함수 : 반복되는 값을 자동으로 처리할 수 있는 함수 repeat(반복횟수, 반복값) ex. repeat(3, 1fr) = 1fr 1fr 1fr # minmax 함수 : 최솟값, 최댓값을 지정할 수 있는 함수 ex. minmax(100px, auto) ➝ 최소한 100px, 최대는 자동으로 늘어나게 처리한다. 즉, 아무리 컨텐츠의 양이 적어도 최소한 100px의 값을 확보하며 컨텐츠 양이 넘쳐 100px을 넘어가면 알아서 영역이 늘어나게 된다. # auto-fill, auto-fit : column의 갯수를 미리 정하지않고 설정된 너비가 허용하는 한 최대한 셀을 채운다. * 차이점 :..

이전 근무지에서 ie9까지 맞춰야하기 때문에 이제껏 써보지 못한 (ㅠ.ㅠ) CSS3의 Flex에 대하여 내가 이해하기 쉽도록 정리해보자! 먼저 큰 틀에서는 부모/자식으로 나누어본다. 부모 : .container => flex container 자식 : .item => flex item 부모속성 flex-direction : 배치 방향 설정 flex-wrap : 줄바꿈 처리 설정 flex-flow : flex-direction + flex-wrap justify-centent : 가로축 방향 정렬 align-items : 세로축 방향 정렬 (전체 아이템에 대하여) align-content : 여러 행 정렬 1) flex-direction : 배치 방향 설정 .container{ flex-direction:..