본문 바로가기

분류 전체보기224

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

✈ visual studio code 들여쓰기 fomatter tab 간격 조정 visual studio code 들여쓰기 fomatter tab 간격 조정 예전에는 드림위버로 주로 작업했는데, 요새는 웬만한 프로젝트에서는 VScode로 한다. 어느날 정신 줄 놓고 있다가, 뭘 건드렸는지, 포매터의 텍스트 들여쓰기 간격이 너무 넓어졌다. 탭 간격이 8문자 간격이다. 이걸 확인하는것은 태스크바의 spaces 옆의 숫자를 보면 된다. 이 설정 역시 저 부분을 클릭하면 된다. 위의 Spaces:8을 클릭하면 다음과 같은 드롭이 열린다. Indent Using Spaces를 선택한다. 1문자부터 8개까지 선택이 가능하다. 현재는 8문자로 선택되어 있다. VS코드 전체의 설정은 2문자로 탭사이즈를 지정해둔 상태다. 2를 선택하면 2문자 간격으로 바뀐다. 나는 주로 space로 들여쓰기를 하지.. 2019. 11. 20.

SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기 ✈SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기 SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기. 되게 거창한 표현같지만 별거 아니다. 다만 SCSS의 구조에 대해서 설명하기 위한 글이다. 위와 같은 경우 텍스트 영역에 링크는 하나다. 마우스오버가 되었을 때 문단 별로 색이 바뀌면 안되고, 전체가 색이 반전이 되어야 한다. 각각 스타일을 주어도 되지만, SCSS에서는 간단하게 처리가 가능하다. html Contents 스페인하숙 3화 미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요 이런 구조일 때 SCSS SCSS 는 다음과 같이 구성한다. .card { borde.. 2019. 11. 18.

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

✈ img 태그 404 Error시에 대체 이미지 띄우기 img 태그 404 Error가 발생하면 대체 이미지를 띄우는 것은 쉽다. 아니 처음부터 그렇게 만들면 별로 걱정할 문제는 아니다. 그리고 대체로 레이아웃을 구성하는 이미지는 bg속성을 준 스타일을 먹이는 경우가 대부분이므로, bg가 깔리지 않으면 스타일만 변경해 주면 된다. 그 이외의 레이아웃을 구성하는 이미지 요소들도 마찬가지로 처리하면 된다. 문제는 게시판이나, 갤러리 등 다수 사용자 빌런 그룹이 존재하지 않는 이미지를 올리거나, 올렸던 이미지 소스 주소가 없어진 경우에 발생하는 이미지 에러 문제는 보통 다음과 같이 해결해 주어야 한다. 그런데 앞서도 지적했지만 게시판에 이미지를 불펌해다 붙이는 사용자들이 친절하게 html태그를 열어서 대체 이미지 주소를 입력하는 attr을 집어넣기를 바라는 것은 .. 2019. 11. 11.

이전 1 ··· 25 26 27 28 29 30 31 ··· 38 다음

티스토리툴바