본문 바로가기

CSS17

✈ CSS 텍스트 속성 : text-align:justify,text-justify:auto,inter-word,inter-ideograph,inter-cluster,distribute,kashida,newspaper,distribute-all-lines,distribute-center-last 2014년에 작성했던 글입니다. 블로그를 옮기는 중이라... 쿨럭 text-align:justify; text-justify:~ 속성은 골 때리게도 CSS2에는 포함되지 않고, CSS3에는 포함이 되어 있고, IE 구버전들은 일부 지원을 하고, 9 이상에서는 지원이 되지 않는 웃긴 양상을 보이는 텍스트 속성이다. 더 귀찮은 것은 골 때리게도, 이 속성을 공무원님들이 너무 좋아라 하신다는 거다. -_-; 군정시대 습성들이 남아 계신 건지 글씨들이 각 맞춰서 열 맞춰서 서 있기를 바라는 분들이 간혹 있다. 그러면서 단어는 음절단위에서 개행하지 않게 해 달란다. 아하~ 나처럼 이런 갈굼을 당하는 퍼블리셔들이 많으신지, 의외로 검색 유입에 text-align:justify를 검색하는 사람들이 꽤 있다. 그분들의.. 2020. 9. 15.

📌[CSS] div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle css로 div에서 테이블의 valign처럼 텍스트를 가운데 정렬 시키기 display:table-cell; vertical-align:middle 결론부터 말하자면, div인데 table의 cell처럼 동작을 시키기 위한 방법이다. div의 높이가 고정되어 있을 때 텍스트 를 세로의 중간에 정렬 시킬 필요가 있을 때가 있다. 테이블에서 valign을 center로 주었을 때처럼 보이게 한기 위한 것이다. https://youtu.be/6NkVYitGQDM 보통 css에서 수직정렬에서 가운데에 정렬시키고 싶을 때는 vertical-align:middle을 사용한다. 하지만 div에서는 vertical-align:middle만으로는 수직 가운데 정렬이 되지 않는다. 이 때 div의 display속성을 ta.. 2020. 9. 4.

✈ bootstrap selectpicker multiple js 수정 전체선택 해제 변경 css bootstrap selectpicker multiple js 수정 전체선택 해제 변경. 이 제목을 뭐라고 설명해야 할지 모르겠다. 아무튼 요지는 이렇다. 부트스트랩4의 selectpicker multiple 옵션을 사용할 때 디폴트로 주어지는 모두선택 모두해제 토글 되는게 클라이언트 마음에 안들었나보다. 모든 option이 선택되면 모두 해제되는 것은 당연하지만 하나의 옵션만 선택해도 모두해제로 바뀌는 것이 클라이언트는 이해가 안된 모양이다. 그래서 클라이언트는 전체가 아닌 옵션을 선택하면 전체옵션은 변하지 않고, 전체옵션을 선택하면 모든 옵션도 체크가 된 것 처럼 보이게 해 달라는 것이다. 기본적인 셀렉트피커의 태그 구조는 다음과 같다. 그룹명 그룹설명 부서명 새로 변경해서 스크립트를 짠 html구조.. 2019. 12. 22.

성별 통계 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.

이전 1 2 3 다음

티스토리툴바