알만한 사람들은 알겠지만 나는 현재 네이버 블로그를 병행해서 운영중이다. 주로 제품 리뷰랑 게임 영상만 올리고 그외 다른 것은 하지 않는다.
네이버는 스킨에서 자유롭게 건드릴 수 있는 곳이 헤더 밖에 없는데 이 헤더 마저도 사용자가 최대로 넓힐수 있는 너비는 500px 밖에 되지 않는다.
이를 꼼수를 써서 어떻게든 넓히는 방법을 알아냈다. 바로 위젯의 높이를 늘리는 것. 최대 허용 높이는 600px이 한계인 것 같다. 요즘 메인화면을 사진으로 채운 네이버 블로그들을 보니 이 방법을 쓰는 것 같았다.
여기서 한단계 더 나아가 inline-CSS가 도배되어 있는 위젯을 넣으면 어떻게 될까라는 실험을 해보았다.
참고로 네이버 블로그 위젯의 경우 style 태그는 원천 봉쇄되어 있으며, 인라인 스타일 밖에 허용되어 있지 않다. 그 말인 즉슨 pseudo class나 css 애니메이션 같은 것은 꿈도 못꾼다는 것. (pseudo클래스의 경우 CSS2의 draft에 존재했으나 최종판에서는 없어졌다고 한다.)
그래서 할 수 있는데 까지 해보자는 심정으로 도전을 했고, flexbox까지 적용된 마개조 물건을 만들어 내었다.
<div style="width:170px; height:400px; display:flex; align-items: flex-end; box-sizing:padding-box;">
<a href="http://est0que.tistory.com/" title="Life is a Journey" style="width:168px; height:168px; border:1px solid white; border-radius:16px; display:block; display:flex; justify-content:center; flex-direction:column; align-content: center; text-decoration: none; color:white; font-family: '3028545_12'; background: rgba(0,0,0,.2); margin-bottom: 20px; "><img src="http://postfiles7.naver.net/20160825_38/incusx_1472062333792pOs1a_PNG/tistory.png" alt="" style="display:block; width: 100px; height:auto; margin:auto;" "><span style="text-align:center; font-size: 16px; margin:auto; font-weight:200;">Life is a Journey</span></a>
</div>
대충 코드는 이렇게 생겼다.
div로 anchor를 감싸고 flexbox를 적용한 형태이다. 원래는 아이콘도 SVG로 넣을 생각이었으나 네이버 위젯 코드에서 SVG를 쓸 수 없게 되어있어 포기.
나름 여러 효과를 넣는다고 노력해봤는데 inline-css의 한계 덕분에 어쩔수 없이 포기해야 하는 것도 많았다. 특히 네이버 블로그에서 스마트 에디터 3.0을 쓸경우 나눔고딕이나 나눔바른고딕을 쓸 수 있는데, 이 경우 iframe형태로 들어가는 바람에 웹폰트를 땡겨 오는 것이 불가능했다.
