fe4902의 등록된 링크

 fe4902로 등록된 티스토리 포스트 수는 18건입니다.

[React] Create React App 이미지 경로 [내부링크]

CRA 4.0 버전부터 권장하는 asset 폴더의 위치가 public 폴더에서 src 폴더로 이동하였습니다. src 폴더 (권장) 설정 // tsconfig.json { "compilerOptions": { "baseUrl": "src", ... }, "include": [ "src" ] } 해당 설정 후 서버가 실행되어있었다면, 수정 후 재실행해야합니다. img background-image div { background-image: url("/images/img.jpg"); } public 폴더 img background-image

[CSS] iOS border-radius + overflow: hidden 이슈 [내부링크]

iOS에서 border-radius 와 overflow: hidden 속성이 같이 적용된 경우 제대로 동작하지 않는 이슈가 있습니다. 해당 이슈는 '쌓임 맥락(Stacking Context)' 과 관련된 이슈로 아래의 방법으로 해결할 수 있습니다. div { z-index: 0; /* OR */ isolation: isolate; /* OR */ -webkit-mask-image: -webkit-radial-gradient(white, black); ... } 해당 포스팅은 이 글을 바탕으로 작성했습니다.

[CSS] PC와 Mobile 구분 방법 [내부링크]

기본(Primary) 포인팅 장치를 고려한 방법 기본(Primary) 입력 메커니즘을 기준으로 기능을 지원합니다. @media (hover: none) and (pointer: coarse) { /* touch 가능 (스마트폰, 터치스크린) */ } @media (hover: hover) and (pointer: fine) { /* hover 가능 (마우스, 터치패드) */ } 보조 장치까지 고려하는 방법 다수의 입력 메커니즘을 가졌을때, '적어도 하나' 에서 해당 값을 만족하는 경우 기능을 지원합니다. @media (any-hover: none) { /* 호버링할 수 없거나 포인팅 입력 메커니즘이 없습니다 */ } @media (any-hover: hover) { /* 하나 이상의 사용 가능한 입력 메..

[CSS] input 태그 자동완성 사용시 스타일이 변경되는 이슈 [내부링크]

input 태그 자동완성 기능을 사용하면, 기존에 적용한 스타일이 변경됩니다. 이유는 Chrome 내부 스타일시트에는 아래의 에이전트 스타일이 적용되어 있기 때문입니다. background-color: rgb(232, 240, 254) !important; background-image: none !important; color: -internal-light-dark(black, white) !important; !important 로 선언이 되어있어 위에서 사용된 코드로는 수정이 불가능하고, 아래의 방법을 이용해서 수정할 수 있습니다. 자동완성 기능 해제 자동완성 기능이 필요하지않다면, 이 방법이 가장 간단하고 좋습니다. !important 사용 !important 를 사용하기 때문에, 다른 문제를 야..

[CSS] 이미지 흐림 현상 [내부링크]

이미지를 원래의 사이즈 혹은 사이즈의 배수에 해당하지 않는 사이즈로 넣지 않을 경우 이미지가 흐려보이는 경우가 많은데, 아래 속성들을 적용함으로써 이미지가 흐리게 나오는 현상을 많이 해소할 수 있습니다. img { /* 이미지 렌더링 방식 변경 */ image-rendering: -webkit-optimize-contrast; /* z축을 0으로 초기화, 입체감 삭제 */ transform: translateZ(0); /* 뒷면 숨기기, 입체감 삭제 */ backface-visibility: hidden; } 해당 포스팅은 이 글을 참고하여 작성했습니다.

[CSS] border-width가 변경될 때 레이아웃이 틀어지는 이슈 [내부링크]

border-width 가 변경될 때 레이아웃이 틀어지는 이슈가 있는데, 이를 해결하기 위해서 box-shadow 를 사용해서 border-width 가 늘어나는 것 처럼 보이게 하는 방법이 있습니다. 다른 방법도 있지만, 아래와 같은 이슈가 있어 사용을 권장하지 않습니다. outline 은 Safari에서 border-radius 가 적용되지 않고, 애니메이션 성능이 좋지 못하다는 이슈가 있습니다. pseudo-element 는 input 과 img 에서 적용되지 않으며, 다른 방법들에 비해서 코드량이 많다는 이슈가 있습니다. See the Pen border-width Change Animation by FE4902 (@fe4902) on CodePen.

[CSS] 미디어쿼리 새로운 문법 [내부링크]

기존 미디어쿼리 범위 지정 방법은 min-width, max-width 를 사용했었는데, 주요 문제점으로는 직관성이 떨어지고 아래와 같이 '같거나 작다'로 통용되기 때문에 '무조건 작다'를 표현하려면 원하는 숫자보다 작은 수를 사용하는 수 밖에 없었습니다. /* width

[CSS] 텍스트 세로 나열 [내부링크]

writing-mode 를 이용해서 텍스트를 세로로 나열할 수 있습니다. div { /* 가로 방향, 기본 값 */ writing-mode: horizontal-tb; /* 세로 방향, 왼쪽에서 오른쪽으로 */ writing-mode: vertical-lr; /* 세로 방향, 오른쪽에서 왼쪽으로 */ writing-mode: vertical-rl; } .en { /* 영문일 경우, 해당 속성을 추가해주지 않으면 자동으로 각도가 조절됩니다. */ text-orientation: upright; } See the Pen writing-mode by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다.

[CSS] :is()와 :where() [내부링크]

:is() 와 :where() 는 요소를 그룹화하는 기능적인 의사 클래스 선택자입니다. 두 선택자의 사용법은 같지만 명시도에 차이가 있습니다. :where() 은 명시도가 없습니다. :where() 은 매개변수로 전달된 선택자 목록의 모든 명시도를 무시합니다. :is() 는 가장 구체적인 선택자의 명시도를 따라갑니다. :is(a, div, #id) 의 명시도는 ID의 명시도인 100점입니다. /* 선택자 처음 */ :where(h1, h2, h3, h4, h5, h6) > b { color: hotpink; } /* 선택자 중간 */ article :is(header, footer) > p { color: gray; } /* 선택자 끝 */ .dark-theme :where(button, a) { col..

[HTML] 접근성 좋은 모달 만들기 [내부링크]

dialog 요소를 이용해서 접근성 좋은 대화 상자를 간단하게 만들 수 있습니다. 대화상자를 닫거나 값을 전송하기 위한 모든 키보드 이벤트와 모바일 OS의 네이티브 이벤트가 구현되어 있습니다. 네이티브 이벤트가 구현되어있다는 것은 iOS에서 VoiceOver로 두 손가락 문지르기를 통해 대화상자를 닫거나 하는 행위가 가능함을 말합니다. 모달로 열린 대화상자는 닫기 전까지는 대화상자 내부에서만 탐색이 가능합니다. 키보드 초점뿐만 아니라, 스크린리더의 가상커서 또한 마찬가지입니다. 모달로 열린 대화상자는 닫기버튼 외에 ESC 키를 눌러도 닫을 수 있습니다. 기본 속성 dialog 요소는 기본적으로 숨겨져 있으며, 표시여부는 open 속성에 따라 달라집니다. /* 브라우저들은 유저 에이전트 스타일에 다음의 C..

[HTML] 모바일 크롬 브라우저 Toolbar 색상 변경 [내부링크]

아래 태그를 선언하고 content 에 원하는 색상을 넣어주는 것으로 크롬 기반 브라우저 툴바 색상을 변경할 수 있습니다. 해당 포스팅은 이 글을 참고하여 작성했습니다.

[CSS] 블렌드 모드 [내부링크]

mix-blend-mode 속성을 사용하여 포토샵의 블렌딩 모드와 비슷한 효과를 낼 수 있습니다. div { mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: hard-light; mix-blend-mode: soft-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; ..

[CSS] 체크박스 [내부링크]

색상 커스텀 input { accent-color: #fe4902; } See the Pen 체크박스 - 1 by FE4902 (@fe4902) on CodePen. 전체 커스텀 See the Pen 체크박스 - 2 by FE4902 (@fe4902) on CodePen. 토글 스위치 See the Pen 체크박스 - 3 by FE4902 (@fe4902) on CodePen. 해당 포스팅은 이 글을 참고하여 작성했습니다.

[CSS] 스크롤 체이닝 [내부링크]

overscroll-behavior 을 사용해 스크롤 체이닝을 제어할 수 있습니다. div { /* 스크롤 체이닝이 발생합니다. */ overscroll-behavior: auto; /* 인접한 스크롤 영역에서 스크롤 체이닝이 발생하지 않습니다. */ overscroll-behavior: contain; /* 모든 영역에서 스크롤 체이닝이 발생하지 않습니다. */ overscroll-behavior: none; } See the Pen 스크롤 체이닝 by FE4902 (@fe4902) on CodePen.

[CSS] 부드러운 스크롤 [내부링크]

scroll-behavior: smooth 속성을 사용해 스크롤을 부드럽게 이동시킬 수 있습니다. html { scroll-behavior: smooth; } See the Pen Untitled by FE4902 (@fe4902) on CodePen.

[CSS] iOS에서 height: 100vh 사용시 스크롤이 생기는 이슈 [내부링크]

iOS에서 상단의 노치와 url바 혹은 하단의 툴바로 인해 화면의 크기를 실제 보여지는 innerHeight 보다 크게 잡습니다. 그래서 document 의 height 를 100vh 로 잡아 작성하더라도 실제 iOS에서는 스크롤바가 생깁니다. 해당 이슈는 아래의 방법들로 해결할 수 있습니다. dvh 사용 dvh 는 현재 viewport 높이를 나타내는 동적인 값으로, 만약 주소표시줄이 축소된 상태에서 스크롤을 통해 주소표시줄이 확장되면 dvh 의 값도 업데이트됩니다. body { height: 100dvh; } -webkit-fill-available 사용 -webkit-fill-available 이 속성은 지원하지 않는 브라우저가 있기 때문에 iOS 환경에서만 적용되도록 @supports (-web..

[CSS] 비율을 유지하는 반응형 박스 [내부링크]

padding을 사용하는 방법 .container { /* height값을 지정해주지 않거나 0으로 지정해주어야한다. */ width: 200px; } .box { /* 부모height가 0인 상태에서 자식에서 padding-top을 선언하면, 바로 이 값이 높이가 되게 된다. */ padding-top: 50%; /* calc()를 사용할 수도 있다 */ padding-top: calc(100% * 0.5); /* 16:9 적용 */ padding-top: calc(100% / 16 * 9); } 부모의 width가 padding의 기준이 되기 때문에 부모인 container 엘리먼트 요소가 필요합니다. aspect-ratio를 사용하는 방법 .box { /* 16:9 적용 */ aspect-ratio..

[CSS] 말줄임표 [내부링크]

한 줄 말줄임표 div { /* 텍스트를 한 줄로 표시 */ white-space: nowrap; /* 박스의 크기를 넘어가는 컨텐츠 숨기기 */ overflow: hidden; /* 텍스트가 넘어간다면 말줄임표 표시 */ text-overflow: ellipsis; } 해당 방법은 block 요소에서만 사용 가능합니다. 여러 줄 말줄임표 div { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } webkit 엔진을 사용하지 않는 브라우저에서는 원하는 동작이 나오지 않을 수 있습니다. 말줄임표 뒤에 컨텐츠 두기 See the Pen 말줄임표..