[Notiflix / CSS] 라이브러리 스타일 커스텀하기

중간발표까지 주요 기능들을 구현하기위해 토스트 알림은 라이브러리를 사용하기로 했다.여러가지 후보들을 두고 디자이너님과도 상의를 거쳤고, 빠른 구현이 목적이니만큼 커스텀에 공을 들이지 않아도 디자인 요구사항과 가장 유사한 Notiflix를 선택하게 되었다. https://notiflix.github.io/notify Notify | NotiflixNotiflix Notify module can be used to send non-blocking alerts/notifications. This module includes 4 types of notifications: "Success", "Failure", "Warning", and "Info".notiflix.github.io 기존에 react-tostif..

• format_list_bulleted HTML + CSS
• · 2024. 11. 3.
• textsms

[Tailwind] tailwind 기본 설정하기

1. 설치yarn add -D tailwindcss postcss autoprefixernpx tailwindcss init -p 2. tailwind 경로 지정 (tailwind.config.js)/** @type {import('tailwindcss').Config} */export default { content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"], theme: { extend: {}, }, plugins: [],}; 3. index.css 수정@tailwind base;@tailwind components;@tailwind utilities;

• format_list_bulleted HTML + CSS
• · 2024. 9. 19.
• textsms

[Tailwind] 부모 요소가 hover 상태일 때 자식 요소 스타일 지정하기 (group)

지난번 팀프로젝트에서 특정 경로로 이동하는 버튼들을 모두 useNavigate()를 이용해 만들었는데, 시맨틱한 코드를 고려하기 위해서는 Link 태그를 더 활용해보는 것을 추천받았다.경로 이동을 유도하는 버튼들은 Link로 처리했는데 hover 이벤트를 주려니 문제가 생겼다! 문제상황이렇게 Link 태그의 영역이 아니면서, 부모요소인 div 태그의 영역에 hover되면 동시에 hover 스타일 속성이 적용되지 않는 현상이 있었다. Link 태그의 width, height를 full(100%)로 설정해줘도 되지만, 경우에따라 이와 같은 구조이지만 크기는 부모와 달라야하는 상황이 있을 것 같아 좀 더 알아보았다. 해결tailwind에서 hover, focus 등의 상태를 그룹지어주기위해 group을 사용할..

• format_list_bulleted HTML + CSS
• · 2024. 9. 10.
• textsms

[CSS] Safari z-index

개인프로젝트 진행 중 사파리에서 z-index를 설정해둔 요소가 생각대로 보이지 않는 것을 발견했다! css animation을 이용한 물결치는 효과가 타이틀을 가리지 않게 하기위해 z-index를 적용해주었는데, safari는 그대로 가려진다😶‍🌫️  시도이 외에도 폰트사이즈, 물결 애니메이션의 위치가 다르게 나타나는 것은 과제 해설 영상에서 소개해주신 reset.css를 적용해 해결했지만 위 현상은 해결되지 않았다.혹시 글자에만 인덱스를 적용한 것이 문젠가 싶어서 wave에도 각각 인덱스를 줘봤지만 해결되지 않았다.검색해보니 safari의 z-index 문제는 꽤 흔하게 일어나는 문제인 것 같다.  원인safari가 다른 브라우저와 렌더링 알고리즘이 달라 발생하는 문제다. 특히 두개 이상의 요소에..

• format_list_bulleted HTML + CSS
• · 2024. 7. 30.
• textsms

[JS / jQuery / CSS] 다양한 방법으로 자동스크롤 구현하기 (원페이지 스크롤)

미니프로젝트를 진행하면서 첫 접속시 보이는 영역 → 멤버 소개 카드가 있는 영역으로 사용자가 끝까지 스크롤을 내리지 않아도 자동으로 스크롤이 내려갈 수 있도록 기능을 구현했다. 우선 처음에 기획한 내용은 다음과 같았다.버튼을 클릭했을 때 멤버 소개 카드가 있는 영역으로 자동 이동느림-빨라짐-느려짐 속도가 변하며 자연스럽게 출발/도착한다.window.scrollTo()프로젝트에서 사용한 방법이다. behaviour: smooth 속성을 지정하여 부드럽게 스크롤 이동이 가능하지만 scrollTo() 만으로는 속도조절을 할 수 없다고 하여 requestAnimationFrame()을 이용해 다음 프레임의 스크롤 위치를 계산하고 scrollTo로 이동시키는 방법을 사용했다. 시간의 흐름에 따른 스크롤 위치를 지..

• format_list_bulleted HTML + CSS
• · 2024. 7. 22.
• textsms

[CSS] 화면 크기에 따라 폰트사이즈 조정하기

팀프로젝트 중.. 다른 조원분의 화면으로 작업물을 보며 논의하다가 내가 만든 타이틀 속 글자들이 섞이는 걸 발견했다.팀원분이 반응형웹 폰트 설정을 찾아보라고 팁을 주셔서 빠르게 적용할 수 있었다!  미디어쿼리다양한 디바이스의 뷰포트에 대응하기 위해 사용할 수 있다.@media 키워드로 시작하며, 조건에 해당하는 경우에 적용할 스타일을 지정한다.@media (조건) { // 스타일}생각보다 간단하게 설정할 수 있었다. @media screen and (max-width: 1800px) { .title p { font-size: 5rem; }}@media screen and (max-width: 1200px) { .title p { font-size: 3rem; height: 5rem;..

• format_list_bulleted HTML + CSS
• · 2024. 7. 17.
• textsms