CSS 썸네일형 리스트형 background-color 프린트하기 문제 웹페이지를 프린트하는데 background-color, color 속성이 적용되지 않고 무시됐습니다. 상황 프린트 시 레이아웃 고정을 위해 @media print 를 사용하는 전용 스타일시트를 사용중이었습니다. 시도1 브라우저의 프린트 옵션에서, background graphics 를 체크해 프린트. 실패. IE 역시 비슷한 옵션이 존재했지만 IE에서도 실패. 시도2 검색결과, 아래 CSS를 통해 해결할 수 있다는 대부분의 글을 확인했지만 적용되지 않았습니다. (크롬 사용) @media print{ .target { -webkit-print-color-adjust: exact !important; } } 시도3 background-color 속성을 background로 변경하면 적용된다는 글을 확인.. position sticky! - 순수 CSS 상단고정 네비게이션 첫 화면에서는 네비게이션 메뉴가 화면 중간에 존재하다가, 스크롤을 내리면 화면 최상단에 딱 달라붙어 따라오는 경우를 보셨을 겁니다. 아래와 같은 경우인데요, 한 번 직접 스크롤 해 보세요. 위 기능을 구현하려면 자바스크립트로 스크롤할때마다 해당 엘리먼트의 offset 좌표와 스크롤위치를 비교합니다. 어려운 것은 아니지만 굉장히 거추장스러운 작업인데요. CSS의 position 에 sticky 라는 것을 사용하면 단 2줄로 구현할 수 있습니다. 자바스크립트를 단 한 줄도 쓰지 않구요. position: sticky; top: 0; 아래에서 테스트 해보세요. 아마 제대로 작동하지 않는 분들도 계실 텐데요 (IE는 아마 jsFiddle 자체가 작동하지 않으실 겁니다.) caniuse.com 을 보면 IE 에서.. 마우스 드래그, 블럭시 스타일 변경하기- ::selection 텍스트를 드래그하여 블럭을 씌울 때 스타일을 변경하기 위한, CSS의 pseudo-element 중 ::selection 선택자에 대해 알아보자. 사용심플하다. 직접 드래그해보자.모질라 계열을 위해 ::-moz-selection 또한 사용하자.속성모든 속성을 사용해 스타일이 가능하진 않고, 아래의 속성들만 사용할 수 있다.colorbackground-colorcursorcaret-coloroutlinetext-decoration 및 관련 속성text-emphasis-colortext-shadow주의단순한 미적 이유로 selected 텍스트를 스타일할 때 웹 접근성을 고려해야 한다. 시력이 나쁜 사람도 블럭을 씌웠다고 인식할 만큼의 명암비가 필요하다. (아마도) 좋지 않은 예.브라우저 지원IE는 8이하에서.. 언제 float / inline-block / table / flex 를 사용하는가 I base most of my core layout choices first on browser scope, then by requirement. When I say “browser scope” what I really mean is, “oldest version of IE I have to support”:Showing things side by side:IE7: floats and clearsIE8–9: inline-block, floats, clearsIE10+ flexVertical Centering:IE7–9: inline-table; table-cell; tableIE10+: flexGetting stuff to take up horizontal space based on the conten.. CSS : cubic-bezier란? cubic-bezier란?cubic-bezier() function은 CSS에서 transition 속성 혹은 transition-timing-function 속성에서 전환 시작과 끝까지의 효과를 제어하는데 쓰인다. #target{transition: all 0.5s cubic-bezier(0.25, 0.25, 0.75, 0.75);}Colored by Color Scriptercs그래서 그게 뭔데?베지어 곡선(bezier curves) 이라는 것이 있다. 아래에 위키피디아 소개를 번역해봤다. 베지어 곡선은 부드러운 곡선을 모델링하기 위해 컴퓨터 그래픽에서 널리 사용된다. 커브가 컨트롤 포인트의 볼록한 선체에 완전히 포함되어 있기 때문에 점을 그래픽으로 표시하고 직관적으로 커브를 조작하는 데 사용할 수 .. CSS : box-sizing 속성 CSS : box-sizing 속성요즘 만들어진 웹페이지를 돌아다니며 요소검사를 해보면 아래 코드를 어렵지 않게 찾을 수 있을 것이다.*, *:before, *:after { box-sizing: border-box;}cs정의box-sizing 속성은 적용되는 요소에 대해 box model이 처리되는 방법을 제어한다. 즉 요소의 너비와 높이를 계산하는 방법을 정의한다. 한 단계 더 풀어쓰면 width와 height에 padding과 border를 포함할지 여부를 결정하는 속성이다.Width & Height일반적으로 요소의 Width와 Height를 계산하려면 아래와 같은 과정을 거친다. Widthwidth + padding-left + padding-right + border-left + border-r.. CSS 가운데정렬 : 완벽 가이드 Centering in CSS: A Complete Guide 목차 수평 중앙정렬 Horizontally Centering 인라인 엘리먼트 블록 엘리먼트 하나 이상의 엘리먼트 수직 중앙정렬 Vertically Centergin 인라인 엘리먼트 single line multiple lines 블록 엘리먼트 높이를 아는 경우 높이를 모르는 경우 flexbox 둘 다 Both Horizontally and Vertically Centering 너비와 높이가 고정된 경우 너비와 높이를 모르는 경우 flexbox grid 항상 검색하는게 성질나서 저장을 위한 번역글. 의미없는 사족은 뺐습니다.원글은 이곳입니다. 수평 Horizontally Inline 혹은 Inline-* 레벨의 엘리먼트인가요? (텍스트 혹은 링.. 이전 1 다음
