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. 간편하게 변환시켜주는 홈페이지

 (1) 아래 링크로 들어가서 시키는 대로 하면 됨.


https://convertio.co/kr/jpg-ico/



2. 포토샵으로 파일 변환

 (1) 32비트인지 64비트인지 확인하고 아래 파일을 다운로드를 받고,

 (2) C:\Program Files\Adobe\Adobe Photoshop CC 2018\Required\Plug-ins\File Formats 경로에 넣는다.

 (3) 포토샵을 실행하면 ico가 추가되었음을 확인할수있다.


ICOFormat.8bi

ICOFormat64.8bi


' > etc.' 카테고리의 다른 글

ICO 파일 변환  (0) 2018.05.10
유튜브 동영상 퍼오기  (0) 2018.03.20
소스트리 무료 디자인 모음 사이트  (0) 2018.02.13
간단한 웹 폰트 변환 사이트  (2) 2017.11.14

+ Recent posts

티스토리 툴바