개발/HTML CSS
-
[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..
-
[CSS] fixed sticky개발/HTML CSS 2022. 2. 5. 19:32
출처: MDN fixed fixed의 설명을 보면 다음과 같은 문장이 있습니다. The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport. ... This value always creates a new stacking context. In printed documents, the element is placed in the same position on every page. 해당 요소는 정규 문서 흐름에서 ..