셀클럽-HTML 강좌 STYLE SHEET 범위제어,태그&소스,교육센터.

교육센터

스터디정보

사이트제작

웹디자인

워드&오피스

웹프로그래밍

특강/트랜드

운영팁

작업툴,프로그램

ㆍ포토샵

HTML 강좌 STYLE SHEET 범위제어,태그&소스,교육센터.

HTML 강좌 STYLE SHEET 범위제어 [0]

범위제어는 특정태그가 영향을 미치는 시각적인 범위를 조절하는 CSS의 옵션기능입니다. 간단하게 말해서 크기를 조절한다고 말해도 되겠지만 크기조절과 범위조절은 미묘한 의미차이가 있겠네요.
<input>태그를 이용해서 버튼을 만들었는데 범위제어를 이용해서 버튼을 넓게 만들었다고 칩시다. 이럴땐 버튼이 크게된 것이므로 범위와 크기의 의미는 같지만, <font>태그의 글씨를 범위제어로 확장하면 글씨가 커지는게 아니라 그 주변 범위가 확장되는 것이죠.

범위조절은 이런 개념입니다. 만약 글자에 범위를 조절한다면 글자의 크기는 그대로 있고 원래 글자가 차지하고 있던 공간의 영역이 커진다는 뜻이죠. 그리고 버튼이나 textarea같은 것은 차지하고 있던 공간자체가 원래 그 태그의 범위이므로 범위의 값을 크게주면 크기또한 커지는 것이죠.

범위를 조절하는 스타일시트의 옵션은 width와 height입니다. width는 윗그림에서 가로의 오른쪽 방향을 확장하는 것이고 height는 세로의 아랫쪽 방향을 확장하는 것이죠.
따라서 기본꼴은 width:값;height:값이 됩니다. 물론 width나 height중 하나만 써도 됩니다. 값에는 기본단위인 픽셀이 있고 상대크기인 퍼센티지% 로 줘도 됩니다.
예제를 봅시다. 우선 적용태그를 <font>로 해볼까요. 소스를 찬찬히 보세요

① width적용

embeded방식	inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> font {width:150} </style> </head> <body> <font>나는 할 수 있다</font>나를 믿어 </body> </html>	<font style="width:150">나는 할 수 있다</font>나를 믿어

<FORM>실행화면</FORM>자! width를 150픽셀로 준 "나는 할 수 있다"이 글씨의 범위가 확장이 되면서 바로 다음에 쓰여질 "나는 믿어"의 글씨를 뒤로 밀어냈습니다.

※보충학습

좀더 쉽게 설명해 봅시다.

나는 할 수 있다나를 믿어
방금것은 위의 예제에서 width옵션을 주지 않았을 때의 실행화면입니다. 따라서 "나는 할 수 있다"의 범위는
나는 할 수 있다나를 믿어
에서 보는 바와같이 노란색칠을 한 영역이죠.

여기서 width를 150으로 주었다는 것은..
나는 할 수 있다나를 믿어
이렇게 "나는 할 수 있다"의 <font>태그 영역을 150픽셀로 잡아준다는 뜻이죠. 노란색으로 알기쉽게 칠해놨습니다.

만약 width를 150이 아닌 40쯤 주면 어떻게 될까요?
"나는 할 수 있다"의 글씨 자체만으로도 40픽셀이 넘어버리는데 강제로 범위를 그것보다 작게 잡아준다면 다음줄로 강제 이행이 됩니다.
나는 할 수 있다나를 믿어

② width,height동시 적용

이번엔 height옵션까지 같이 적용해 봅시다.

embeded방식	inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> font {width:150;height:100} </style> </head> <body> <font>나는 할 수 있다</font>나를 믿어 </body> </html>	<font style="width:150;height:100">나는 할 수 있다</font>나를 믿어

<FORM>실행화면</FORM>"나는 할 수 있다"의 세로영역도 아랫쪽으로 100픽셀만큼이나 확장이 되버렸습니다.

※보충학습

알기 쉽게 색칠을 해가면서 설명해 봅시다.

나는 할 수 있다나를 믿어
방금것은 위의 예제에서 width와 height옵션을 주지 않았을 때의 실행화면입니다. "나는 할 수 있다"의 범위는
나는 할 수 있다나를 믿어
에서 보는 바와같이 노란색칠을 한 영역이죠.

여기서 width를 150으로 주면..
나는 할 수 있다나를 믿어
으로 되고(노란색 색칠).

width:150에 height:100을 첨가하면..
나는 할 수 있다나를 믿어
이렇게 되는거죠..

③ 퍼센티지 값

width와 height의 값을 퍼센티지로 주면 해당하는 전체화면의 몇%꼴로 범위를 지정해주는 것이므로 화면의 크기에 따라 범위도 달라지겠죠

embeded방식	inline방식
<html> <head> <title>스타일시트 예제</title> <style type="text/css"> font {width:70%;height=50%} </style> </head> <body> <font>나는 할 수 있다</font>나를 믿어 </body> </html>	<font style="width:70%;height:50%">나는 할 수 있다</font>나를 믿어

<FORM>실행화면</FORM>"나는 할 수 있다"의 가로 범위를 화면의 70%, 세로 범위를 화면의 50%로 잡아준 경우입니다.
실행화면의 창을 늘였다가 줄였다가 해보세요. 화면의 크기에 따라서 범위도 달라질겁니다.

※팁하나!
이건 스타일 시트뿐 아니라 태그편에서 배웠던 width, height옵션을 쓰는 모든태그들 (<table>,<tr>,<td>,<iframe>등등등) 에게도 똑같은 겁니다. 퍼센티지로 주면 상대범위이므로 화면이 얼만큼 큰지 작은지에 따라 시각적인 것도 차이가 나죠.
물론 해상도에 따라서도 차이가 납니다. 800*600해상도 일때의 50%가로크기는 400픽셀이지만 1024*768일때의 50%가로크기는 512픽셀이 되기 때문이죠. 따라서 홈페이지를 만들때 여러 해상도를 고려해서 적당한 상대비율을 지정해 주는 것도 중요한 문제입니다

물론 상대비율을 무시하고 픽셀등의 절대비율로만 이용해서 만든홈도 있습니다. 해상도가 어떻든 화면크기가 어떻든 항상 똑같은 범위로 해준다는 것은 좋기도 하지만 고해상도 모니터에서 볼 경우 화면이 좀 작아보인다는 단점이 있죠(가로 800픽셀를 절대범위로 잡아주면 800*600해상도에서는 풀화면 이지만 1024*768에서는 224픽셀이 남아버리는 경우). 반면에 예를들어 100%의 상대크기를 지정해주면 해상도가 어떻든 풀화면으로 보여줄 수 있다는 점이 장점입니다. 다만 풀화면이긴 하지만 해상도에 따라 범위가 들쑥날쑥하므로 어떤 해상도에서는 화면이 이상하게 나올수 있다는게 단점이죠. 물론 모든 해상도를 고려해서 상대비율로 적절히 준다면 좋지만 그게 너무 어려운 작업이라서..

④ 다른 옵션과 혼합

범위의 옵션은 혼자로 쓰이기 보다는 다른 옵션과 많이 혼합되서 쓰입니다.
예제를 볼까요? 소스를 잘 보세요.. inline방식으로 예를 들겠습니다. 왼쪽은 소스이고 오른쪽은 실행화면 입니다.

inline방식	실행화면
<font style="width:150;height:50;background-color:orange">나는 할 수 있다</font>나를 믿어	나는 할 수 있다나를 믿어
<font style="width:150;height:50;background-color:orange;text-align:center">나는 할 수 있다</font>나를 믿어	나는 할 수 있다나를 믿어
<font style="width:150;height:50;font-size:15;filter:shadow(color:red)">나는 할 수 있다</font>나를 믿어	나는 할 수 있다나를 믿어

이렇게 무궁무진하죠!!
맨윗 예제는 예전에배운 배경제어 background-color옵션을 width, height와 조합한 예고
두번째는 거기에다가 또, text-align옵션을 추가한 거죠.
세번째는 좀 색다를거 같은데, width, height의 범위옵션에 font-size와 filter옵션을 섞은겁니다. filter강좌는 뒤에 다룰 겁니다. @.@ㆀ
이것말고도 지금까지 배운 스타일시트 옵션을 섞어가면서 써보세요.. 짬뽕으로 복합해가면서 해야지 개념도 잡히고 실력도 늡니다.

⑤ 다른 태그로 적용

지금까지 <font>태그에만 적용시켰는데 다른태그에다가 이 옵션을 넣어보죠.
<font>옵션으로 실행한 예제가 개념잡기에 쉽기때문에 제가 유독 <font>태그를 예로 많이 드는데 실제로 스타일시트는 <font>태그보다는 <select>나 <input>, <a>, <textarea>등에 더 많이 쓰입니다. 물론 안가리고 다 쓸줄알면 더 좋죠. 이번에도 inline방식으로만 예제를 들겠습니다. 왼쪽은 소스이고 오른쪽은 실행화면입니다.

inline방식	실행화면
<input type=button value="멋있다">
<input style="width:100;height:40" type=button value="멋있다">
<input style="width:100;height:40;background-color:white" type=button value="멋있다">
<input style="width:100;height:40;background-color:white;text-align:left" type=button value="멋있다">

<input>태그에 적용시켜 봤습니다.
뭐 다 배웠던 옵션들로만 만들었으니 소스를 이해하는건 별로 어렵지 않을겁니다! (정말 그런지 실력 테스트 해보세요!!)
이렇듯 <input>태그를 비롯한 다른 태그들은 폰트와는 달리 범위 자체가 그 태그의 영역이므로 범위를 크게해주면 크기가 커지게 된답니다.

첫번째 예제는 아무런 CSS옵션을 주지않은 100%태그로만 짜여진 버튼이고
두번째는 width,height의 값을 준 버튼입니다
세번째는 배경을 흰색으로 입힌 경우이고 background-color
네번째는 text-align옵션을 줘서 글씨를 왼쪽으로 정렬한 예입니다.
태그로는 이런것들을 도저히 상상조차도 할 수 없었던 것들을 스타일시트는 가능하게 하고 있습니다.

여러분들이 <input>태그말고 다른 태그를 넣어서 연습해보세요.

----------------------------------------------------------------------
후출처
-온라인 판매자들의 커뮤니티 셀클럽 http://sellclub.co.kr
-온라인 성공출발지 도매상품공급 셀프리 http://sellfree.co.kr

출처가 나와있지않은 글은 출처가 불분명하여 등록하지못하였습니다. 저작자, 글의 출처에서 수정및 삭제요청하시면 바로수정하겠습니다. 다른곳에서 글을 이용할시에는 꼭 출처를 같이 복사이용 바랍니다.