구글오빠 오늘도 고마워!

본 모듈은 '구글'의 서비스와 사업영역에 대한 다양한 영역의 기술이슈 및 프로젝트를 소개하지만 독자들은 이러한 모든 자료를 '구글링'을 통해 얻었다는 점에 주목해주면 좋겠다.

구글오빠 오늘도 고마워! 본 모듈은 '구글'의 서비스와 사업영역에 대한 다양한 영역의 기술이슈 및 프로젝트를 소개하지만 독자들은 이러한 모든 자료를 '구글링'을 통해 얻었다는 점에 주목해주면 좋겠다.

[CSS shapes editor] Shpaes 편집기

크롬의 확장 프로그램 중 CSS의 Shapes 속성을 수정하는 툴이다.

본 주제의 선택 배경 - 디지털스토리텔링과 다양한 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를 손쉽게 수정하도록 해주는 크롬 확장 툴을 만들었다! 어머나 세상에!

1. 크롬에서 링크를 통해 설치하거나 웹스토어에서 CSS shapes editor를 검색해 설치한 뒤 개발자도구를 들어가 보도록 하자. html의 img 부분을 선택 한뒤 CSS에서 Shapes를 보면 + 모양이 있다.
2. 이것을 클릭하면 원/타원/다각형의 세가지 옵션이 나오고 원하는 레이아웃을 선택하면 이미지의 Shapes를 설정하는 박스가 나타난다. 마우스를 움직임에 따라 개발도구의 속성의 값이 바뀌는 것을 알 수 있다.
3. 바뀐 값을 복사해서 아래의 codepen CSS 창에 복사해준다. 그러면 텍스트의 레이아웃이 바뀔 것이다.

과정이 이해되지 않는다면 Shapes를 손쉽게 수정하도록 해주는 크롬 확장 툴을 보면서 따라해보길 바란다.
(본인은 적당한 예제가 없어서 사용법을 익히려고 하루종일 고생했으나 CSS를 아는 사람은 매우 쉬울 것이다)

댓글

순례자의 길은 험난하노니.
순례의 끝에는 스마트한 구글링 라이프가 이 있을 것이다.

 

댓글 본문
버전 관리
이웃집토토로
현재 버전
선택 버전
graphittie 자세히 보기