마크다운 에디터 MOU에서 CSS 수정하기
- 블로그 관련 정보
- 2014. 3. 20.
반응형
마크다운 에디터 MOU에서 CSS 수정하기
마크다운 에디터인 MOU에서 블로그 포스팅용으로 글을 작성하다보면, MOU의 기본기능인 미리보기 기능을 통해 자신이 쓴 글이 어떤식으로 보여질지 미리 확인해 볼 수 있다는 장점이 있습니다. 하지만 콘텐츠 디자인은 최종적인 스타일시트(CSS)를 따르기 때문에, 블로그에 적용되어 있는 CSS와 MOU에 적용되어 있는 CSS가 상이할 경우에는 다른 모습으로 보여지기 때문에, 조금의 혼란이 있을 수 있고 미리보기 기능의 의미가 많이 퇴색되기도 합니다. 그래서 MOU에서는 CSS를 사용자가 커스텀하여 사용할 수 있는 기능을 제공 중입니다. 오늘은 마크다운 에디터 MOU에서 CSS를 개인의 입맛에 알맞게 수정하여 사용하는 방법을 소개해드립니다.
1. 설정 - Preferences로 들어갑니다. ▼
2. CSS 탭을 선택하여 Use CSS를 확인한다음, 옆의 edit 버튼을 클릭합니다. ▼
3. 나오는 파인더 창에서 CSS 수정 작업을 진행합니다. ▼
기본적으로 포함되어 있는 CSS가 이미 몇개 존재하고 있습니다. 기존에 있는 CSS를 그대로 사용하여도 아무런 관계가 없지만, 블로그 포스트 내용과 동일한 콘텐츠를 미리보기 하기 위해서는 적절한 수정이 필요합니다. 방법은 여러가지가 있을텐데, 가장 쉬운 방법으로는 별도의 CSS를 하나 더 생성하여 해당 폴더에 넣어놓는 것입니다.
생성은 따로 CSS를 제작할 필요없이 기존의 CSS 파일을 복사-붙여넣기 하여 복사본을 만들고, 이름 수정 및 포함되어 있는 내용을 수정합니다. 기본적으로 블로그에 적용되어 있는 style.css의 내용을 복사-붙여넣기 해주어야 하며, 부트스트랩(bootstrap)기반 디자인이라면 부트스트랩의 CSS도 함께 넣어주어야 합니다. 또한, 요즘 나오는 스킨의 블로그에서는 단 하나의 CSS만 사용하는 것이 아니라 여러개의 CSS를 분리하여 복합적으로 사용하는 경우가 있는데, 이럴때엔 적용된 모든 CSS를 넣어주면 됩니다.
사용자가 임의로 정의한 CSS 링크가 아닌 경우, 대부분의 HTML에서 외부 CSS가져오기는
<link href...로 시작하여 링크됩니다. 주로 HTML 최상위에 있는 <head>태그 안에 정의되어 있으니 블로그 HTML 화면에서 직접 확인할 수 있습니다. ▼
4. 이후 MOU를 종료했다가 재시작합니다.
자체 버그인지, 수정 예정인지 모르겠지만 프로그램을 재시작하지 않으니 추가된 CSS를 확인할 수 없네요.
5. 설정 - Preferences - CSS 탭에서 CSS를 변경 선택해준다음, reload 해줍니다. ▼
마크다운을 이용해 재미있는 블로그 포스트 작성 및 콘텐츠 생산 활동되세요~~ :)
반응형