스타일 시트 레이아웃 이해하기

웹 디자이너로부터 각광을 받는 최신 트랜드 중에 하나가 웹 문서에서 디자인과 내용을 분리하는 스타일 시트를 사용한 레이아웃 방법입니다.

지금까지 배운 HTML 태그들은 콘텐츠를 원하는 위치에 배치하기가 힘들었습니다. 그래서 웹 페이지의 전체 레이아웃을 설계한 후 콘텐츠를 원하는 위치에 배치하기 위해서 테이블을 사용했습니다. 테이블로 웹 문서의 레이아웃을 만들게 되면 레이아웃 역할을 하는 표와 내용이 섞여 있어 작업이 복잡하게 됩니다.

최근에는 이러한 단점을 해결하기 위해서 문서의 디자인에 해당하는 부분은 스타일 시트로 처리하고 HTML 태그에는 내용만 저장하도록 하는 레이아웃 방법을 사용합니다. 유명 포털 사이트들에서는 이미 테이블 대신 스타일 시트를 사용하여 레이아웃을 작성하고 있습니다. 소스를 열어보면 <table>, <tr>태그는 없고 대신 스타일 시트를 활용하여 레이어를 만들어주는 <div>나 목록을 만들어주는 <ul> <li>와 같은 태그들을 볼 수 있습니다.

Alpha 필터의 투명효과

Alpha효과를 이용하여 그림의 투명정도를 설정해 줄 수 있습니다. 투명도는 그림을 흐리게 하는 것이 아니라 그림의 외곽을 자연스럽게 사라지게 하는 효과입니다.

{ Filter : Alpha(속성) }

Alpha의 속성값
속성값	설명
opacity	흐림 정도를 %값으로 설정합니다. 단 숫자가 클수록 불투명하게 설정됩니다.
FinishOpacity	증감의 끝부분의 흐림 정도를 설정합니다.
style	흐림 정도 모양 스타일을 설정합니다(1:선형,2:원형,3:사각형).
StartX / StartY	흐림 정도 증감의 시작 x, y 좌표
FinishX / FinishY	흐림 정도 증감의 끝 x, y 좌표

그림의 투명 정도를 설정해주는 필터로 Alpha 속성에 위 표의 값들을 지정하여 글이나 그림에 투명도를 다양하게 조절할 수 있습니다.

Blur 필터의 번짐 효과

Blur 효과는 그림의 번짐(뿌옇게 흐려지도록 왜곡시킴) 정도를 설정해주는 속성으로서 포토샵 필터 중 모션블러와 같은 효과라고 할 수 있습니다.

{ Filter : Blur(속성) }

Blur의 속성값
속성값	설명
add	본 그림과 효과가 적용된 그림을 겹치는 속성을 설정합니다. add값을 0을 주면 블러 효과가 그림 전체에 적용되어 strength 속성값에 따라 없어집니다.
direction	번짐 방향을 각도로 설정합니다.
strength	번지게 될 개수를 지정합니다.

FlipH, FlipY 태그로 대칭 효과 만들기

FilpH 필터는 선택한 글이나 그림을 좌우로 대칭 이동합니다. FlipY필터는 선택한 글이나 그림을 상하로 대칭 이동 합니다.

{ Filter : FlipH(속성) } - - - - - 이미지가 좌우대칭 됩니다.
{ Filter : FlipY(속성) } - - - - - 이미지가 상하대칭 됩니다.

Wave 필터를 이용한 물결 효과

Wave필터를 적용한 그림이나 글자를 물결 형태로 변형해서 보여줍니다. 다음은 Wave필터를 사용하는 형식입니다.

{ Filter : Wave(속성) }

Wave의 속성값
속성값	설명
add	효과를 적용한 요소를 원본 요소와 겹치게 만들지를 설정합니다.
freq	웨이브의 개수를 입력합니다.
lightstrength	웨이브 효과의 빛의 강도를 퍼센트 단위로 입력합니다.
phase	사인 웨이브 효과의 시작 위치를 설정합니다.
strength	물결의 흰 정도를 퍼센트 단위로 입력합니다.

입체효과와 네온효과 만들기

dropshadow와 shadow 필터를 이용하여 특정 방향으로 그림자가 드리워진 글자를 만들 수 있고, grow 필터를 적용하여 네온 글자를 만들 수 있습니다. 사용할 때 주의할 사항은 스타일 시트 속성 중에서 width와 height를 함께 지정해야 한다는 것입니다.

{ Filter : dropshadow(속성) }

dropshadow의 속성값
속성값	설명
color	드롭 쉐도우 효과 색 #RRGGBB를 지정합니다.
offX	그림과 그림자와의 X축의 거리를 지정합니다.
offY	그림과 그림자와의 Y축의 거리를 지정합니다.
positive	dropshadow 효과를 적용할 곳을 설정합니다(입력값: true/false).

※아이디어

아이디어

HTML5 캔버스를 이용한 그림, 도형, 애니메이션, 게임.

HTML5 canvas를 이용한 게임

HTML5 canvas 게임

HTML5 canvas 게임 기획서

※교육,광고,동향

교육, 광고, 동향

클라우드형 애플리케이션 개발자는 게임기나 스마트폰, 울트라 모바일 PC, 넷북, 노트북 컴퓨터, 데스크톱 컴퓨터 같은 단말기는 물론, 앞으로 등장할 각종 단말기에 대응하는 서비스를 제공해야 할 것이다

교육

교육문의 및 신청

반응형웹 교육 - 연락주세요

2012.9.10(월) 2hr
장소 : 토즈 (스터디 모임 공간) 레슨 : 레슨올(1대1 레슨), 레슨비 3만원/1hr, 6만원/3hr)

동향

최신동향

최신 버전