Tailwind CSS란? Tailwind CSS는 클래스 기반으로 스타일링할 수 있는 CSS 프레임워크이다. 우리가 기존에 CSS를 줄 때 클래스 이름에 대한 스타일을 먼저 CSS 파일 안에 만들어두고, 그다음 클래스 이름을 HTML 요소에 추가하는 방식이었다면, Tailwind CSS는 바로 HTML 요소에 클래스 이름(text-3xl font-bold...)으로 직접 스타일링을 하는 방식이다. 굳이 CSS 파일을 따로 만들지 않고 직접 요소에 줄 수 있다는 점과 클래스 이름을 고민하지 않아도 된다는 점에서 개인적으로 선호하는 스타일링 방식이기도 하다. @tailwind로 Tailwind 불러오기 @tailwind base; @tailwind components; @tailwind utilities;..

문제 위와 같은 코드가 있다고 하자. 이미지를 감싼 a태그가 하나 있고, 이 a태그에는 형제 요소로 div가 하나 있다. 표현하고 싶은 것은 a태그 위에 div를 absolute시켜서 올리려고 한다. a태그 안에 div를 넣는 방법도 있긴 하지만, 만약 a태그와 별개로 다른 요소가 a태그 위에 올려지길 원한다면 어떻게 해야 할까? 그대로 absolute하여 올린다면 a태그가 div에 가려져 그 부분은 클릭이 안 되는 불상사가 생길 수도 있다. 그렇다고 z-index로 우선순위를 내리면 div가 보이지 않는다. 이럴 때는 간단히 클릭 요소만 제어할 수 있는 pointer-events 속성을 사용해보자. 방법 .wrap { position: relative; } .wrap div { position: abs..

정의 Grid를 구글에 검색해보면 격자무늬의 모양이 나오는 걸 볼 수 있다. 우리가 사용하는 웹도 생각해보면 격자무늬 안에서 표현되고 있다. 헤더와 푸터, 메인과 사이드를 각각 나누고 균형있게 격자무늬 모양으로 나타내진다. 따라서, Grid는 아이템이 여러 개 있을 때 반응형에서 각 사이즈를 조절할 때 매우 유용하게 사용되기 때문에 Flex와 더불어서 익혀두면 매우 유용한 CSS 속성이기도 하다. 방법 행과 열 설정 및 간격 설정하기 .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } 1) display: grid로 그리드 형식 선언을 해준다. 2) 그리드의 행과 열을 설정하기 위해서는 grid-template-col..

문제 태그를 이용할 경우 우리가 가로와 높이 길이를 고정된 값으로 설정했는데도 불구하고, 우측 하단을 마우스로 잡고 드래그할 경우 사용자 임의로 텍스트 박스의 사이즈 조절을 할 수 있다. 물론, 일반적인 사용자의 경우 텍스트 박스를 잡고 끌 생각을 하지는 않겠지만 간혹 일부 호기심 강한 사용자들의 UI 파괴술(?)을 방지하고자 아무리 마우스로 잡고 끌어도 사이즈가 바뀌지 않는 방법을 소개하려 한다. 방법 textarea { resize: none; /* 변경 불가능 */ resize: both; /* 변경 가능 */ resize: vertical; /* 높이만 변경 가능 */ resize: horizontal; /* 너비만 변경 가능 */ } 방법은 간단하다. 바로 resize 속성을 사용하면 된다. 사..

문제 우리가 input의 checkbox를 떠올렸을 때, 가장 먼저 생각나는 건 조그마한 박스에 파란색 체크 모양일 것이다. html을 처음 배울 때만 해도 이 모양 자체를 바꿀 수 있다는 건 상상조차 못했었다. 하지만, checkbox도 그렇고 radio도 그렇고 input의 타입들 또한 css를 통해 다양하게 커스터마이징 할 수 있으며 이 글에서는 input의 checkbox 타입을 기준으로 간단히 커스터마이징 하는 방법에 대해 소개하려고 한다. 방법 HTML 체크포인트 여기서는 html을 잘 봐둬야 한다. 여기서 반드시 기억해야할 점은 딱 2가지이다. 첫 번째, input의 id와 연결될 label의 for 값이 서로 같아야 연결이 된다. 두 번째, 체크박스 1개당 2개의 label 태그를 만들어준..