반응형 HTML+CSS34 웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서에 구글 폰트(Google Fonts) 적용하기 웹문서를 만들다 보면 웹문서용으로 사용할 '웹폰트(web fonts)'라는 것이 필요합니다. 물론 웹폰트를 적용하지 않더라도, Windows나 Mac 등의 시스템에서 사용하고 있는 기본 폰트를 통해 글자들이 보여질 수는 있겠지만, 디자인 의도가 적용된 폰트를 제대로 반영하지 못하게 됩니다. CSS에서 세팅한 대로 적절한 폰트가 웹문서에 적용이 되지 않는 경우에는, 폰트가 차지하는 크기가 달라서 문단의 배치 등에도 좋지 않은 영향을 받을 수도 있습니다. 이처럼 웹문서 작성 시에는 분위기와 잘 어울리는 폰트를 사용하는 게 중요할 텐데요, 구글 폰트를 사용하게 되면 이와 같은 이슈를 아주 간단하게 해결할 수 있기 때문에, 거의 전세계의 웹 제작자들이 사용하.. 2023. 1. 31. 알면 득이 되지만 잘 사용하지 않는 inline styles 그리고 !important inline styles 그리고 !important CSS로 스타일링을 하는 방법에는 크게 3가지가 있습니다. 별도의 CSS파일을 만들어서 html 문서에 태그를 사용해서 불러다가 사용하는 방법이 가장 일반적이고, html 문서의 head 태그 안에다가 태그를 이용해서 직접 작성하는 방법도 간간히 사용되고, 태그가 적용되는 라인에 같이 사용하는(inline) 방법도 존재합니다. 가장 강력한 것, 즉 가장 우선 순위가 높은 방법은 인라인으로 스타일을 적용하는 방법이긴 한데, 실무에서는 가장 최후에 사용하는 방법으로 자리잡고 있습니다. 왜냐하면, 스타일을 유지보수 해야하는 경우라면 웹문서를 직접 열어야 해서 가장 번거롭기 때문이죠. 그리고 웹문서를 위한 코딩은 시멘틱(semantic) 하게 작성되는 것을 표.. 2023. 1. 22. CSS 상속(Inheritance)에 대하여 CSS 상속이란? CSS 상속이란 구체적으로 스타일을 지정하지 않은 하위의 엘리먼트 요소들에 대해, 상위 항목(부모 엘리먼트)에 지정된 스타일이 적용되는 형태를 말합니다. 마치 자식이 가만이 있어도, 부모로부터 유전자 또는 재산(?)을 상속 받는 것과 비슷하기 때문에, 코딩의 세계에서는 상속(Inheritance)라는 용어를 사용하고 있습니다. 이번 포스팅에서는 CSS 상속의 동작 형태에 대해서 살펴보고 정리를 해둡니다. 상속은 상위요소(부모, 조상)로부터 받는다 인간세계나 코딩의 세계 둘 다 동일합니다. 상속은 자식 세대가 아니라, 부모세대로부터 받게 됩니다. 예제 코드는 다음과 같이 간단하게 만들어보았습니다. Hello 즐코딩 즐거운 코딩생활, 즐코딩 Lorem ipsum, dolor sit amet.. 2023. 1. 21. 부트스트랩에서 integrity와 crossorigin은 무엇일까? 부트스트랩을 사용할 때 생기는 integrity와 crossorigin은 도대체 무엇? Bootstrap을 사용하기 위해 getbootstrap.com에 접속해서 습관적으로 부트스트랩 링크를 복사해서 붙여 넣곤합니다. 매번 아무 생각없이 붙여 넣기도 했는데, 가만 살펴 보면 integrity와 crossorigin이라는 속성이 매번 따라 붙습니다. 필요없는데 괜히 생기는 건 아닐테고... 이 참에 한번 파보기로 합니다. integrity = 진실성? corssorigin = 원산지 교차? integrity라는 단어를 영어 사전에서 찾아보면 '진실성'이라고 나옵니다. 우리가 아는 단어로는 honesty와 비슷한 의미입니다. cross origin은 단어 그대로 origin(원산지, 기원)이 cross(교차.. 2023. 1. 20. 이전 1 2 3 4 5 6 7 ··· 9 다음 반응형
