Categories for CSS

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

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

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

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

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

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

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

中文, 日文, 한글 같은 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년도 초 였던 것 같습니다. 제 로펌 사이트를 처음 구축할 때였는데, 플래시와 테이블로 짜여진... [더 읽기]

글자 수 오버시 처리방법

이글은 아래 질문글에 대한 완벽한 해결책 입니다. http://kopress.kr/topic/글자-수-오버시-처리/ 한줄에 대한 ellipsis (…): 글줄임 은 저 질문글 댓글에도 기재해 놓았듯이 css 만으로 크로스 브라우징이 가능 합니다. 아, 일단 왜 한글은 php 나 js 로 string 을 자르면 안되는가? 영문 알파벳은 각... [더 읽기]

SASS (SCSS) 컴파일 하는 방법

SASS 사용법은 대충 알겠는데, SASS 설치하는게 힘들다고/잘 안된다고 연락주신 개발자분이 계셔서 제가 하는 방식을 알려드립니다. 일단 저에게 질문주셨던 분께는 이 글을 통해 다시한번 공개적으로 사과 드립니다. 개발자의 덕목은 뭐다? 구글링!! 이렇게 약간 장난스럽게 이메일을 보내드리고 SASS 컴파일링 하는 방법을 구글링... [더 읽기]

Critical CSS 적용하는 방법

지금 어느분이 이 작업을 어렵게 생각하고 계셔서.. ㅎㅎㅎ 한번 해보면 절대 어려운게 아닌데, workflow 를 모르시면 어렵게 느껴질 수 도 있는 것 같습니다. 일단 critical css 란? https://www.smashingmagazine.com/2015/08/understanding-critical-css/ [아.. 씨.. 지금 보니까 이글 게시날짜가 작년에 제가 튜토리얼 진행한 후에 나온... [더 읽기]