라벨이 font인 게시물 표시

[CSS] 구글 폰트 사용하기(Google Font)

이미지
프로그래밍 공부를 하면서 제일 신경쓰였던 부분이 저작권에 관련된 것이다. 포트폴리오로 웹사이트를 만드려고 이미지를 하나 가져와서 사용하려고해도 저작권에 걸리는게 아닌가 걱정이되었다. 저작권에 문제가 있는지 없는지 확실히 알고싶지만 처음 보는 용어들과 기호들 그리고 복잡한 규정? 들이 나를 힘들게 했다. 폰트(font)도 이미지, 아이콘 등 과 마찬가지로 저작권이 있다. 하지만 이러한 저작권을 덜? 신경쓰고 사용할 수 있는 구글 폰트에대해서 알게 되었다. 구글 폰트   https://fonts.google.com/ 사용법은 간단하다. 위에 해당 사이트로 접속해서 원하는 폰트를 바로 검색하고 아래의 사진에서 드래그한 해당부분의 소스코드를 문서에 복사하고 복사한 소스 밑에 사용규칙대로 사용하면 된다. 그리고 검색할때 카테고리에 국가별 등의 설정을 통해 조금 더 구체적으로 검색도 할 수 있다. 하지만 여기서 주의할점이 있다. 바로 저작권. 구글 폰트는 대부분이 무료이지만 아닌것들도 있다고 한다. 라이센스는 원하는 폰트를 검색한 후 아래와 같이 License 목록을 눌러서 확인할 수 있다. 아파치 라이센스 오픈 라이센스 위에서 보이는것과 같이 두개의 라이센스를 확인 할 수 있다. 이외에도 다른 라이센스가 있을 수 있다. 아파치 라이센스 아파치 라이선스(Apache License) 아파치 소프트웨어 재단에서 자체적으로 만든 소프트웨어에 대한 라이선스 규정이다. 아파치 2.0 라이선스는 누구나 해당 소프트웨어에서 파생된 프로그램을 제작할 수 있으며 저작권을 양도, 전송할 수 있는 라이선스 규정을 의미한다.  아파치 라이선스에 따르면 누구든 자유롭게 아파치 소프트웨어를 다운 받아 부분 혹은 전체를 개인적 혹은 상업적 목적으로 이용할 수 있으며 재배포시에는 원본 소스 코드 또는 수정한 소스 코드를 반드시 포함시켜야 하는 것은 아니고 아파치 라이선스, 버전 2.0을 포함시켜야 하며  아파치 소프트웨어 재단에 개발된 소프트웨어라는 것을 명확하게 밝혀야 한...

[CSS] 반응형 작업을 위한 폰트 단위 em / rem

[CSS] 반응형 작업을 위한 폰트 단위 em / rem  CSS에서 사용하는 단위는 여러가지가 있다.  많이들 사용하는 px에서부터 % / em / rem / vh / vw / vmin / vmax / ex / ch / 등이 있다. 호환성 문제도있고 요즘엔 쓰이지 않는 단위도 있으므로 대표적으로 많이 사용되는 3가지에대해 알아보자. px 절대값으로 사용 되는 단위이다. 많이 사용되지만 고정된 값이기 때문에 사용하기 편하고 이해하기도 쉽지만 반응형 웹사이트를 만들때에는 적절하지 않다. em 부모 태그의 영향을 받는 상대적인 길이다. 부모의 사이즈를 기준으로 하기 때문에 매우 유동적이고 파악하기 어렵다. 반응형 웹사이트에 사용된다. 하지만 권장되지 않는다. rem rem(root em)은 최상위 요소인 html요소에 비례하여 크기를 가지는 상대적인 길이다. 즉 html 요소에 font-size를 고정값으로 지정해 두면 그 비율에 따라 크기가 계산된다. 반응형 웹사이트에 가장 바람직한 단위이다. rem은 IE9 버전까지 지원이 된다. 반응형 홈페이지를 만들때 px로 작업을 하면 브레이크 포인트 마다 일일이 찾아서 px값을 수정해야 하는 엄청난 수고를 하게 된다. px은 절대값으로 사용 되는 단위이기 때문에 반응형 홈페이지를 작업할때는 불편하고 문제가 되기 때문에 em / rem 을 사용 하는 것이 좋다. 이 중에서 rem을 많이 사용하는데 rem은 html에서 font-size를 정의 해 놓으면 그 사이즈를 기준으로 계산이 되기 때문에 이해 하기 쉽고 사용하기 편리하다. html에서 사이즈를 지정하지 않으면 기본적으로 시스템 사이즈가 적용 된다. html의 기본 시스템 사이즈는 font-size: 16px; 이다. html { font-size:16px; } 에서 16px은 1rem 이다. 17px은 1.063rem이다. 이렇게 되면 계산하기 어렵기 때문에 rem을 계산해주는 사이트를 이용하거나 더 쉬운 방법은 html { font-size:62....