본문 바로가기

Lect & Tip/html, css, scss24

✈ 웹접근성 앵커태그 A 에 onfocus hover 시각화 (점선테두리)가 나타나지 않을 때 해결법. 초점을 인지할 수 없는 링크 및 서식개수 웹 접근성 심사를 받다 보면, 전혀 예기치 못했던 부분에서 감점을 받게 되는 경우가 종종 있다. 팀작업이나, 예전에 다른 사업자가 작업했던 부분에서 너무나 도 기초적인 부분을 체크하지 못했던 경우에 종종 문제가 생긴다. 직접 했던 프로젝트라면 웹 접근성의 기본과 기초에 맞춰서 작업을 했을 테니 기본적으로 갖추었어야 할 부분인데, 남이 했던 것인데 "설마 이런 것도 틀리겠어?" 라고 생각하는 부분에서 문제는 발생한다. 다행히 위와 같이 초점을 인지할 수 없는 링크 및 서식 개수의 문제에 있어서 초점을 시각적으로 인지할 수 없는 링크의 경우 의도적으로 시각화를 날려 버린 경우가 아니라면, X가 아닌 △을 받긴 한다. 하지만 모든 심사관이△를 준다는 보장은 없다. 그리고 의도적으로 onfocus=blur();.. 2019. 8. 5.

✈ [반응형 웹 기초] @media screen and (max-width:620px) and (min-width:300px) 반응형 웹의 기초 @media screen and (max-width:620px) and (min-width:300px) 반응형 웹에 대해 두려움을 갖고 있는 퍼블리셔들이 제법 많다. 사실 알고 보면 별거 아니다. 가로폭에 대한 시나리오대로 CSS를 적용해주면 90%(?)는 끝난 게임이다. 물론 그 과정은 코딩답게 노가다이긴 하다. 같은 스타일에 대해 2번 이상을 기술해줘야 하는 작업이니까 말이다. 나머지 10%는? 반응형웹을 원하는 클라이언트의 기발하고도 창의적이면서 가학적인 눈높이에 맞춰주기 위해서는 단지 CSS의 @media screen 만으로는 해결되지 않는 난제들이 튀어나올 때가 있다. 그럴 땐 하는 수 없이 jQuery의 도움을 받아야 한다. 하지만 왠만하면 @media screen으로 대부분.. 2019. 7. 27.

✈css3 background-size:cover contain 속성 ie7, i8 핵 background-size-polyfill with 짤 : 스타킹 하이힐 2016.08.09 11:11 IE EDGE까지 나와 있는 세상에서 여전히 IE7 버전에 대한 하위 호환 크로스 브라우징을 해줘야 하는 것이 짜증이 나지만... UI는 안 되는 것도 되게 하는 신성한 직업! 브라우저들이 미쳐 날뛰더라도 핵이건 뭐건 써서 잘 맞춰보자. 이 번에 송파구립 통합도서관 중에 가락시장 도서관이 오픈하는데 맞춰서 송파구립 가락몰 도서관의 디자인 수정이 살짝 있었다. 기존의 송파구립도서관들은 BG가 repeat-x로 반복되기 때문에, 별 신경을 쓰지 않았지만, 좌우로 그라데이션 되는 BG가 깔리는 디자인으로 결정이 되었다. 당연히 repeat-x를 쓸 수는 없다. #topheader{ width:100%; height:90px; z-index:999; background:url(.... 2019. 7. 22.

✈ favicon.ico 파비콘 만들어서 홈페이지에 붙이기 2014년에 작성된 글입니다. 티스토리 파비콘은 파비콘을 만든 뒤 블로그 설정에 업로드만 하면 됩니다. 뭐든지 겸사겸사 하는 걸 좋아하는 타입이라. 네이버 블로그에서 티스토리로 이사를 오면서 네이버에서는 뽐낼 수 없었던 기능들을 십분 활용해보는 김에 저처럼 초보가 갑갑해하고 가려운 것을 직접 해나가면서 올려봅니다. 굉장히 상세하게 설명해주시는 다른 분들의 글들도 많지만, 워낙에 아는게 많으셔서 들 그런지 간단한 것 까지 세밀하게 상세하게 쓰다 보면 되려 어렵게 느껴지더군요. 그래서 저는 핵심만 추려봅니다. 파비콘을 다는 방법은 다음과 같습니다. 1. favicon.ico라는 파일을 만든다. 2. 사이트에 올려둔다. 3. 사이에 를 삽입한다. 1.favicon.ico 만들기 포토샵으로 만들어도 되고. ht.. 2019. 7. 21.

📌 CSS 말줄임 : text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 글자르기 width:auto. 제목이 길 경우 ...로 표시 게시판을 개발할 때 귀찮은 작업중의 하나가 제목을 리스트 폭에 맞춰서 말을 줄이는 것이다. 서버 단에서 미리 길이를 계산해서 출력할 수도 있지만, 사이트 특성상 게시판의 종류가 다양하다거나 하면, 은근히 귀찮은 압박으로 다가오게 된다. 이럴때 유용한 것이text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 조합이다. 이걸 쓰면 금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 -추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택금호리조트 1월 행사 안내 - 추가할인 혜택 이렇던 녀석이 이렇게 바뀐다. 소스에서 볼드처리 해둔 부분이 중요한 부분인데, vf_360을 id로 스타일을 적용하게 했고, width:auto; 속성을 부.. 2019. 6. 22.

패스트부트 반응형 웹 티스토리 스킨 상단에 배너달기. 미디어 쿼리 ✈ 프로그래머들이 싫어하는 언어 제 동생 블로그에 패스트부트 반응형 웹스킨을 적용해 주었는데요. 반응형 스킨상에서 블로그 최상단의 블로그 이름 옆에 배너를 다는 법에 대해 궁금해하시는 분이 댓글로 질문해 주셨어요. 웹퍼블리셔로 일하는 저로서는 그냥 간단한 작업이었는데, 아무래도 일반인 분들은 CSS개념이라든지, 반응형 미디어 쿼리에 대해 잘 모르시니까 어렵게 느껴지실 것 같긴 하네요. 모든 반응형 웹 티스토리 블로그 스킨이 똑같은 구조가 아니라서 단정적인 방법을 설명해 드릴 수는 없네요. 일단은 제가 주로 사용하고 있는 패스트부트 반응형 웹 티스토리 스킨 버전 1.6.1을 기준으로 해서 설명을 드릴게요. 그전에 일단 중요한 핵심에 대해서 얘기하죠. 이 부분은 패스트부트 스킨이 아니더라도 반응형 웹이라면 고려해야 할 사항입니다. 일단 반.. 2019. 5. 24.

이전 1 2 3 4 다음

티스토리툴바