본문 바로가기

Lect & Tip/html, css, scss24

✈ 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 4 다음

티스토리툴바