Style을 만들때 그림과 같은 옵션들을 여기서 공부해 봅니다.

스타일 을 만들면서 공통적으로 작업을 해야 하는 옵션들입니다.먼저 오른쪽에 보이는 글꼴및 크기들을 설정하는 것을 보면 *(asterisk)가 되어 있는 사항들로 작업해도 드림위버에서는 표현되지 않고 브라우저 상에서는 보여지는 것을 뜻합니다 . 오른쪽에 있는 세부적인 메뉴들은 어려운 것들이 아니죠.

Category: Type Font, Size는 당연히 글꼴과 크기에 관련된 것이고, Weight은 글자의 두께를 정할 때 쓰는데 수치로 400이 Normal상태, 700이 Bold라는 것을 기준으로 하면 됩니다. Style을 선택해 보면 이탤릭체등의 기울임을 줄 것인가를 정하는 것이다. Variant는 글자에 효과를 주는 것인데 Small caps를 선택하면 영문의 경우 대문자로 바뀌면서 글자크기가 반으로 줄어듭니다다. Line Height은 줄간격을 조절해 주는 옵션입니다.일반 태그로써는 줄 간격을 조절하기가 어려운데 여기서 줄간격에 대한 것을 조절해 줄수 있습니다. Case는 영문칠때 첫글자를 대문자로(Capitalize) 바꾸거나 모든 글을 대문자 혹은 소문자로 바꿀때 쓰입니다다. Color는 글자의 색깔이고, Decoration은 밑줄 혹은 깜박임 등의 꾸밈 효과를 글자에 줄 때 쓴다. 전부 한번씩 여러가지 방법으로 옵션을 주어서 연습해 보세요

Category: Background Color, Image는 이미지와 배경색등을 곳이다. 이때 이미지의 경우 수평 혹은 수직방향으로 반복해서 화면에 보일것인가를 결정한다. Attachment는 화면 스크롤시에 배경이미지를 고정시켜주는 사항이고 Vertical, Horizontal Position은 배경이미지의 위치를 지정해주는 것이다.

Category: Block Word, Letter Spacing은 각각 단어와 글자사이의 간격을 조절하여 원하는 단격을 갖게 하는 것입니다.다. Vertical Alignment는 이미지등의 삽입시에 상하 정렬에 필요한 것이고, Text Align은 글자의 정렬을 정해준다. Text Indent는 들여쓰기 수치를 결정해준다. White Space는 텍스트 입력방식을 결정하는 데 3가지 옵션을 선택해서 직접 확인해 보자.

Category: Box 이미지나 레이어등에 쓰이는데 Width, Height은 폭과 높이를 Float은 이미지의 위치를 정해준다. Padding과 Margin은 모두 이미지등의 주변에 여백을 지정할 때 쓰인다.

Category: Border 이미지 주변 테두리선의 두께와 색깔, 또는 선의 모양등을 지정해준다.

Category: List 리스트 포맷사용시 순서목록과 무순서목록등의 모양(Type)을 정해주고 Bullet등을 다른 이미지로 바꾸어 줄 수도 있다. 또한 Position은 리스트가 Indent나 Margin에 의해서 줄바꿈을 할 것인지를 결정한다.

Category: Position Position은 레이어의 위치등에 대한 속성을 지정하는 것인데, Type에서 Absolute를 선택하면 Placement에서 지정한 위치에 레이어를 표현하고 Z-Index는 여러개의 레이어를 겹칠때 화면에 보여지는 순서를 나타내는 것으로 번호가 빠를수록 레이어가 상단에 위치하게 된다. Visibility는 레이어를 보이게, 또는 안보이게 할때 Overflow는 레이어의 크기보다 레이어에 담긴 내용물이 더 클경우에 레이어를 늘이거나(Visible), 내용물을 자르거나(Hidden), 혹은 스크롤바를 만들어서 표현(Scroll, Auto) 하는 등의 옵션을 주는 것이다.

Category: Extensions Pagebreak는 페이지 인쇄시에 페이지를 나누는 기능을 하는 것이고(현재는 브라우져에서 지원안함5.0대에서 지원한다도함), Cursor는 스타일시트가 적용된 부분에서의 마우스의 모양을 정하는 곳이다.

top