본문 바로가기

Lect & Tip/html, css, scss24

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

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.

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

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

CSS 선택자 (selector)의 정의와 사용법 CSS를 다루는 데 있어서 가장 기초적이고 기본적이고 핵심 적인 것이 바로 CSS 선택자의 활용이죠. CSS의 선택자 문법은 다음과 같죠. 선택자 { 속성:값} /*example*/ select {position:absolute} #selector { position:absolute; } .selector { postition:absolute; } 이런 선택자는 우리가 CSS의 스타일을 적용하고 싶은 특정 대상을 제한하고 지정하는 것을 지칭하는 것이죠. 쉽게 생각하면 타깃이라고 여겨도 무방합니다. 위에서 예를 든 선택자 3종에 대해서 일단 알아보죠. 요소 선택자 (type Selector) 아무런 기호가 없이 오는 단어는 html 태그의 Element요소입니다. a, p, div, table, li, u.. 2019. 9. 8.

✈ checkbox css 체크박스 스타일로 예쁘게 하는 법 - 웹 접근성 맞추기 input[type=checkbox] + label 체크박스 자체를 예쁘게 꾸밀 수는 없다. 굳이 한사코 꾸미자면, 백그라운드를 이용할 수는 있다. 체크표시가 되었을 때는 input[type=checkbox]:checked에 스타일을 주면 된다. 그런데 이미지를 쓰지 않고 체크박스를 스타일로 예쁘게 꾸미려면...이게 좀 복잡해진다. input[type=checkbox] + label 을 이용하게 되는데, 이 방법의 핵심은 input 체크박스 자체를 보이지 않게 하고 label에 스타일을 주어서 꾸미는 방법이다. 그런데 보통 이럴 때, 진짜 체크박스를 보이지 않게 하기 위해서 input[type=checkbox] { display:none} 을 쓰게 된다. 이렇게 해 버리면 웹접근성 위배가 된다. 왜냐하면, label자체는 focus를 받지 못하고, inp.. 2019. 9. 4.

✈css3 :not 선택자 css3를 쓰면 css2에 비해서 퍼블리셔가 원하는 결과를 얻기가 굉장히 수월하다. 예전 같으면 스크립트의 도움을 받았어야 할 일을 css만으로 처리가 가능해졌기 때문이다. display:flex, nth-child(), calc()와 더불어 :not 선택자는 정말 축복이다. 사용방법은 간단하다. :not(.foo) {color:blue} 와 같이 사용하면 .foo 클래스가 아닌 다른 엘레먼트는 모두 텍스트 컬러 색을 파란색으로 바꾸란 뜻이다. 좀 더 세분화 할 수도 있다. div:not(.foo) { color:blue} div중에서 foo클래스가 없는 div는 텍스트 컬러를 파란색으로 하라는 뜻이다. Elements뿐만 아니라 클래스, ID를 대상으로도 선언할 수 있는 것은 당연하다. .chartAr.. 2019. 8. 30.

~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기 ~ + 인접 형제 선택자를 이용한 No javascript 토글 상세검색 화면 CSS만으로 퍼블리싱하기 상세검색 버튼을 눌렀을 때 상세 검색용 옵션들이 보여지고, 상세버튼을 다시 한번 눌러서 토글하면 상세검색이 사라지는 것을 구현하려면 보통은 자바스크립트를 쓸 수 밖에 없다. 하다못해 부트스트랩을 사용한다고 하더라도, 간단한 토글 함수를 적용해야만 한다. 하지만 스타일 체크박스를 응용하면, 스크립트의 도움없이 상세 검색 토글이 가능하다. 원리는 checkbox의 인접 엘레먼트에 상세검색 영역이 놓이게 하는 것이다. input[type="checkbox"]+ 선택자는 인접형제 선택자기 때문에, label_text에 양보하고, input[type="checkbox"]~ 형제선택자를 이용해서 .styledBt.. 2019. 8. 16.

이전 1 2 3 다음

티스토리툴바