포스트 페이지 기능 모음
포스팅 스타일 관련
포스트에서 독백
독백 내용을 쓸 수 있음
포스트 맨 밑에 Reference 달고 싶을때 아래 포맷 사용
어쩌구 저쩌구 포스트 내용 끝
코드 블록 접기/펴기
이렇게 하면 접고 펴기 버튼을 달 수 있고(code-reducible)
초기 상태로 접어 놓을지 펴 놓을지 지정할 수 있음(code-reduce)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
MathJax
Syntax
달러 두개를 내용 앞뒤로 감싸서 표현
$$내용(MathJax Syntax)$$
주의
inline expression은 <span>으로 감싸야 이상한 y scroll bar가 생기지 않는다.
논문 번역 포맷
이런식으로
또는
논문 해석문(인라인)은
이런식으로
이미지 관련
사이즈가 큰 이미지 사이즈 조절
Kramdown 인라인 속성문 {:style=""}을 인라인 이미지 옆에 붙여서 작성
그래야 <img> 태그에 style이 반영되며, 만약 인라인 속성문을 다음 라인에 작성하면
<p><img></img></p> 구성되어 <img> 태그의 부모 태그인 <p>에 style이 반영됨
이미지 Magnific-Popup과 타이틀
(클릭해보기)
이미지 밑에 보충 설명이나 출처
특별 출연한 귀여운 고양이의 이름은 까무입니다 😆
이미지의 그림자 테두리
이미지 배경색이 흰색이면 블로그 배경색도 흰색이라 구분이 안간다 그럴때 사용.
{:style="max-width: 700px;" class="img-shadow"}
Kramdown(Markdown) 관련
Markdown Alias Link
글 중에 아래처럼 링크 넣고
포스트 맨 밑에 아래 처럼 링크 Alias 내용 기록
Markdown Footnote 주석
이렇게 쓰고 masthead1 포스트 맨아래에 주석 내용 입력
주석 키워드 ([]) 안에 띄어쓰기 없어야함
Javascript 관련
특정 조건에서만 작동하는 JS
아래와 같이 감춰진 메모 클래스를 selector로 놓고 data-type 값에 따라 조건 분기 하기
Layout 관련
floating 요소의 크기를 고려하는 wrapper 생성 방법
wrapper (<div> 등) 하위에 모든 요소가 float 속성을 가지고 있으면 wrapper의 높이가 0이 되는 문제가 있음
https://stackoverflow.com/questions/2073087/wrapper-question-when-containing-floating-divs
- overflow: auto;
-
masthead: 돛대의 꼭대기, 신문 1면의 발행사 이름을 의미한다. 즉, Topbar와 크게 다르지 않은 의미이다. ↩