두부찌개 두부찌개

미디어쿼리는 반응형 웹을 제작할때 사용하는 매우 유용한 구문이다. 1. 사용법- 속성으로 구분@media only screen and (max-width:768px){.className{color:#000;}}- 파일로 구분 2. 미디어 특징- width : 화면 너비@media only screen and (min-width:768px) and (max-width:1024px) {} // 너비가 768px 이상이고 1024px이하일때 적용- height : 화면 높이 - aspect-ratio : 화면 가로세로 비율@media only screen and (aspect-ratio: 3/4) {} // 가로세로 비율이 3 : 4 일때 적용- device-width : 출력장치 너비 - device-hei..

1. 인쇄화면 전용 css 적용 화면에 표시되는 불필요한 영역을 숨긴 뒤에 인쇄하고 싶을 때, 인쇄 전용 css를 사용해야 할 때 아래와 같은 방법을 쓰면 된다. (1) print.css 프린트 전용 css 파일을 사용할 때 (2) 미디어 쿼리 사용 2. background(color/image) 브라우저 인쇄 디폴트 설정은 배경이미지를 포함하지 않고 인쇄된다.출력옵션으로 배경이미지 포함하여 인쇄 할 수 있지만 css로 배경이미지를 표시되게 하려면 아래와 같은 방법을 쓰면 된다. body{-webkit-print-color-adjust:exact;} 3. 인쇄 페이지 영역 분할 원하는 영역을 선택하여 인쇄 할 페이지를 나누고 싶을때 아래와 같은 방법을 쓰면 된다. (1) 나눌 영역을 div던, secti..

웹에서 그래프를 표현하는 것은 엄청 귀찮고 싫어하는 작업인데..css로 원형 그래프를 표현할 수 있는 라이브러리를 찾았다!거기다 무지 간편함!!!! 완전 사랑스럽ㅠㅠ Pure CSS Circular Percentage Barhttps://www.cssscript.com/pure-css-circular-percentage-bar/ 위 링크를 타고 들어가서 아래 다운로드 버튼 누르면 끝! 사용법은 다운로드 옆 Demo 버튼을 누르고 들어가면 예시로 만들어진 차트들이 있으니 참고해서 작업하면 됨.

a img{ -webkit-filter: grayscale(100%); filter: gray; } a:hover img{ -webkit-filter: grayscale(0%); filter: none; }

1. CSS 선택자(Selector) 정리 선택자(Selector) 의미 지원 안함 전체 선택자 * 모든 태그 선택 - 태그 선택자 E 태그명이 E인 특정 태그 선택 - 클래스 선택자 .className class 값이 className으로 지정된 요소 선택 - 아이디 선택자 #idName id 값이 idName으로 지정된 요소 선택 - 복합 선택자 E F E 요소의 자손인 F 요소 선택 - E > F E 요소의 자식인 F 요소 선택 IE 6 E + F E 요소 바로 다음에 있는 형제요소 F 선택 (E 와 F 사이에 다른요소가 존재하면 선택하지 않음.) IE 6 E ~ F E 요소가 앞에 존재하면 F 선택 (E 가 F 보다 먼저 등장하지 않으면 선택하지 않음.) IE 6 속성 선택자 E[attr] 'at..

초기화(Reset) 익스, 파폭, 오페라, 크롬, 사파리 등 여러 웹브라우저들이 있으며, 그들마다 CSS 기본값이 조금씩 다르다. 각기 다른 브라우저들로 동일한 화면을 보여주기 위해서 작업 전 CSS를 초기화 해야한다. 초기화 도구 1. Eric Meyer's 'Reset CSS' 2.0http://meyerweb.com/eric/tools/css/reset/ 2. normalize.csshttps://gist.github.com/demun/4110614 3. HTML5 Doctorhttp://html5doctor.com/html-5-reset-stylesheet/ CSS 파일 아래는 내가 자주쓰는 Reset.css @charset "utf-8"; /*reset*/ html, body, div, span..