Dev/html css13 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.. 2021. 7. 15. 웹 접근성 앵커 태그 A에 onfocus hover 시각화 (점선 테두리)가 나타나지 않을 때 해결법. 초점을 인지할 수 없는 링크 및 서식 개수 웹 접근성 심사를 받다 보면, 전혀 예기치 못했던 부분에서 감점을 받게 되는 경우가 종종 있다. 팀작업이나, 예전에 다른 사업자가 작업했던 부분에서 너무나 도 기초적인 부분을 체크하지 못했던 경우에 종종 문제가 생긴다. 직접 했던 프로젝트라면 웹 접근성의 기본과 기초에 맞춰서 작업을 했을 테니 기본적으로 갖추었어야 할 부분인데, 남이 했던 것인데 "설마 이런 것도 틀리겠어?" 라고 생각하는 부분에서 문제는 발생한다. 다행히 위와 같이 초점을 인지할 수 없는 링크 및 서식 개수의 문제에 있어서 초점을 시각적으로 인지할 수 없는 링크의 경우 의도적으로 시각화를 날려 버린 경우가 아니라면, X가 아닌 △을 받긴 한다. 하지만 모든 심사관이△를 준다는 보장은 없다. 그리고 의도적으로 onfocus=blur();.. 2021. 7. 7. SASS SCSS a태그 아래 각기 다른 색 요소를 a:hover 색은 같게 하기/성별 통계 CSS 디자인 SASS SCSS에서 :hover 상태일 때 a 태그 아래 각기 다른 색을 동일하게 변경하기 소개 이 문서는 SASS(SCSS)를 사용하여 a 태그 아래에 있는 각 요소의 색상을 동일하게 변경하는 방법에 대해 설명합니다. 이 기술은 간단한데, SCSS의 구조를 활용하여 효과적으로 스타일을 적용할 수 있습니다. 해당 방법을 통해 마우스 오버 시 모든 요소의 색이 반전되는 효과를 구현할 수 있습니다. 상세 설명 먼저, 아래와 같은 HTML 구조를 가정해봅시다. Contents 스페인하숙 3화 미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요미안하지만, 난 당신들이 궁금하지 않아요 위와 같은 구조에서 SCSS를 활용하여 스타일을 적용해보겠습니다. .latest { .card { .. 2021. 7. 5. CSS3 text-shadow 텍스트 쉐도우 배경 BG에도 잘 보이는 글자 국어청 인사말 퍼블리싱 작업 중인데... 2016. 9. 8. 17:35 디자이너가 원색 찬연한 BG를 깔았다. PC 화면에서라면 문제가 없지만... 반응형으로 모바일 화면이 되면, 백그라운드 이미지와 텍스트가 겹치게 되는데... 글씨가 배경 때문에 잘 안보일 수가 있다. 이럴 때 선택은 3가지다. 1. 모바일 상태에서 BG를 날려버린다. (화면이 굉장히 심심해진다.) 2. 텍스트와 BG레이어를 absolute로 띄워서 모바일 미디어 쿼리일 때는 BG레이어에만 opacity를 먹인다. (배경 흐려짐 효과) 3. BG에도 잘 보이는 글자가 되게끔 텍스트에 스트로크를 씌운다. CSS에 스트로크가 없으니 text-shadow를 응용한다. 텍스트의 css속성으로 text-shadow:#fff 0 0 2px 2p.. 2021. 3. 10. 텍스트간격조절 & cursor:pointer; cusor:hand; <a 태그가 아니라도 클릭 아이콘 나타내기. cursor:pointer; cusor:hand; 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다. size：10pt；text- indent：10px；text-align：justify；letter-spacing：－1 px； --> 글자 한 자 한 자... ‘영어 글자 부분만 따로’ 스타일시트 코드를 적용시키면 됩니다. 2021. 2. 12. 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.. 2021. 1. 13. 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.. 2021. 1. 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으로 대부분.. 2020. 11. 22. favicon.ico 파비콘 만들어서 홈페이지에 붙이기 2014년에 작성된 글입니다. 티스토리 파비콘은 파비콘을 만든 뒤 블로그 설정에 업로드만 하면 됩니다. 뭐든지 겸사겸사 하는 걸 좋아하는 타입이라. 네이버 블로그에서 티스토리로 이사를 오면서 네이버에서는 뽐낼 수 없었던 기능들을 십분 활용해보는 김에 저처럼 초보가 갑갑해하고 가려운 것을 직접 해나가면서 올려봅니다. 굉장히 상세하게 설명해주시는 다른 분들의 글들도 많지만, 워낙에 아는 게 많으셔서 들 그런지 간단한 것 까지 세밀하게 상세하게 쓰다 보면 되려 어렵게 느껴지더군요. 그래서 저는 핵심만 추려봅니다. 파비콘을 다는 방법은 다음과 같습니다. 1. favicon.ico라는 파일을 만든다. 2. 사이트에 올려둔다. 3. 사이에 를 삽입한다. 1.favicon.ico 만들기 포토샵으로 만들어도 되고. h.. 2020. 11. 5. 이전 1 2 다음
