CSS20 CSS - z-index 적용 안될때 (Why your z-index isn't working) (오랜만의 포스팅) z-index 는 나에게 너무 심플하게 다가왔다. 숫자가 높을수록 화면 상단에 div 등의 엘레멘트를 고정해주는 편리한 녀석😏 하지만 심플할수록 적용이 안되는 일이 빈번했다. 😑 이유를 파악도 못한 채 나는 css 여기저기 z-index 를 랜덤하게 넣었다 빼기를 반복하였고 어느날 정확하게 왜 안되는지 궁금해졌다. z-index 가 적용되지 않는 이슈를 해결해줄 강려크한 내용을 아래 블로그에서 참고하여 내가 이해해본 방식으로 정리해 보았다. Why your z-index isn't working (왜 나의 쥍인덱스는 안먹히는가) 1. Elements in the same stacking context will display in order of appearance, with latte.. 2022. 4. 4. React(58) - 화살표 회전 애니메이션 만들기 새발자는 리액트로 드롭박스를 만드는 중이다. 전체보기를 클릭하면 아래에 촤라락 하위메뉴가 펼쳐진다. 애니메이션을 추가하여 아주 자연스럽게 화살표를 뱅그르르 회전시켜보자. 결과화면 미리보기 [ 전체 보기 ] 버튼 옆에 달린 화살표의 방향 클릭할 때마다 바뀐다. 이 때 회전 애니메이션을 추가해볼 것이다. React(58) - 화살표 회전 애니메이션 만들기 useState 의 상태값은 스위치 역할을 한다. 클릭할 때마다 메뉴를 펴고 접으면서 화살표 방향이 달라질 것이다. 접힌 상태이기 때문에 기본값은 false 로 두자. // useState 로 스위치 역할을 할 상태값 변수를 선언해준다. 기본값은 false const [showCate, setShowCate] = useState(false); HTML on.. 2022. 2. 3. Styled-components(4) 배열로 된 div를 2열로 나열하기 배열로 된 데이터를 map()를 이용해 동적으로 가져오면, div가 한 영역 안에 길게 나열된다. 하지만 테이블처럼 2열로 레이아웃해야한다면? (한시간 정도 구글링으로 뒤지면서 어려운 길로 빠지려다 가까스로 구원받았다... 흑흑) 자, 그럼 2줄로 나누러 가보자. (딱 2줄의 코드면 해결되더라 ... 허무쓰) 결과화면 미리보기 매핑된 데이터라 로 영역을 나눌 수 없는 상태에서 column을 2줄로 나누어야 한다. Styled-components(4) 배열로 된 div를 2열로 나열하기 사실 정말 심플하다. 1열 만큼의 width 를 잡아 고정시키고, flex-wrap 속성을 사용하는 것이다. {items.map(item => item)} // 매핑한 데이터 가져왔다고 가정하고 const DIV_Box =.. 2022. 1. 17. CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 버튼 위에 마우스를 올려놓으면(hover) 밑줄이 가운데서 좌우가 양옆으로 펼쳐지는 라인 애니메이션을 구현하고자 한다. 결과화면 미리보기 프로필 버튼 위에 마우스 호버를 하면 밑줄이 좌우가 양옆으로 펼쳐지는 애니메이션이 생긴다. CSS - 가운데서 좌우로 펼쳐지는 라인 애니메이션 HTML 프로필 CSS .spread-underline { color: #2e3248; display: inline-block; padding: 15px 0; position: relative; text-decoration: none; } .spread-underline::after { background: none repeat scroll 0 0 transparent; background: #2e3248; bottom: 0; .. 2021. 11. 5. CSS - 테두리가 있는 툴팁(말풍선) 만들기 요즘 새발자는 CSS 를 열심히 연마하고 있다. 오늘은 테두리가 있는 툴팁을 만들어 볼 것이다. 테두리가 없는 툴팁은 비교적 만들기 쉬운 편인데, 테두리가 있는 툴팁은 조금 까다로웠다. 그래서 잊지 않도록 기록을 남겨본다. CSS - 테두리가 있는 툴팁(말풍선) 만들기 결과화면 미리보기 하늘색 바탕에 파란색 테두리가 있는 툴팁이 완성되었다. HTML 새발자는 오늘도 뚠뚠.. 모두들 화이팅입니다. CSS before 로 삼각형을 after 로 삼각형의 테두리를 만들어주었다. .task-tooltip { background-color: #eef3fd; border: #7689fd solid 1px; border-radius: 5px; color: #505bf0; font-size: 12px; font-wei.. 2021. 10. 1. CSS - 툴팁 삼각형 화살표 만들기 CSS 로 툴팁을 만들어보자. 여태까지 툴팁을 두어번정도 만들어봤다. 텍스트가 들어가는 말풍선 부분을 만들기는 쉬운데, 삼각형 화살표를 만들기가 조금 까다롭다. 그래서 기록해본다. (미래의 나는 여전히 해멜 것을 알기에... ) 결과화면 미리보기 아래처럼 배경색이 들어간 툴팁을 만들어 보자. JavaScript - CSS 툴팁 삼각형 화살표 만들기 HTML ! 툴팁입니다 ! CSS 가상요소인 after 속성을 이용해 삼각형 부분을 표현하였다 .tooltip {// 몸통 부분 background-color: #7689fd; border-radius: 6px; color: #fff; font-size: 12px; font-weight: 500; height: 31px; letter-spacing: -0.25.. 2021. 9. 30. CSS - input 체크박스 테두리 스타일 변경하기 요즘 새발자는 UI 를 열심히 하고 있다. (쑥쑥 무럭무럭자라라) input 의 기본 체크박스 안의 테두리 스타일을 변경하는 미션을 맡아 그 기록을 남겨보았다. (미래의 나는 여전히 해멜 것을 알기에... ) 자 그럼 시작해보자 ! 결과화면 미리보기 일단 구현된 결과물이다. 기본 체크박스는 테두리가 회색으로 되어있다. 하지만 나는 테두리가 없는 깔끔한 디자인을 구현하였다. JavaScript - CSS input 체크박스 테두리 스타일 변경하기 현실은 css 에서 바로 변경이 안된다. 😭 after 속성을 사용하여 현실에서는 적용이 안되는 가상의 스타일을 지정해주자. HTML CSS ** 참고로 IE 는 appearance 속성이 안먹었던 기억이 가물가물하게 나니, 혹시 IE 구버전 대응을 해야한다면 참.. 2021. 9. 29. React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 토글 메뉴가 열렸을 때와 닫혔을 때, border-bottom 의 두께를 다르게 변경하고 싶다. 백문이 불여일견 ! 결과화면을 먼저 살펴보자. 결과화면 미리보기 - 토글 메뉴가 열렸을 때, 빨간박스 안의 border-bottom이 연하다. - 토글 메뉴가 닫혔을 때, 연했던 border-bottom 이 진해졌다. React(49) 타입스크립트 - CSS 속성을 동적으로 변경하기 List.tsx 리액트 컴포넌트 내에서 useState 로 선언한 closeList 라는 상태변수를 이용하면 변경 가능하다. 먼저 closeList 라는 변수를 useState 를 통해 선언해주자. const [closeList, setCloseList] = useState(false); 위에서 선언한 closeList가 로직에 .. 2021. 9. 25. React(48) 타입스크립트 - 토글 메뉴에 animation 효과주기 타입스크립트와 리액트로 메뉴 접고 펼치기 기능을 구현 중이다.토글까지는 아주 쉽게 구현을 하였지만, 자연스럽게 펼쳐지는 애니메이션을 적용하려니 아~주 골치가 아팠다. ㅠㅠ 동적인 코드에 애니메이션 기능은 처음이라 한참 헤매였다. 하지만 언제나 그렇듯, 항상 어렵사리 해결을 하면 몇줄의 코드로 끝나게 된다. 조금 허무하기도 하지만 뿌듯하다.자 그럼 이제 만들어보자. 이슈- @key frame 을 적용한 animation 속성을 이용하려 하였으나 양방향 애니메이션이 적용이 되지 않았다.- 토글 기능을 적용한 메뉴는 동적으로 받아온 api 객체를 사용하여 보여준다. 즉 동적으로 height 속성을 적용하려니 동작이 되지않았다. ex) 이런식으로 height : calc(100% - 20px) React(48.. 2021. 9. 14. 이전 1 2 3 다음 반응형
