본문 바로가기

CSS14

성별 통계 CSS 디자인 및 SASS ✈ 성별 통계 CSS 디자인 및 SASS 성별 통계 CSS 디자인 및 SASS 성별 차트 플러그인이 딱 디자인에 맞는게 없어서 아래와 같이 만들어봤다. 원리 자체는 간단하다. 그냥 막대그래프에서 퍼센트 통계 그려주는 것과 같다. 다만 다른 점은 BG가 필요한 것 뿐이다. 기본적으로 채워져 있지 않은 테두리만 있는 성별 BG를 부모 객체에 background로 준다. 이후 데이터를 표시하는 엘레먼트는 색을 가진 BG를 background로 받는다. 색이 머리에서부터 칠해진다면 background position은 top이겠지만 보통 이런 차트는 다리부터 색이 칠해져 올라가야 하므로 bottom을 준다. 관련 BG는 아래에 첨부해 두도록 하겠다. 소스코드는 다음과 같다. html 여성 73% 7300 남성 .. 2019. 12. 9.

✈ CSS IE 상위 padding, child absolute position eorror 문제 크로스 브라우징 CSS IE 상위 padding, child absolute position eorror 문제. 다음과 같은 달력형 스케줄에서 카운터 패널은 TD의 bottom에 붙어야 한다. 크롬이나 웹킷 기반 바르우저에서는 문제가 없으나 IE에서는 중간에 뜨는 현상이 생겼다. 이 크로스 브라우징 문제를 해결하기 위한 가장 중요한 솔루션은 구조 자체의 문제다. TD의 높이는 140px로 주고, sns 버튼 팜은 margin으로 여백을 띄웠어야 했다. 현재는 padding으로 띄워져 있는 상태다. 이미 퍼블리싱된 구조를 바꿀 것인지, ie에만 구조를 줘서 패치를 할지는 전적으로 선택의 문제다. 하지만 이 구조를 다른 곳에서도 쓰고 있지만, 그 곳에서의 ie문제는 없기 때문에 그냥 ie 패치를 진행하기로 했다. @char.. 2019. 11. 29.

부트스트랩 셀렉트 .bootstrap-select css 스타일 변경 모두 선택 해제 토글 버튼 scss 부트스트랩 셀렉트 .bootstrap-select css 스타일 변경 부트스트랩의 셀렉트는 셀렉트 그 자체는 예쁘지만, 멀티 셀렉트 사용 시에 선택 체크가 너무 안 예쁘다. 더더군다나 한국사람들은 멀티 셀렉트에 익숙하지 않아서 checkbox를 필요로 한다. 위와 같은 멀티 셀렉트 박스를 정말 안 예쁘다. 이것을 마치 체크박스로 선택한 것처럼 바꾸는 김에 모두 선택과 모두 해제 버튼도 마치 전체 선택 체크박스인 것처럼 바꿔보자. 물론 이때 체크박스는 이미지 BG다. 이 방식을 쓸 때의 개발 이점은 모두 선택과 해제할 때 전체 체크박스의 checked를 제어해줄 필요가 없다. bootstrap 자체의 jquery가 기본적으로 반전해 준다. 부트스트랩 셀렉트에 multiple을 줄 때 data-actions.. 2019. 11. 14.

[웹표준 CSS] cursor:pointer가 웹표준. cursor:hand는 ie에서만. 2014.10.04 11:38 [웹 표준 CSS] cursor:pointer가 웹 표준. cursor:hand는 ie에서만. 이미지에 onClick="javascript:…."를 쓴 경우라든지 뭐 OnClick속성은 A태그 이외의 모든 객체에 줄 수 있다. TD에도 DIV에도 줄 수 있는데...이 속성을 객체에 줘도 클릭을 할 때 액션은 일어나지만 마우스의 커서 모양이 손 모양이 아닌 화살표 모양으로 그대로 남아 있으니까 사람들이 클릭하는 건지 모를 때가 많다. 그럴 땐 흔히 style="cursor:hand;"를 쓰지만, FireFox에서는 안 먹힌다. MS에서 임의로 만든 속성이기 때문이다. 이럴 땐 style="cursor:pointer;" 로 주면 된다. cursor:pointer가 웹표준이다. .. 2019. 9. 16.

부트스트랩 날짜선택 폼 bootstrap 4.3 datepicker ✈ 부트스트랩 4.3 날짜 선택 폼: 간편한 데이터 피커 사용하기 서론 부트스트랩은 웹 개발을 편리하게 만들어주는 훌륭한 프레임워크입니다. 특히 드롭다운이나 데이터 피커와 같은 구성 요소를 쉽게 활용할 수 있다는 점이 큰 장점입니다. 그러나 버전 업그레이드 과정에서 예상치 못한 문제가 발생할 수 있습니다. 이번 포스팅에서는 부트스트랩 4.3으로 업그레이드하면서 마주할 수 있는 스타일 관련 이슈와 해결 방법에 대해 알아보겠습니다. 특히, 날짜 선택을 위한 데이터 피커 구현에 중점을 둘 것입니다. 부트스트랩 4.3 업그레이드의 스타일 변화 부트스트랩 4.3으로 업그레이드하면 기존의 스타일이 조금 흐트러질 수 있습니다. 이 중에서도 특히 날짜 선택을 위한 데이터 피커의 스타일이 예전과 다를 수 있습니다. 더욱.. 2019. 7. 25.

✈css3 background-size:cover contain 속성 ie7, i8 핵 background-size-polyfill with 짤 : 스타킹 하이힐 2016.08.09 11:11 IE EDGE까지 나와 있는 세상에서 여전히 IE7 버전에 대한 하위 호환 크로스 브라우징을 해줘야 하는 것이 짜증이 나지만... UI는 안 되는 것도 되게 하는 신성한 직업! 브라우저들이 미쳐 날뛰더라도 핵이건 뭐건 써서 잘 맞춰보자. 이 번에 송파구립 통합도서관 중에 가락시장 도서관이 오픈하는데 맞춰서 송파구립 가락몰 도서관의 디자인 수정이 살짝 있었다. 기존의 송파구립도서관들은 BG가 repeat-x로 반복되기 때문에, 별 신경을 쓰지 않았지만, 좌우로 그라데이션 되는 BG가 깔리는 디자인으로 결정이 되었다. 당연히 repeat-x를 쓸 수는 없다. #topheader{ width:100%; height:90px; z-index:999; background:url(.... 2019. 7. 22.

이전 1 2 3 다음

티스토리툴바