Categories for CSS

워드프레스 에서 가상객체 번역하기

[이 글은 다국어 사이트 용 워드프레스 테마 제작을 해야하는 개발자 분들에게 유용한 글 입니다.] [pseudo elements 를 한국어로 가상요소, 가상 클래스, 가상선택자 등으로 번역되는 것 같은데, 저는 객체라고 번역합니다. 그 이유는, css 의 pseudo elements 는 자스 (javascript)의 object 과... [더 읽기]

SVG 에 네온 그림자 효과 주기

SVG 에 네온 그림자 효과 주기

[이글은 front-end 개발자 분들을 위한 글 입니다. 일반인분들은 그냥 무시하고 지나치시면 됩니다.] 제가 개인적으로 가장 좋아하는 네온싸인들은 이런 모습입니다.[이미지 출처: 이상태 간판제작 (https://soomgo.com/profile/users/1396923)] 낮 보다는 밤에 보면 많이 에쁩니다. 이런 효과는 주로 호텔 내부나 클럽 같은데서 많이 사용하는데, 싸인 자체는... [더 읽기]

아재의 쓴소리 : html 부터 제대로 배워라

매주는 아니지만 토요일 아침이면, 코드를 좀 봐달라는 freelancer 들로부터 연락을 받게 되는 경우가 종종 있습니다. 한국 프리랜서분들은 아니고 주로 freelancer.com 같은 곳에서 일하는 인도 개발자들 입니다. 사실 이런 프리랜서 사이트, 특히 freelancer.com 같은 경우 프리랜서들의 질이 떨어지기 때문에 실력 좋은... [더 읽기]

css 로 세모영역만 클릭되게 만들기

css 로 세모만들기는 오래전에 이글을 통해 소개해 드렸었는데, 오늘 이렇게 만든 세모영역에만 링크가 걸리게 하는 방법이 없냐는 질문을 bastcode 님이 질문해오셨습니다. 일단 결론부터 말씀드리자면, 불가능합니다. 왜 예전기법에서 세모영역에만 링크를 걸어주는게 불가능한가? 저 글에도 써놨네요. “삼각형은 결국 border 중 하나만 보여주고... [더 읽기]

CSS Grid 는 지금 사용가능한가?

이글 역시 튜토리얼 참여자분의 질문글에 대한 답변입니다. ㅎㅎㅎ http://caniuse.com/#feat=css-grid 결론부터 말씀드리자면, 천조국에서는 써도 됩니다. 데스크탑에서는 마소의 IE, 그리도 Edge 만 완벽히 지원이 되지 않을뿐, 크롬, 파폭, 사파리, 오페라 모두 안전하게 사용하실 수 있습니다. 마소 도 지금 grid 를 완벽하게 지원하기... [더 읽기]

SVG 아이콘, 이미지 로딩 문제

웹에 구현되는 이미지는 크게 vector 형태와 raster 형태로 나눌 수 있습니다. gif, jgp, png 등이 raster 이미지고 .eps, .ai, svg 등이 vector 형식의 이미지 입니다. 아이콘이나 이미지를 vectorize 된 형태인 svg 로 웹에 올리는 이유는 두가지 입니다. raster 이미지 형식들과... [더 읽기]

골아픈 한글 캐릭 문제 해결책 (완전정복!)

中文, 日文, 한글 같은 non-latin 캐릭들은 하나의 캐릭에 두개의 ascii 값어치가 부여 됩니다. 아마 php string 도 이래서 한글 자를때 제대로 작동되지 않는걸로 알고 있는데 저는 php알못이라 확신은 못하겠습니다. 오늘 (지금 토요일 아침입니다. 이글은 화요일 정도 출판되겠지만. ㅎㅎㅎ) css variable... [더 읽기]

즐거운 연말 되세요 (간단한 css 공부 하나 ㅎㅎ)

다사다난한 한해가 가고 며칠후면 2017년이 시작됩니다. 새해에는 또 어떤 퐌타스틱한 일들이 벌어질지, 어떤 괴로움이 여러분들을 기다리고 있을지 모르지만, 항상 living in the moment, 지금 이 순간에 몰입해 사시면 행복해지실거에요. 저라고 항상 좋은일만 있겠습니까? 괴롭기도 하고, 눈이 떠지지 않을 정도로 피곤한... [더 읽기]

CSS 20주년

CSS 20주년

웹문서에서의 css 사용이 처음으로 발표된 시점은 1996년 12월 중순 이었습니다. 그래서 올해가 css 가 출시된지 20주년이 되는 해 입니다. 제가 처음 css 를 접한게 1999년 말이나 2000년도 초 였던 것 같습니다. 제 로펌 사이트를 처음 구축할 때였는데, 플래시와 테이블로 짜여진... [더 읽기]