본문 바로가기
반응형

Web/CSS8

css 이용하여 table 틀고정하는 방법 테이블의 내용이 많아보면 타이틀 내용이 보이지 않아 불편한 경우가 있습니다. 이럴때 첫번째 행이나 열을 고정하면 보기에 편합니다. css로 position: sticky를 이용하면 테이블을 고정할 수 있습니다. 좌측 첫번째 칸이 고정이므로 위치를 left: 0 을 꼭 넣어줍니다. (td와 th의 첫번째 이므로 first-child에다가 고정 css 내용을 넣어줍니다.) 아래 코드를 통해 확인하실 수 있어요. See the Pen table 좌측 부분 고정하기 by woosohee (@venusy) on CodePen. 내용 2023. 4. 14.
input search x버튼 표시 없애기 검색할때 글자를 입력하면 input 타입이 search인 경우에 X표시가 기본적으로 나타납니다. 브라우저에서 자동으로 지원하기 때문에 다음과 같이 X표시가 자동으로 나옵니다. X버튼을 누르면 입력 텍스트가 다 지워져 사용할 때는 편리하지만 미관상 예쁘지 않습니다. input에서 검색 타입에서 제공되는 clear버튼 (X버튼) 표시를 지우려면 아래 css코드를 적용하면 됩니다. 기본으로 제공되는 x버튼을 안 보이게 처리한 후에 x버튼을 커스텀하여 예쁘게 보여주기도 합니다. 2023. 4. 14.
css 셀렉터 - 특성 선택자 [class *='text-'] 클래스 모두 선택하기 css선택자(css Selectors)는 아래와 같이 여러종류가 있습니다. 클래스 선택자 특성 선택자 ID 선택자 유형 선택자 전체 선택자 이 중 특성 선택자에 대해 알아보겠습니다. 특성 선택자란 주어진 특성을 가진 모든 요소를 선택하는 것을 말합니다. 특성 선택자 종류도 여러가지가 있는데요, class*='포함할 클래스' 이렇게 사용하면 내가 만든 class이름을 포함하고 있는 모든 태그를 선택할 수 있습니다. 클래스 이름을 포함한 모든 태그를 선택하는 방법에 대해 아래 소스로 예를 들어보겠습니다. '더보기' 라는 글자가 있고, 폰트사이즈와 여백값은 같고 색만 다르게 작업을 하였습니다. 더보기 더보기 더보기 더보기 더보기 font-size와 padding값이 똑같이 반복되고 있습니다. 반복해서 사용해도.. 2023. 2. 27.
CSS Scroll Snap(스크롤스냅)으로 이미지 slider 만들기 scroll snap이란 사용자가 터치하거나 스크롤 시 조작을 마쳤을 때 화면에서 다음 화면으로 전환될 때 자석처럼 특정 위치에 탁 붙는 기능입니다. 보통 swiper를 이용하여 슬라이더를 만들었는데, swiper를 사용하는 대신 scroll snap을 이용하여 슬라이더 기능을 간단하게 만들 수도 있습니다. 또는 fullPage js와 같은 기능을 sroll snap을 사용하여 구현할 수도 있습니다. css scroll snap에 대한 브라우저 지원은 대부분 지원을 합니다. scroll snap 의 기본 사용법 스크롤 스냅은 컨테이너 요소에 scroll-snap-type 속성을 설정하고 그 안에 있는 요소에 scroll-snap-align 속성을 설정하여 사용합니다. 가장 기본적인 형태는 다음과 같습니다.. 2023. 1. 17.
반응형