2019년 12월 12일
list-style에 bold 처리하기
ol, li 태그를 사용하면 옆에 숫자가 기본적으로 나타나는데, 해당 숫자에 bold 처리하는 방법입니다.
단순 font-weight 처리 방법
기본적으로 list-style에 bold 처리를 하려면 ol 태그에 적용하면 됩니다.
이후 li 내 태그를 생성하여 normal을 적용합니다.
<ol>
<li>
<p>test</p>
</li>
<li>
<p>test2</p>
</li>
<li>not work</li>
</ol>
<style>
ol {
font-weight: bold;
}
ol li p {
font-weight: normal;
}
</style>
위 방법의 문제점은 마지막 li처럼 태그 적용이 안되어있으면 같이 bold 처리가 됩니다.
count-increment
count-increment 방법을 사용하여 list-style을 사용하지 않고 카운터를 작성할 수 있습니다.
<ol>
<li>
<p>test</p>
</li>
<li>
<p>test2</p>
</li>
<li>not work</li>
</ol>
<style>
ol {
margin: 0 0 1.5em;
padding: 0;
counter-reset: item;
}
ol > li {
margin: 0;
padding: 0 0 0 2em;
text-indent: -2em;
list-style-type: none;
counter-increment: item;
}
ol > li:before {
display: inline-block;
width: 1em;
padding-right: 0.5em;
font-weight: bold;
text-align: right;
content: counter(item) ".";
}
</style>
counter를 사용하여 li:before에 숫자를 직접 작성하는 방법입니다.
단점으로는 list-style처럼 다양한 스타일이 아닌 숫자로만 제공합니다.
-
2019년 12월 19일
Jekyll Google Analytics 연동하기
Google에서 제공하는 Google Analytics라는 툴을 사용하여 웹 로그를 분석할 수 있습니다. Google Analytics는 앱 또는 웹의 이용자를 분석하여 통계로 제공해주고 있으며, 예로들어 방문 페이지, 이탈률, 세션 시간 등이 있습니다. 또한 Google Ads, Google Search Console 등 관련 서비스와 통합하여 확인할 수 있습니다. ## Google Analytics 설정 우선 [Google Analytics](https://analytics.google.com/)에 접속하여서 계정을 생성합니다. 계정은 여러개 생성이 가능하며, '속성 및 앱'에 페이지 별로 생성이 가능합니다. 저는 Blog라는 계정 하위에 Tistory, Github Page의 링크를 별도로 등록했습니다. 등록이 완료되면 `추적 코드`가 나타나게 되며, 해당 페이지에서 `추적 ID, 태그(js)`를 제공하고 있습니다. > `추적 코드` 탭이 나타나지 않는다면, `좌측 하단 관리 -> 속성 -> 추적정보 -> 추적코드`로 이동합니다. ## Jekyll 설정 위에서 나온 js를 복붙하셔도 상관 없지만, 저같은 경우에 `_config.yml`에 추적 ID 값을 넣었습니다. ```yml google_analytics_id: 추적 ID ``` 그리고 analytics 파일을 생성하여 Google Analytics에서 제공하는 js를 삽입하고 추적 ID 값을 불러옵니다. 아래 코드는 추적 ID 값을 \_config에서 가져오도록 수정한 코드입니다. ```html {{ "{% if site.google_analytics_id...
-
2019년 12월 12일
Nextjs에서 styled-components 깜빡임 현상
Nextjs에서 styled-components (이하 SC) 사용하면 CSS 로딩이 늦게 되어 발생하는 깜빡임 현상이 발생합니다. 개인적인 생각으로는 HTML은 SSR로 미리 렌더링 시켜 보내지만 SC의 스타일들은 사용자가 접속 시 변환된다고 생각합니다. ## css를 미리 적용할 수 있을까? [참고 자료](https://github.com/zeit/next.js/blob/master/examples/with-styled-components/pages/_document.js) Next.js와 SC를 검색한 결과, ServerStyleSheet라는 함수를 SC에서 제공하고 있었고 Next.js에서 샘플 코드를 제공하고 있었습니다. 해당 페이지에서 제공하는 코드는 다음과 같습니다. ```jsx import Document from "next/document"; import { ServerStyleSheet } from "styled-components"; export default class MyDocument extends Document { static async getInitialProps(ctx) { const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { ctx.renderPage = () => originalRenderPage({ enhanceApp: (App) => (props) => sheet.collectStyles(), }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( {initialProps.styles} {sheet.getStyleElement()} ), }; } finally { sheet.seal(); } } } ``` > `_document.js 란?` HTML Document를 관리하는 부분으로 이 외에도 `'_app.js, _error.js'` 등이 있습니다. ## 위 코드에서 에러가 나신다면..? 시간이 지나고 작성하는 글이라 정확하게 기억은 안나지만, 위에 코드를...
-
2019년 12월 12일
Jekyll Disqus 연동하기
Jekyll에서 Disqus를 연동하는 방법을 살펴보도록 하겠습니다. Disqus 설정 Disqus 홈페이지에 접속해서 회원가입을 진행합니다. 로그인 후 상단에 Get Start -> I want to install Disqus on my site를 선택합니다. 정보를 입력 후 확인을 누른 후 플랫폼 선택에서 jekyll를 선택합니다. ( 만약 화면이 나타나지 않는 경우, admin -> Settings -> Installation ) 설명 2번에 있는 Universal Embed Code 링크 클릭 홈페이지 첫 동영상 밑에 있는 1번의 Disqus to load 코드를 post Layout에 추가합니다. 중간 주석 부분에는 Disqus thread가 중복되어 생성되는 것을 방지하기 위해 page_url, identifier를 추가하라고 적혀있습니다. 해당 부분은 아래와 같이 site 정보를 설정해주시면 됩니다. this.page.url = "https://minhyeong-jang.github.io/2019/12/12/jekyll-disqus"; // minhyeong-jang.github.com/2019/12/... this.page.identifier = "/2019/12/12/jekyll-disqus"; // /2019/12/... 홈페이지에서 두번째 동영상 밑에 있는 count.js 스크립트를 body 맨 아래 선언하면 댓글 수가 체크됩니다. 적용 후 새로고침 하시면 로컬에서도 정상적으로 Disqus가 보이게 됩니다.