728x90 반응형 CSS11 [CSS] 내용이 넘어갔을 때 스크롤바 추가하기 컨텐츠가 넘어갔을 때 해당 컨텐츠 바로 밑에 스크롤바를 추가하고 싶었다. 이 때 사용할 수 있는 CSS가 overflow이고, scroll 값을 주면 된다. 나는 tailwind css를 사용하고 있어서 전체 이미지를 감싸고 있는 에게 overflow-scroll 속성을 주었다. 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 3. 8. 홀수 번째 또는 짝수 번째에만 지정된 CSS 적용하기 프로그래머스 데브매칭을 구현하다가 정리를 해두면 좋을 거 같아서 정리했다! 그리고 예전에 혼자 진행한 미니 프로젝트에서도 이러한 CSS 적용을 했었는데 노션에 정리를 해놨던지라 티스토리로 이동이동~ 홀수 번째에만 CSS 적용하는 법 :nth-child(odd) { background-color: skyblue; } 짝수 번째에만 CSS 적용하는 법 :nth-child(even) { background-color: skyblue; } 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 2. 25. [React+CSS] 구분선 만드는 가장 쉬운 방법 사진처럼 구분선을 만들고 싶을 수 있다. 가장 쉬운 방법은 를 사용하는 것이다! 거두절미하고 코드를 보면 된다. 진짜 별거없다! ㅋㅋㅋ 그래도 은근 사용할 일이 많기 때문에 기록했다. border와 width를 주어 조절해주면 원하는 구분선을 만들 수 있다! 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 2. 24. <div> 안에 text 가운데 정렬하는 법 flex, justify-content, align-items만 기억하면 된다! 한테 flex, justify-content: center, align-items: center 속성을 주면 손 쉽게 text를 가운데 정렬시킬 수 있다. 2023. 2. 13. [tailwind css] 동적으로 클래스 할당하는 법 문제 상황 클릭할 때마다 progress바의 progress의 width가 20%씩 증가되는 UI를 구현하고 싶었다. 그래서 처음에 구현했던 코드는 아래와 같다. 여기서 key는 0 ~ 4(스킬의 개수)까지의 값이다. 아무튼 이렇게 동적으로 width가 계산되어 tailwindcss가 정상적으로 적용이 된다고 생각했지만 그게 아니였다. progress가 60%인 경우에는 적용이 됐다 안됐다 하는 문제가 있었다.. 클릭 해결 방법 1. 문제를 구글링해보니 tailwind css에서 동적으로 값을 할당할 때 생기는 문제였고, 나와 비슷한 문제를 겪은 분이 있었다. Next.js and Tailwind can't use template string for applying classes problem 나처럼 화.. 2023. 2. 8. 이전 1 2 3 다음 728x90 반응형
