구글 블로그(블로그스팟) 멋지게 꾸며 활용도 높이기 - 카드뉴스 만들기
구글 블로그(블로그스팟)의 불편한 편집기는 불편한걸까요?
한계가 없는 걸까요?
구글 블로거의 편집기는 참 불편합니다.
전에 사용 소감 포스트에서도 기술한 적이 있지만,
사용자에게 그리 편리하게 다가오는 편집기는 아닙니다.
사용자에게 그리 편리하게 다가오는 편집기는 아닙니다.
하지만, 반면에 굉장한 자유도를 지니고 있습니다.
일반적인 사용자로서는 범접하기 힘든 편리함이라는게 단점이긴 하지만요.
일반적인 사용자로서는 범접하기 힘든 편리함이라는게 단점이긴 하지만요.
여태까지 여러가지 사용 팁들에 대해서 포스트에서 설명했는데,
오늘은 글을 쓸때 직접활용할 수 있는 팁을 한가지 소개하려고 합니다.
오늘은 글을 쓸때 직접활용할 수 있는 팁을 한가지 소개하려고 합니다.
구글 블로그에서 카드뉴스 형식으로 글쓰기 팁입니다.
구글 블로그에서 카드형식으로 글쓰기
예시를 보여드리는게 가장 빠르겠죠.
아래처럼 크롬캐스트에 대한 카드뉴스를 두 가지 예시를 만들어 봤습니다.
가시성이나 모양새가 일반 글보다는 훨씬 좋은 것을 알 수 있습니다.
자 어떻게 만들어야 할까요?
구글 블로그에는 html편집 모드 기능이 있습니다.
아래 화면에서 왼쪽 맨 끝의 연필 모양 아이콘을 눌러주세요.
여기에서 HTML 보기를 클릭합니다.
이곳에 제가 아래 써 놓은 특정 코드를 입력하면
위의 글과 같은 카드뉴스를 만들 수 있습니다.
위의 글과 같은 카드뉴스를 만들 수 있습니다.
먼저 아래 코드를 복사해주세요.
------------ 추후 입력을 위해서 입력하는 빈칸 줄입니다. 같이 복사해주세요 ---------
<div style="display: flex; justify-content: center; margin-top: 20px;">
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">첫번째 카드의 제목을 넣어주세요</h3>
<p>여기에 글을 넣어주세요. </p>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">두번째 제목을 넣어주세요</h3>
<p>두번째 카드의 내용을 넣어주세요</p><p><br /></p>
</div>
</div>
------- 추후 글 아랫부분 입력을 위해서 입력하는 빈칸 줄입니다. 여기까지 같이 복사해주세요 ------
복사해서 붙여 넣으시면 아래와 같이 입력이 되셨을 겁니다.
html 보기 모드에서 입력하시는 것 꼭 잊지 말아주세요.
자 이젠 다시 새 글 작성 보기로 돌아갑니다.
그럼 아래와 같은 화면이 나왔을 겁니다.
그럼 위의 박스를 기준으로 원하시는 대로 편집하시면 됩니다.
일반 글의 편집 모드처럼 제목도 넣고 글도쓰고 그림도 그리고 링크도 넣고,, 이런 편집이 가능합니다.
저는 테스트 삼아 아랫부분에 사진 두개를 넣어 봤습니다.
(메뉴에 있는 이미지 삽입 아이콘 클릭해서 이미지를 넣었습니다. )
(메뉴에 있는 이미지 삽입 아이콘 클릭해서 이미지를 넣었습니다. )
이런식으로 일반 글 처럼 편집이 가능합니다.
그런데, 위에서 제가 보여드린 카드와는 조금 다릅니다.
뭔가 꾸밈에 있어서는 기본 편집기의 성능을 이용하는 것이 불편 할 수도 있습니다.
뭔가 꾸밈에 있어서는 기본 편집기의 성능을 이용하는 것이 불편 할 수도 있습니다.
만약 html 코드를 보고 편집하시는 것에 대한 두려움이 없으시다면,
아래 방법을 사용하시면 좀더 나은 결과물을 얻을 수 있습니다.
아래 방법을 사용하시면 좀더 나은 결과물을 얻을 수 있습니다.
이 코드를 복사해서 붙여 넣으시고 파란색 글자 부분들을 수정하시면 됩니다.
--------------------------
<div style="display: flex; justify-content: center; margin-top: 20px;">
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<img src="삽입할 이미지의 주소를 넣어주세요" style="display: block; width: 100%;" />
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">첫번째 카드의 제목을 넣어주세요</h3>
<p>여기에 글을 넣어주세요. </p>
</div>
</div>
<div style="border-radius: 10px; border: 1px solid rgb(221, 221, 221); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 6px; overflow: hidden; width: 48%;">
<img src="삽입할 이미지의 주소를 넣어주세요." style="display: block; width: 100%;" />
<div style="padding: 16px;">
<h3 style="margin-top: 0px;">두번째 제목을 넣어주세요</h3>
<p>두번째 카드의 내용을 넣어주세요</p><p><br /></p>
</div>
</div>
-------------------------------
저도 코딩 한 줄 할줄 모르는 문과지만, 한두번 해보니 어렵지 않게 할 수 있었습니다.
한번 도전해보세요.
제가 위에서 예시로 배치해 놓은 것과 동일한 카드뉴스를 만드실 수 있습니다.
맺음말
위에서 말씀 드린 것처럼 구글 블로거는 참 단순하기도하고 불편하기도 하나,
잘 활용하면 강력하고 자유도 높은 결과물을 얻을 수 있는 편집 기능을 한꺼번에 얻을 수 있는 기능을 같이 제공하고 있습니다.
잘 활용하면 강력하고 자유도 높은 결과물을 얻을 수 있는 편집 기능을 한꺼번에 얻을 수 있는 기능을 같이 제공하고 있습니다.
몇번 도전하시고 더 나은 블로그 만드시는데 도움이 되시길 바라겠습니다.
댓글
댓글 쓰기