본문 바로가기

CSS17

[웹표준 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.

📌 CSS 말줄임 : text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 글자르기 width:auto. 제목이 길 경우 ...로 표시 게시판을 개발할 때 귀찮은 작업중의 하나가 제목을 리스트 폭에 맞춰서 말을 줄이는 것이다. 서버 단에서 미리 길이를 계산해서 출력할 수도 있지만, 사이트 특성상 게시판의 종류가 다양하다거나 하면, 은근히 귀찮은 압박으로 다가오게 된다. 이럴때 유용한 것이text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 조합이다. 이걸 쓰면 금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 -추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택 이렇던 녀석이 이렇게 바뀐다. 소스에서 볼드처리 해둔 부분이 중요한 부분인데, vf_360을 id로 스타일을 적용하게 했고, width:auto; 속성을 부.. 2019. 6. 22.

패스트부트 반응형 웹 티스토리 스킨 상단에 배너달기. 미디어 쿼리 ✈ 프로그래머들이 싫어하는 언어 제 동생 블로그에 패스트부트 반응형 웹스킨을 적용해 주었는데요. 반응형 스킨상에서 블로그 최상단의 블로그 이름 옆에 배너를 다는 법에 대해 궁금해하시는 분이 댓글로 질문해 주셨어요. 웹퍼블리셔로 일하는 저로서는 그냥 간단한 작업이었는데, 아무래도 일반인 분들은 CSS개념이라든지, 반응형 미디어 쿼리에 대해 잘 모르시니까 어렵게 느껴지실 것 같긴 하네요. 모든 반응형 웹 티스토리 블로그 스킨이 똑같은 구조가 아니라서 단정적인 방법을 설명해 드릴 수는 없네요. 일단은 제가 주로 사용하고 있는 패스트부트 반응형 웹 티스토리 스킨 버전 1.6.1을 기준으로 해서 설명을 드릴게요. 그전에 일단 중요한 핵심에 대해서 얘기하죠. 이 부분은 패스트부트 스킨이 아니더라도 반응형 웹이라면 고려해야 할 사항입니다. 일단 반.. 2019. 5. 24.

이전 1 2 3 다음

티스토리툴바