px값은 브라우저에서 절대값으로 인식해 1px은 항상 정확히 1px로 표시되는 반면 em과 rem은 가변 단위로서, 디자인에 설정된 폰트 크기에 따라 브라우저에 의해 픽셀값으로 변환된다.


ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px}


1. rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기가 기준이 되어, 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 px로 변환된 값이다. 

변환된 픽셀 크기는 페이지 최상위(root)요소, html 요소이 폰트 크기가 기준이 된다. 최상위 요소의 폰트 크기에다 rem 단위로 지정한 숫자를 곱한 값이 변환된 값이다.


ex) html{font-size: 16px; padding-top: 1em;} -> html{font-size: 16px; padding-top: 16px;}


2. em

스타일을 지정한 요소가 기준이 되어 지정한 요소의 폰트 크기를 곱한 값이 px로 변환된 값이다.


ex) .emClass{font-size: 16px; padding-top: 1em;} -> .emClass{font-size: 16px; padding-top: 16px;}


*스타일 상속

em 단위가 상위 요소의 폰트 크기와 직접 연관되어 있다고 잘못 알려져 있다. W3 명세서에 의하면, 상위 요소가 아닌 실제 사용된 요소의 폰트 크기와 직접 연관되어 있다. 상위 요소의 폰트 크기가 em값에 영향을 줄 수는 있지만, 그것은 오로지 스타일 상속 때문이다.

모든 요소가 자동으로 상위 요소로부터 폰트 크기를 상속받기 때문에 em 단위로 작업을 할 땐 상속과 관련해서 문제가 있을 수 있다. 상속의 영향을 뒤엎는 방법은 오로지 폰트 크기를 px 혹은 vw와 같이 상속에 영향을 받지 않는 단위를 써서 일일이 지정해 주어야 한다.


ex)

html               -font-size: 16px

   .wrapper       -font-size: 1.25em;           //1.25 X 16 =20 font-size: 20px;

      .box          -padding: 1.5em;             //1.5  X 20 =30 padding: 30px


html               -font-size: 16px

   .wrapper       -font-size: 1.25em;          //1.25 X 16 =20 font-size: 20px;

      .box          -font-size: 1.2em;           //1.2  X 20 =24 font-size: 24px;

                     -padding: 1.5em;            //1.5  X 24 =36 padding: 36px



em 단위는 상위 요소와는 상관없이 실제 사용된 요소의 폰트 크기에 비례 하다.


ex)

html               -font-size: 16px

   .wrapper       -font-size: 1.25em;          //1.25 X 16 =20 font-size: 20px;

      .box          -font-size: 14px;                                              font-size: 14px;

                     -padding: 1.5em;            //1.5  X 14 =21 padding: 21px



3. 브라우저 설정


기본적으로 브라우저의 폰트 크기는 보통 16px로 설정되어 있지만, 사용자에 의해 최소 9px부터 72px까지 변경될 수 있다. html 요소의 폰트 크기는 고정 을 명시적으로 지정하여 덮어씌우지 않으면 브라우저에 설정된 값을 상속받게 된다.

html 요소에 em 기반의 폰트 크기를 지정했다면, 변환된 픽셀값은 브라우저에 지정된 폰트 크기의 배수가 된다. 

html 요소가 font-size: 1.25em 일 경우 최상위 요소의 폰트 크기는 브라우저에 설정된 폰트 크기의 1.25배 이다.

브라우저 폰트 크기 설정이 16px일 경우 최상위 요소의 폰트 크기는 20px이다.

계산 1.25 X 16 = 20.



4. em 과 rem 차이점

* rem

페이지 최상위(root)요소, 즉 html 요소의 폰트 크기에 따라 결정되고 이 폰트 크기는 상속에 영향을 받지 않는 절대 단위를 지정해서 직접 덮어씌우지 않았다면, 브라우저에 설정된 폰트 크기를 그대로 상속 받게 된다.

*em

사용된 요소의 폰트 크기에 따라 결정되고 이 폰트 크기 또한 상속에 영향을 받지 않는 절대 단위를 가지고 명시적으로 덮어 씌우지 않았다면, 상위 요소로부터 상속의 영향을 받는다.


출처 : https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

' > HTML&CSS' 카테고리의 다른 글

CSS 단위 em과 rem  (0) 2018.06.11
페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09

*페이스북 공유하기


a링크에 ( http://www.facebook.com/sharer/sharer.php?u=공유할링크 ) 넣어주면 됨. 

공유시 들어갈 요약정보는 메타 태그에서 설정할수 있음.


ex)

-html

<meta property="og:type" content="website" />

<meta property="og:title" content="제목" />

<meta property="og:url" content="사이트 url" />

<meta property="og:description" content="내용 설명" />

<meta property="og:image" content="이미지 경로" />


<a href="javascript:shareFB();" class="fb" title="facebook 공유">facebook</a>


-script

function shareFB()

{

   window.open('http://www.facebook.com/sharer/sharer.php?u=사이트 url');

}


*** 메타태그에 설정한 내용이 잘못되어 수정하여도 수정된 내용이 페이스북 공유 기능에서 바로 적용되지 않을 수 있다.

이때 공유 디버거 (https://developers.facebook.com/tools/debug/) 에 접속하여 해당 페이지를 다시 디버깅하면 바로 적용이 된다.

' > HTML&CSS' 카테고리의 다른 글

CSS 단위 em과 rem  (0) 2018.06.11
페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09

미디어쿼리는 반응형 웹을 제작할때 사용하는 매우 유용한 구문이다.



1. 사용법

- 속성으로 구분

@media only screen and (max-width:768px)

{

.className{color:#000;}

}

- 파일로 구분

<link reel="stylesheet" href="mobile.css" media="screen and (max-width:768px)" />


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-height : 출력장치 높이


- device-aspect-ratio : 출력장치 가로세로 비율


- orientation : 화면이 가로모드인지 세로모드인지

 @media only screen and (orientation : landscape) {} // 화면이 가로모드 일때 적용

 @media only screen and (orientation : portrait) {} // 화면이 세로모드 일때 적용

예) 아이패드 전용 css

@media only screen and (min-device-width:768px) and (max-device-width:1024px) and (device-aspect-ratio:3/4) 

{

css 구문..

}


3. 모바일 기기별 해상도 참고 사이트


http://screensiz.es/phone

http://iosres.com/



' > HTML&CSS' 카테고리의 다른 글

CSS 단위 em과 rem  (0) 2018.06.11
페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09


1. 인쇄화면 전용 css 적용


화면에 표시되는 불필요한 영역을 숨긴 뒤에 인쇄하고 싶을 때, 인쇄 전용 css를 사용해야 할 때 아래와 같은 방법을 쓰면 된다.


(1) print.css 프린트 전용 css 파일을 사용할 때

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

(2) 미디어 쿼리 사용

<style>

      @media print {

         /* 내용입력 */

   .print-area .classname{display:none;}

      }

</style>


2. background(color/image)


브라우저 인쇄 디폴트 설정은 배경이미지를 포함하지 않고 인쇄된다.

출력옵션으로 배경이미지 포함하여 인쇄 할 수 있지만 css로 배경이미지를 표시되게 하려면 아래와 같은 방법을 쓰면 된다.


body{-webkit-print-color-adjust:exact;}



3. 인쇄 페이지 영역 분할


원하는 영역을 선택하여 인쇄 할 페이지를 나누고 싶을때 아래와 같은 방법을 쓰면 된다.



(1) 나눌 영역을 div던, section이던, acrticle이던... 태그로 나누어 영역을 잡고,

<div class="classname">1 페이지</div>

<div class="classname">2 페이지</div>

<div class="classname">3 페이지</div>

.....


(2) print.css 에 css 구문 추가

.classname{page-break-before:always;}


' > HTML&CSS' 카테고리의 다른 글

페이스북 공유하기  (0) 2018.05.24
CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (1) 2017.11.16

웹에서 그래프를 표현하는 것은 엄청 귀찮고 싫어하는 작업인데..

css로 원형 그래프를 표현할 수 있는 라이브러리를 찾았다!

거기다 무지 간편함!!!! 완전 사랑스럽ㅠㅠ



Pure CSS Circular Percentage Bar

https://www.cssscript.com/pure-css-circular-percentage-bar/


위 링크를 타고 들어가서 아래 다운로드 버튼 누르면 끝! 

사용법은 다운로드 옆 Demo 버튼을 누르고 들어가면 예시로 만들어진 차트들이 있으니 참고해서 작업하면 됨.



' > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (1) 2017.11.16
CSS 초기화  (2) 2017.11.14
a img{

-webkit-filter: grayscale(100%);
filter: gray;

}

 

a:hover img{

-webkit-filter: grayscale(0%);
filter: none;

}



' > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (1) 2017.11.16
CSS 초기화  (2) 2017.11.14

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] 'attr' 속성이 포함된 요소 E 선택

 IE 6 

 E[attr="val"]

 'attr' 속성의 값이 'val'과 일치하는 요소 E 선택

 IE 6 

 E[attr~="val"]

 'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택

 (공백으로 분리된 값이 일치해야함)

 IE 6 

 E[attr^="val"]

 'attr' 속성의 값이 'val'으로 시작하는 요소 E를 선택 

 IE 6 

 E[attr$="val"] 'attr' 속성의 값이 'val'으로 끝나는 요소 E를 선택 

 IE 6

 E[attr*="val"]

 'attr' 속성의 값에 'val'이 포함되는 요소 E를 선택

 IE 6

 E[attr|="val"]

 'attr' 속성의 값이 정확하게 'val' 이거나

 'val-' 으로 시작되는 요소 E 선택

 IE 6

 가상 클래스 선택자 E::link

 방문하지 않은 링크 E를 선택

 -

 E::visited 방문한 링크 E를 선택

 -

 E::active

 E요소에 마우스 클릭 또는 키보드 엔터가 눌린 동안 E를 선택

 -

 E::hover E요소에 마우스가 올라가 있는 동안 E를 선택

 -

 E::focus

 E요소에 포커스가 머물러 있는 동안 E를 선택

 -

 E::root

 문서의 최상위 요소(html)를 선택

 IE 6,7,8

 E::nth-child(n)

 앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::nth-last-child(n)

 뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::nth-of-type(n)

 E 요소 중 앞으로부터 순서가 일치하는 요소 E 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::nth-last-of-type(n)

 E 요소 중 끝으로부터 순서가 일치하는 E 요소를 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::first-child

 첫 번째 등장하는 요소가 E 라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6

 E::last-child

 마지막에 등장하는 요소가 E 라면 선택

 (E 아닌 요소의 순서가 계산에 포함)

 IE 6,7,8

 E::first-of-type

 E 요소 중 첫번째 E를 선택

 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::last-of-type

 E 요소 중 마지막 E를 선택
 (E 요소의 순서만 계산에 포함)

 IE 6,7,8

 E::only-child E 요소가 유일한 자식이면 선택
 (E 아닌 요소가 하나라도 포함되면 선택하지 않음)

 IE 6,7,8

 E::only-of-type E 요소가 유일한 타입이면 선택
 (E 아닌 요소가 포함되어도 E 타입이 유일하면 선택)

 IE 6,7,8

 E::empty

 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택

 IE 6,7,8

 언어 선택자

 E::lang(ko)

 HTML lang 속성의 값이 'ko'으로 지정된 요소 선택

 IE 6,7

 부정 선택자

 E::not(S)

 S가 아닌 E 요소를 선택

 IE 6,7,8

 목적 선택자 E::target

 E의 url이 요청되면 선택

 (E는 ID가 지정되어 있어야함)

 IE 6,7,8

 상태 선택자

 E::enabled

 사용 가능한 폼 컨트롤 (input, textarea, button) E를 선택

 IE 6,7,8

 E::disabled

 사용 불가능한 폼 컨트롤 (input, textarea,button) E를 선택

 IE 6,7,8

 E::checked

 선택된 폼 컨트롤 (input checked="checked") 을 선택

 IE 6,7,8

 가상 엘리먼트 선택자

 E::first-line

 E 요소의 첫 번째 라인을 선택

 IE 6

 E::first-letter

 E 요소의 첫 번째 문자를 선택

 IE 6

 E::before E 요소의 시작 시점에 생성된 요소를 선택

 IE 6,7

 E::after

 E 요소의 끝 지점에 생성된 요소를 선택

 IE 6,7



2. 선택자(Selector) 우선순위


!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]



출처 : http://www.nextree.co.kr/p8468/

' > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (1) 2017.11.16
CSS 초기화  (2) 2017.11.14
  1. 겨미 2017.11.16 12:31 신고

    좋은자료 감사해요~

초기화(Reset)


익스, 파폭, 오페라, 크롬, 사파리 등 여러 웹브라우저들이 있으며, 그들마다 CSS 기본값이 조금씩 다르다. 각기 다른 브라우저들로 동일한 화면을 보여주기 위해서 작업 전 CSS를 초기화 해야한다.



초기화 도구


1. Eric Meyer's 'Reset CSS' 2.0

http://meyerweb.com/eric/tools/css/reset/


2. normalize.css

https://gist.github.com/demun/4110614


3. HTML5 Doctor

http://html5doctor.com/html-5-reset-stylesheet/



CSS 파일


아래는 내가 자주쓰는 Reset.css

@charset "utf-8";

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin:0; 
	padding:0; 
	border:0; 
	font:inherit; 
	vertical-align:baseline; 
	font-weight:normal;
}
fieldset {
	border:0;
}
address,em {
	font-style:normal; 
	font-weight:normal;
}
strong {
	font-weight:bold;
}
input, button, select {
	font-family:inherit; 
	margin:0; 
	padding:0; 
	vertical-align:middle; 
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
	display:block;
}
ol, ul, li {
	list-style:none;
}
button {
	margin:0; 
	padding:0; 
	border:0; 
	background-color:transparent; 
	-webkit-appearance:button; 
	cursor:pointer;
}
a {
	text-decoration:none; 
	color:#666;
}
img {
	display:block;
	border:none;
}
button:focus,
input:focus,
a:focus {
	outline:thin dotted; 
	outline:none; 
	outline-offset:-2px;
}
[tabindex="-1"]:focus {
	outline:none;
}

' > HTML&CSS' 카테고리의 다른 글

CSS 디바이스별 미디어 쿼리  (0) 2018.03.15
CSS 인쇄화면 설정  (0) 2018.03.14
CSS 간단한 도넛 차트  (0) 2018.02.09
CSS 이미지 흑백처리  (0) 2018.02.09
CSS 선택자(Selector) 정리  (1) 2017.11.16
CSS 초기화  (2) 2017.11.14
  1. 2017.11.14 16:15 신고

    좋은정보 감사요

+ Recent posts