Tailwind CSS로 시작하는 유틸리티 퍼스트 스타일링 (Tailwind Getting Started)
·
Programing/CSS
https://tailwindcss.com/ Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.tailwindcss.com 웹 개발 환경에서 "Tailwind CSS"는 빠르게 인기를 얻고 있는 CSS 프레임워크입니다. 기존의 CSS는 별도의 파일에서 스타일을 정의하고, 이를 HTML 클래스와 연결하는 방식이 일반적이었지만, Tailwind는 완전히 다른 접근 방식을 제시합니다. 바로 "유틸리티 퍼스트(Utility-f..
px, em, rem? 헷갈리는 CSS 단위 정리 (CSS Units Guide)
·
Programing/CSS
웹 페이지를 디자인할 때 빠지지 않는 것이 바로 텍스트와 레이아웃의 크기입니다. 이때 사용하는 CSS 단위는 디테일한 표현을 위한 핵심 요소입니다. 하지만 "px", "em", "rem" 같은 단위를 정확히 이해하지 못하면 디자인이 화면마다 다르게 보이거나, 접근성에 취약한 결과를 낳을 수 있습니다. 이 글에서는 각 단위의 특징과 실전 사용법을 자세히 정리합니다.1. "px" (픽셀)"px"는 디지털 화면에서 고정된 크기를 의미하는 "절대 단위"입니다. 가장 직관적이고 예측 가능한 단위로, 많은 디자이너와 개발자들이 익숙하게 사용하는 방식입니다.예를 들어 "16px"로 폰트 크기를 설정하면, 해당 텍스트는 어떤 상황에서도 16개의 화면 픽셀 높이로 표시됩니다. 이는 정밀한 위치 조정이 필요하거나 작은 아..
iPhone & Android input radius css init
·
Programing/CSS
아이폰과 안드로이에서 사용된 input의 css가 제각기 틀리다.아이폰의 경우 보더에 라운딩처리까지 되어 있다. [Desktop][Mobile] 이를 해결하기위해 아래 코드를 입력하면 desktop과 mobile이 동일하게 나온다.input {-webkit-border-radius:0; border-radius:0;}
css 문자열자르기.
·
Programing/CSS
대한민국대한민국대한민국대한민국 결과 : 대하민국대한민...
프린트 전용 CSS "@media print"
·
Programing/CSS
@media print { #print_btn{display:none;} } 위와 같은 코드를 사용시 프린트 할때 원하는 부분을 제외 시키고 프린트를 할 수 있다.
Min & Max Height & Width in IE6
·
Programing/CSS
IE6 does not understand min/max of both height or width. So, if you need any of these four css properties to work in IE6, then you'll need to feed IE6 an IE expression. Basically, they're little snippits of javascript tailored for IE. IE expressions don't validate, so I like to put them in a seperate ie6.css. Alternativly, you can place them in the , or feed them to IE6 with the * html hack - wh..
가운데 정렬
·
Programing/CSS
margin: 0 auto;
웹표준이라기보단 스타일
·
Programing/CSS
cellpadding 과 cellspacing 의 값을 0으로 주는 효과 border-collapse:collapse