css
![[코드 구문 강조] highlight.js를 활용하여 Code구문 강조하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdXCMnM%2FbtrcORqfteG%2FDdsVyzGKZORhrXtBY1O4w1%2Fimg.png)
[코드 구문 강조] highlight.js를 활용하여 Code구문 강조하기
highlight.js 활용방법 개요 많은 개발자들이 웹사이트에 글을 작성할때 코드 부분을 실제 에디터에서 보이는 것 처럼 강조하기 위한 방법으로 highlight.js을 사용합니다. highlight.js의 2가지 적용 방법 웹 검색을 해보시면, highlight.js를 간단히 적용하는 방법은 2가지로, 많이 나와있습니다. CDN js를 적용하는 방법과 직접 다운로드하여 업로드하는 방법이 있습니다. 1. CDN js를 이용하는 방법 CDNjs 2줄의 코드를 넣으면 초기 설정이 완료되는 간단한 방법입니다. 장점: 업로드 없이 간편하게 구축이 가능하다는 점 단점: 자주 쓰이는 22개의 언어만 강조되는데, 추가 언어를 적용하기 위해서는 직접 다운로드하여야 함. 온라인에선 상관없겠지만, 오프라인 환경에서는 적..
Favicon 파비콘 아이콘! 완벽하게 만드는 방법 & 적용방법
이번 포스팅에서는 일반적인 파비콘 설정보다 더 완벽한 파비콘 설정에 대해 알아볼께요 일반적으로 파비콘(favicon) 설정은 아래와 같이 웹 소스 최상단에 16x16 과 32x32의 이미지를 하나에 품은(multiple sizes) 혹은 단일 사이즈의 favicon.ico 파일을 올려놓는 것으로 끝납니다. Favicon 기본 설정방법 그러나 상기 방법은 초창기 파비콘 설정방법이고 세월이 흘러 현재는 다양한 디바이스와 브라우저를 지원하기 위해서 파비콘 설정을 아래와 같이 작업해주어야 합니다. Favicon 범용 설정방법 ※ 당연히 각 사이즈별 파일은 만들어줘야 합니다. 상기와 같이 설정하면 아이폰, 아이패드, 안드로이드, PC, 구글TV, 구글웹스토어, 오페라 브라우저등을 지원하게 되어 어디에서도 파비콘 ..
[CSS] 스타일 강제 적용 및 적용 예외
CSS를 다루다보면 하위 태그에서 일부 CSS가 적용이 안되기를 바라거나 특정 속성만 덮어쓰기를 하고 싶을 때가 있다. 하위 속성에서 특정 속성을 덮어쓰기 하고 싶다면 !important로 강제 적용을 해주고 하위 속성에 CSS를 물려주기 싫다면 not 선택자로 예외처리해주자! 1. CSS 강제 적용 p { color: #black } .example { color: #white !important } p태그의 글자색을 black으로 지정했지만 example 클래스를 물려받은 곳은 글자색이 white일 것이다! CSS를 사용하는 경우에 우선순위에 의하여 내가 적용한 폰트가 산발적으로 적용되는 경우가 있다. 이를 해결하기 위하여 강제로 전체 적용하는 방법을 알아보자 * { font-family: "Nanu..
[CSS] ::before / ::after
이번 포스팅에서는 추가 컨텐트를 삽입하기 위해서 사용되는 ::before과 ::after에 대해서 알아보겠습니다. Pseudo Element ::before과 ::after는 CSS에서 소위 pseudo element라고 하는데요. 일반적인 CSS 선택자(selector)로는 지정할 수 없는 미세한 영역을 선택하기 위해서 사용됩니다. 본 포스팅에서 다룰 ::before과 ::after뿐만 아니라 ::first-letter, ::first-line, ::selection, ::marker 등 CSS에는 다양한 pseudo element가 있습니다. pseudo element는 선택자 뒤에 붙여주는데 CSS3 문법 상 : 기호를 사용하는 pseudo class와 구분해주기 위해서 원칙적으로는 :: 기호를 사..