CSS 원형 배치 - CSS wonhyeong baechi

CSS Shapes는

CSS Shapes를 사용하면 원형이나 다각형 이미지에 맞게 주위 float에서 나란히하고있는 텍스트를 둘러싸 배치 할 수 있습니다. 잡지와 인쇄 광고 등에서 볼 레이아웃의 하나라고 보시면 됩니다. 이것이 Web에서도 표현할 수있게되면 디자인의 폭이 급격히 확산 것이 넓어지지 않을지 생각해봅니다.

크롬, 사파리, 오페라 이렇게 지원됩니다.

긍정적 원형 - circle

원형에 텍스트를 둘러싸는 원형 요소 shape-outside: circle();를 제공합니다. 여기에서는 이미지 주위에 텍스트를 둘러싸시켜 봅시다.

<p>文章が入ります……！</p>

img {

float: right;

border-radius: 100%;

-webkit-shape-outside: circle();

shape-outside: circle();

}

<p>

식물이 전혀 살 수 없는 사막은 드물고, 보통 풀과 관목이 자라는데 아주 희박한 상태를 말한다.

건조한 사막이 생기는 원인은 지구상에 있어서의 기압의 상태, 그에 수반되는 풍계(風系)의 영향 및 바다와의 거리이다. 중위도에는 고압대가 있는데다가 하강기류가 탁월하여 비가 내리지 않으므로 건조해서 사막을 형성한다. 세계에서 건조기후를 이루는 대지역은 중위도 고압대에 분포하는데 사하라 ·아라비아 ·오스트레일리아 중앙부 ·칼라하리 ·아타카마 사막 등이 이에 속한다. 한편 바다의 습기를 포함한 대기(大氣)의 영향이 적은 대륙 내부의 사막으로는 중앙아시아 ·타클라마칸 ·고비 등의 사막을 들 수 있다.

지구상에서 1500만㎢를 넘는 광대한 면적을 차지하는 사막은 전육지의 1/10 이상이나 되며 극히 광범한 위도에 걸쳐 분포한다. 건조한 열대사막과 중위도사막의 경우에는 연 평균강수량 250mm의 등우량선(等雨量線)이 사막의 분포와 거의 일치한다. 즉 유효수량(有效水量)이 감소하는 기후적 경도(氣候的傾度)의 건극(乾極)에 해당하는 것이 사막으로 유효수량의 감소경도의 배열은 삼림·사바나·스텝 순이며 더욱 감소되면 사막이 분포한다.

그러나 캐나다나 시베리아의 북부에서는 250mm의 강수량이면 삼림이 생육하기에 충분하므로 비가 내리는 것에 따라서도 사막의 분포가 규정된다. 한랭하기 때문에 식물이 생육할 수 없는 경우를 한랭사막(寒冷沙漠)이라고 한다. 예컨대 남극대륙 ·그린란드·극빙모(極氷帽) 등을 영구빙설사막이라 하고 툰드라 지대를 툰드라 사막이라 한다.

</p>

img {

float: right;

border-radius: 100%;

-webkit-shape-outside: circle();

shape-outside: circle();

}

매우 쉽게 잡지 스타일 레이아웃으로 완성되었습니다!

타원 - ellipse

긍정적 인 원형뿐만 아니라 ellipse함수를 사용하면 타원에도 대응할 수 있습니다. 덧붙여서 shape-margin특성에 모양의 주위에 공간을 추가 할 수 있습니다.

img {

float: right;

shape-margin: 1rem;

border-radius: 100%;

-webkit-shape-outside: ellipse();

shape-outside: ellipse();

}

<p>

식물이 전혀 살 수 없는 사막은 드물고, 보통 풀과 관목이 자라는데 아주 희박한 상태를 말한다.

</p>

이미지

이미지의 모양에 맞게 텍스트의 모양을 바꾸고 싶은 경우는 나란히 이미지가 PNG 등의 투명 영역을 포함 이미지 형식 일 필요가 있습니다. 그러면 투명도에 텍스트를 삽입 할 수 있습니다. 작성은 지금까지의 함수가 아니라 직접 이미지의 경로를 지정합니다.

<p>안녕하세요</p>

img {

width: 300px;

float: right;

shape-margin: 5px;

-webkit-shape-outside: url(image.png);

shape-outside: url(image.png);

}

다각형 - polygon

다각형의 경우 지금까지의 긍정적 원형이나 타원 함수 만 지정할뿐 아니라 각 정점의 좌표 값을 괄호 안에 표시해야합니다. (x1 y1, x2 y2, x3 y3 ...) 식 네요.

.polygon {

float: right;

-webkit-shape-outside: polygon(nonzero, 148px 452px, 32px 329px, -7px 273px, 8px 197px, -22px 131px, 118px 0px, 383px 0px, 386px 451px);

shape-outside: polygon(nonzero, 148px 452px, 32px 329px, -7px 273px, 8px 197px, -22px 131px, 118px 0px, 383px 0px, 386px 451px);

}

<p>

『사막』은 사막, 그리고 그곳에서 살아가고 사랑하고 꿈꾸는 인간들에 대한 찬가라 할 수 있는 서구 문명의 침입으로 말미암아 과거 북서아프리카 사하라 사막을 정처 없이 떠돌게 된 유목민의 후예 소녀 랄라가 다양한 인종, 각양각색의 주변인들이 모여드는 프랑스 최대 항구도시 마르세유로 이주해 서구 도시 문명의 민낯을 체험한 끝에, 제 몸에 각인된 노마드적 혈통을 각성하고 사막으로 표상되는 시원적 정신세계를 되찾게 되는 과정을 섬세한 필치로 그려낸 작품이다.

</p>

</div>

body {

color: rgba(255, 255, 255, .6);

background: #000;

}

.wrapper {

width: 770px;

height: 500px;

margin: 30px auto 0;

background: url(http://www.webcreatorbox.com/sample/images/pink-flower.jpg) no-repeat right top;

}

.content {

height: 100%;

}

.polygon {

height: 100%;

width: 50%;

float: right;

-webkit-shape-outside: polygon(nonzero, 148px 452px, 32px 329px, -7px 273px, 8px 197px, -22px 131px, 118px 0px, 383px 0px, 386px 451px);

shape-outside: polygon(nonzero, 148px 452px, 32px 329px, -7px 273px, 8px 197px, -22px 131px, 118px 0px, 383px 0px, 386px 451px);

}

복잡한 형태에도 대응할 수있었습니다.!

다각형의 좌표 취득에 유용한 도구를 사용하자

다각형의 경우는 그 좌표를 취득하는 것이 매우 힘들다. 그래서 유용한 도구에 의존 할 수 있습니다.

CSS Shapes Editor 는 Chrome의 확장 기능. 그릴 선을 드래그하는 것만으로 직관적으로 Polygon 모양과 그 좌표를 습득 할 수 있습니다!

사용법은 매우 간단하다. 확장 기능을 설치하고 Chrome 개발자 도구를 표시하면 "shapes"라는 탭이 추가되어 있습니다. 그래서 '+'버튼을 클릭하면 파란 선이 표시됩니다. 여기를 드래그하여 모양을 만들어갑니다. 꼭지점 포인트는 선을 클릭하면 추가 포인트를 더블 클릭하면 삭제할 수 있습니다. 다음은 패널에 표시된 값을 복사 - 붙여 넣기하면 OK!

각 브라우저에 대응하는 스크립트

첫머리에서도 소개했듯이 CSS Shapes는 IE와 Firefox와 호환되지 않습니다. 거기서 활약 해주는 것이

CSS Shapes Polyfill 입니다. 사용법은 다운로드 한 shapes-polyfill.js (또는 shapes-polyfill.min.js)을 메모리에 적재시킬뿐! 정말 간단합니다.!

사용법에 따라서는 텍스트를 읽기 힘들어 져 버리기 때문에 과다 사용에주의가 필요하지만, 디자인의 가능성이 퍼졌다는 점만으로도 큰 발전입니다.