개발/HTML CSS
-
[돌다리 두들기기] IOS 스타일의 토글 스위치개발/HTML CSS 2024. 5. 23. 16:40
React로만 프론트엔드를 다루다 보니까 바닐라 JavaScript의 기본도 어색해져 가는 것 같다.그래서 되짚어보는 IOS 스타일의 토글 스위치다. 설명은 코드에 주석으로 달았다(box-shadow는 적용 안 함). .switch { position: relative; /* 이렇게 하면 slider에서 absolute로 내부 위치를 편리하게 조정 가능 */ display: inline-block; /* inline이지만 높이와 길이를 가질 수 있다 */ width: 50px; height: 24px;}/* 체크박스를 안 보이게 한다 */.switch input { opacity: 0; width: 0; height: 0;}/* - 실제 스타일링은 여기에서 이루어진다- 토글의 원..
-
[React-Responsive-Carousel] 스타일링 오버라이드 주의점개발/HTML CSS 2023. 1. 17. 16:45
원래 react slick을 사용하려고 했으나 무슨 이유에서인지 우리 프로젝트(NextJS)에서 제대로 렌더링이 되지 않았다. 테스트용으로 만든 NextJS 프로젝트에서는 잘 됐었는데. React-Responsive-Carousel 라이브러리를 사용했는데 dots 편집이 자유롭지 않았다. 어쩔 수 없이 스타일링 코드를 깃허브에서 가져와 오버라이딩하는 형태로 커스터마이징을 했다. dots가 ul 태그로 되어 있었고 bottom:0 값이 들어가있었고 위치를 옮기기 위해 top: -65px를 주었다. 위치는 잘 변경되었다. 몇 시간이나 삽질하고 난 이후에 알았다. 기본으로 botttom:0이 적용된 엘리먼트에 top 값을 주었으니 엘리먼트 영역의 크기가 그만큼 커졌다는 걸. 오버라이드 하고 있었는데 주의깊지 ..
-
[tailwindcss] 동적으로 클래스 이름 삽입하기개발/HTML CSS 2022. 9. 17. 23:09
const labelClasses = [ "blue", "indigo", "gray", "green", "red", "purple", ]; //.. {labelClasses.map((labelClass, index) => ( setSelectedLabel(labelClass)} className={`w-6 h-6 bg-${labelClass}-500 rounded-full flex items-center justify-center cursor-pointer`} > {selectedLabel === labelClass && ( check )} ))} 위 코드처럼 동적으로 클래스 이름을 만들 때 문자열을 조각내면 tailwind가 클래스 이름을 찾지 못한다. 완전한 이름으로 넣어주도록 하자. const la..
-
[Flexbox] flex-grow, flex-shrink, flex-basis(feat. responsible)개발/HTML CSS 2022. 8. 9. 16:12
플렉스를 이용하면 창 크기에 맞게 컨텐츠 크기가 자연스럽게 변하도록 비교적 간단하게 레이아웃을 만들 수 있습니다. 미디어 쿼리를 이용하면 반응형 디자인도 어렵지 않게 가능합니다. 일단 플렉스의 기본 동작을 보겠습니다. 플렉스 아이템을 감싸고 있는 영역을 컨테이너라고 합니다. // index.html Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt rem quibusdam neque temporibus aut recusandae a repellat placeat. Qui deleniti itaque aut nulla, amet inventore optio praesentium quaerat? Necessitatibus, dolor! c..
-
[CSS] transition개발/HTML CSS 2022. 3. 30. 23:32
transition 애니메이션 속도를 조절하는 방법을 제공합니다. 어떤 애니메이션, 어떤 동작에 걸리는지를 알아야 하는데요. transform으로 scale에 변화를 준다든가(transform: scale(1.5)), translate로 이동을 한다든가 하는 움직임에 더불어 background-color가 바뀌는 것에도 transition이 적용됩니다. 따라서 transitionend 이벤트를 통해서 살펴보면 background-color가 바뀌는 동작에서 다음과 같은 TransitionEvent 발생합니다. event.propertyName을 통해서 특정 transition이 끝날 때를 감지해 각 이벤트 종료에 따른 처리를 할 수 있게 됩니다.
-
[CSS] display개발/HTML CSS 2022. 2. 5. 21:32
block은 줄 하나에 컨텐츠 하나만 올 수 있으므로 밑으로 차례대로 컨텐츠가 붙는 형식입니다. 결과적으로는 쌓인 것처럼 보이죠. div 태그를 사용했습니다. 보기 편하게 글자 수를 조금 줄이고 inline 속성을 넣어보겠습니다. 한 줄에 컨텐츠가 나열되는데 사이가 벌어져 있습니다. 인라인 태그의 경우 엔터를 치거나 스페이스를 통해 띄웠을 때 위와 같이 공백이 생깁니다. 태그를 붙여 입력하면 해결되지만 가독성이 떨어지기 때문에 이렇게 하지 않고 flex를 사용합니다. Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum .flex { display:flex; } .div1 { background-color:red; } .div2 { background-color: gree..