본문 바로가기

css34

썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jquery 가로세로 비율 ✈ 썸네일 이미지 비율 유지 영역에 꽉 차게 이미지 자르기 한 후 가운데 정렬 CSS 및 jQuery 가로세로 비율 웹사이트나 애플리케이션을 제작하면서 이미지의 비율이나 크기를 맞추는 것은 중요한 작업 중 하나입니다. 특히, 썸네일이나 대표 이미지와 같은 고정된 영역에 다양한 크기와 비율의 이미지를 표시해야 할 때, 그 이미지를 영역에 꽉 차게 보여주면서도 넘치는 부분을 잘라내야 할 필요가 있습니다. 이미지의 가로와 세로 비율을 고정된 영역에 맞추려면, 서버에서 이미지를 잘라내거나 리사이징하는 방법이 있습니다. 하지만 이 방법은 원본 이미지의 품질을 손상시킬 수 있기 때문에, CSS나 jQuery를 활용하여 원본 이미지를 그대로 유지하면서도 원하는 비율에 맞게 보여주는 방법을 찾아야 합니다. CSS를 활.. 2023. 10. 6.

✈ checkbox css 체크박스 스타일로 예쁘게 하는 법 - 웹 접근성 맞추기 input[type=checkbox] + label 체크박스 자체를 예쁘게 꾸밀 수는 없다. 굳이 한사코 꾸미자면, 백그라운드를 이용할 수는 있다. 체크표시가 되었을 때는 input[type=checkbox]:checked에 스타일을 주면 된다. 그런데 이미지를 쓰지 않고 체크박스를 스타일로 예쁘게 꾸미려면...이게 좀 복잡해진다. input[type=checkbox] + label 을 이용하게 되는데, 이 방법의 핵심은 input 체크박스 자체를 보이지 않게 하고 label에 스타일을 주어서 꾸미는 방법이다. 그런데 보통 이럴 때, 진짜 체크박스를 보이지 않게 하기 위해서 input[type=checkbox] { display:none} 을 쓰게 된다. 이렇게 해 버리면 웹접근성 위배가 된다. 왜냐하면, label자체는 focus를 받지 못하고, inp.. 2019. 9. 4.

✈css3 :not 선택자 css3를 쓰면 css2에 비해서 퍼블리셔가 원하는 결과를 얻기가 굉장히 수월하다. 예전 같으면 스크립트의 도움을 받았어야 할 일을 css만으로 처리가 가능해졌기 때문이다. display:flex, nth-child(), calc()와 더불어 :not 선택자는 정말 축복이다. 사용방법은 간단하다. :not(.foo) {color:blue} 와 같이 사용하면 .foo 클래스가 아닌 다른 엘레먼트는 모두 텍스트 컬러 색을 파란색으로 바꾸란 뜻이다. 좀 더 세분화 할 수도 있다. div:not(.foo) { color:blue} div중에서 foo클래스가 없는 div는 텍스트 컬러를 파란색으로 하라는 뜻이다. Elements뿐만 아니라 클래스, ID를 대상으로도 선언할 수 있는 것은 당연하다. .chartAr.. 2019. 8. 30.

~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기 ~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기 상세검색 버튼을 눌렀을 때 상세 검색용 옵션들이 보여지고, 상세버튼을 다시 한번 눌러서 토글하면 상세검색이 사라지는 것을 구현하려면 보통은 자바스크립트를 쓸 수 밖에 없다. 하다못해 부트스트랩을 사용한다고 하더라도, 간단한 토글 함수를 적용해야만 한다. 하지만 스타일 체크박스를 응용하면, 스크립트의 도움없이 상세 검색 토글이 가능하다. 원리는 checkbox의 인접 엘레먼트에 상세검색 영역이 놓이게 하는 것이다. input[type="checkbox"]+ 선택자는 인접형제 선택자기 때문에, label_text에 양보하고, input[type="checkbox"]~ 형제선택자를 이용해서 .styledBt.. 2019. 8. 16.

이전 1 다음

티스토리툴바