본 주제의 선택 배경 - 디지털스토리텔링과 다양한 CSS툴
최근 콘텐츠의 스토리텔링이라는 말을 지겹게 들어왔을 것이다. 자기를 해도 써도 감성적 스토리텔링 구조가 필요하니 말 다했다. 스토리텔링의 중요성은 웹디자인 중 웹퍼블리싱 영역에서 구체적으로 들어나고 있다. 실제로 여러분은 이미 디지털스토리텔링 기법의 하나라 할 수 있는 Interactive contents에 익숙해져있다. 실제로 이미 네이버는 ‘웹툰효과에디터’라는 프로그램을 정규작가에게만 제공하여 보다 풍부한 웹툰콘텐츠를 생각하고 있다. 바야흐로 디지털 스토리텔링의 시대인 것이다. 그리고 아래에서 살펴볼 내용들처럼 콘텐츠 표현의 중요성은 보다 가까이 와있다. 텍스트의 레이아웃도 예외가 아닌 것이다. 본 토픽에서는 CSS의 shapes의 코드를 만들어주는 툴에 대해 소개하고자 한다. (추후에 콘텐츠와 웹퍼블리싱에 대한 소개를 하는 별도 모듈의 토픽을 생성하도록 하겠다)
HTML5와 JS그리고 CSS3로 만드는 어느 멋진 것
아래의 영상은 2013년 베를린에서 개최된 CSSconf.EU에서 Adobe가 발표한 CSS Shapes모듈을 활용한 프로젝트이다. 데모사이트에 들어가면 일부를 볼 수 있으며 이와 비슷한 방식의 사이트도 소개하였다.
CSS Shapes 사용법
CSS shapes 모듈을 사용하려면 우선 그 방식을 이해해야 한다. 아래의 링크에서 확인할 수 있으며
예제코드는 다음과 같다. 아래의 코드를 html로 저장해자 로컬에서 실행해보자
기본 예제코드는 다음과 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.lapland {
float: left;
shape-outside: inset(1% round 45%);
}
</style>
<h1>Laplanders</h1>
<img src="http://www.patrickcatanzariti.com/experiments/css3/cssshapes/lapland.png"
class="lapland" />
<p>They can bend bows most easily that the most powerful Swedes or Norwegians
could not bend at all. They dress,as you see, altogether in skins or coarse wool.
The women dress very like the men, turning their hair up in a funny kind of knot.</p>
</body>
</html>
위에서 <style>의 shape-outside라는 property가 풍성한 레이아웃을 만드는 열쇠다.
다음을 설명하려고 여기까지 달려왔다. 조금만 더 힘내자 !
크롬에서 CSS shapes editor를 사용해보자
앞에서 소개한 Adobe의 프로젝트에 참여했던 Razvan caliman라는 개발자는 shpaes 속성(property)의 값(value)을 지정해주며 무척 스트레스를 받았다고 한다. 그래서 Shapes를 손쉽게 수정하도록 해주는 크롬 확장 툴을 만들었다! 어머나 세상에!
(본인은 적당한 예제가 없어서 사용법을 익히려고 하루종일 고생했으나 CSS를 아는 사람은 매우 쉬울 것이다)
