css

[CSS] 반응형으로 정사각형 만들기

January 17, 2018 Code

결론: after요소에 padding-bottom을 100% 넣어주면 된다. 내부에 다양한 크기에 컨텐츠가 있다면, position: absolute인 width, height 100%인 div로 감싸준다. <div class="note"> <div class="inner"> <div class="title">{noteData.title}</div> </div> </div> .note {...

Flexbox 활용사례 모음: Solved by Flexbox

January 9, 2017 Dev

Flexbox는 웹페이지에서 다양한 레이아웃을 만들기 위해서 쓸 수 있는 최신 CSS 기능이다. 사실 지금까지 CSS를 이용해서 레이아웃을 만드는 것이 그리 간단한 일은 아니었다. 수직 중앙 정렬은 잘 알려진...

기술 링크 정리 #1 – 2016/12/09

December 9, 2016 Dev

파이썬 관련 Python 3.6.0 RC1 Python3.6.0 Release Candidate1 에 대한 내용을 담고 있다. 에 가면 좀더 자세한 내용을 볼 수 있다. CPython 구현 개선에 대한 내용이 있는데, dict...

Bootstrap 그리드 시스템

January 1, 2014 Blog

Bootstrap3 Grid http://getbootstrap.com/css/#grid 참조. - .col-xs- : Phone ( < 768px ) - .col-sm- : Tablets ( ≥768px ) - .col-md- : Desktops ( ≥992px ) - .col-lg-...

구글 웹폰트를 빠르게 로드하는 팁 7가지

October 22, 2013

원문 : 7 Tips to Load Google Web Fonts Faster 어떻게 사이트에서 구글 폰트를 빠르게 로드할 수 있을까? 스타일되지 않거나 다른 기본 폰트가 로드된 다음에 번쩍거리며 구글 웹...