Dev/html css13 css3 background-size:cover contain 속성 ie7, i8 핵 background-size-polyfill with 짤 : 스타킹 하이힐 이 글은 2016.08.09에 영국에서 처음 작성되어 지구를... 쿨럭... 오래된 글이니 그냥 참고로만... IE EDGE까지 나와 있는 세상에서 여전히 IE7 버전에 대한 하위 호환 크로스 브라우징을 해줘야 하는 것이 짜증이 나지만... UI는 안 되는 것도 되게 하는 신성한 직업! 브라우저들이 미쳐 날뛰더라도 핵이건 뭐건 써서 잘 맞춰보자. 이 번에 송파구립 통합도서관 중에 가락시장 도서관이 오픈하는데 맞춰서 송파구립 가락몰 도서관의 디자인 수정이 살짝 있었다. 기존의 송파구립도서관들은 BG가 repeat-x로 반복되기 때문에, 별 신경을 쓰지 않았지만, 좌우로 그러데이션 되는 BG가 깔리는 디자인으로 결정이 되었다. 당연히 repeat-x를 쓸 수는 없다. #topheader{ width:100%.. 2020. 11. 4. text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 글자르기 width:auto. 글이 길 경우 CSS 말줄임...로 표시 게시판을 개발할 때 귀찮은 작업 중의 하나가 제목을 리스트 폭에 맞춰서 말을 줄이는 것이다. 서버 단에서 미리 길이를 계산해서 출력할 수도 있지만, 사이트 특성상 게시판의 종류가 다양하다거나 하면, 은근히 귀찮은 압박으로 다가오게 된다. 이럴 때 유용한 것이 text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 조합이다. 이걸 쓰면 글이 길 경우 CSS 말줄임...로 표시된다. 금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 -추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택 이렇던 녀석이 이렇게 바뀐다. 소스에서 볼드처리 해둔 부분이 중요한 부분인데, vf_360을 id로 스타.. 2020. 9. 23. CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다. 더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-; 군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다. 그러면서 단어는 음절단위에서 개행하지 않게 해 달란다. 아하~ 나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다. 그분들의 갈증을 해소해드리고자, 브라우저별로 속성 값이 어떻게 적용되는지를.. 2020. 9. 14. [CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle 결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다. div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다. 보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는 vertical-align:middle을 사용한다. 하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다. 이 때 div의 display속성을 table-cell로 부여함으로써 마치 테이블셀에서의 수.. 2020. 8. 29. 이전 1 2 다음
