홈 강의 컨설팅 트레이닝 무료진단 무료책자 마케팅편지 마케팅정보공유 다이어리 서비스제휴 고객센터

마케팅 특별마케팅자료 다운로드마케팅자료 창업,경영 기획,카피 동기부여,성취 소스,유틸
CSS 사용 표현 - 범위 표현
작성자 : 99 단국강토
등록날짜 : 2009.02.16 11:35
2,003
범위표현
blank.gif

범위표현방법을 들어가기에 앞써 한말씀 드립니다.

이곳 홈페이지에서 다루는 태그들은 통상적으로 사용되는 태그들을 다루고 있음으로 여러분께서는 타사이트 홈페이지도 자주 방문하여 공부할 필요성이 있으며, 또한 이곳에서 다루는 예제는 광범위하게 다루지 못하는 바 네티즌 여러분께서 속성에 대한 값을 여러모러 변환해 가며 공부를 하시면 더욱 빠른 시일내에 익숙해 질수 있을것 같습니다.
그럼 강좌 시작합니다.

범위란 달리 말하면 영역이라 할 수 있겠죠^^
먼저 아래 그림을 참조해 주세요^^
area_01.gif

위 그림에서 보듯이 텍스트 또는 그림 그 밖의 태그에 정의된 것들에 대하여 영역을 넓혀주고 또한 좁혀주는 역활을 하는 스타일입니다. 방법은 간단해요^^
적용될태그 {width:100;height:100}
정말 간단하죠. 적용될 태그에서 가로 100픽셀 세로 100픽셀의 영역을 할당하는 예입니다.
width 혹은 height둘중 하나의 속성만 적용을 해도 무방하답니다.
아래 더욱 자세한 예제를 보시면 금방 이해가 가실것 같네요^^

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.test_01 {width:200;background-color:yellow}
.test_02 {width:200;height:100;background-color:pink}
</style>
</head>
<body>
<font class='test_01'>재미있는</font>인포카페^^
<br><br><br>
<font class='test_02'>재미있는</font>인포카페^^
</body>
</html>



위 예제에서는 이해를 돕기위해서 background-color속성을 주어 영역을 보이게 표현을 해 보았습니다.
범위의 제어는 비단 폰트태그 뿐만아니라 다양하게 사용을 하실수가 있는데 예제를 하나더 만들어 볼까요^^

[예제] - 실행화면 보기
<html>
<head>
<title>스타일시트 예제</title>
<style>
.test_01 {width:300;background-color:yellow}
.test_02 {width:300;height:200;background-color:pink}
</style>
</head>
<body>
<input type='text' class='test_01' value='길이가 길어졌죠^^'>
<br><br><br>
<input type='button' class='test_01' value='인포카페'>
<br><br><br>
<textarea class='test_02'>크기가 지정 되었죠^^</textarea>
<br><br><br>
<select class='test_01'>
<option>인포카페1</option>
<option>인포카페2</option>
<option>인포카페3</option>
</select>
</body>
</html>

어때요 범위를 제어하는 스타일속성을 가지고 홈페이지를 멋지게 꾸밀수 있겠죠^^ 그럼 다음강좌에서 뵈요^^


"쇼핑몰·홈페이지·오픈마켓
블로그·페이스북·이메일 등의 각종 마케팅 글쓰기,
각종 광고, 영업, 판매, 제안서, 전단지
반응율 3배×10배 이상 높이는 마법의 8단계 공식"
☞​자세히보기

Comments

로그인한 회원만 댓글 등록이 가능합니다.
번호 제목 글쓴이 날짜 조회
3135 1-16.[문장,문서] 문장, 문서 꾸미기4 - ④ 문서에 선긋기 <hr> 태그 99 단국강토 02.16 3199
3134 1-15.[문장,문서] 문장, 문단 꾸미기3 - ③ <br> <p> 태그 99 단국강토 02.16 2269
3133 [문장,문서] 문장, 문단 꾸미기2 - ② <body> 속성 태그 99 단국강토 02.16 2511
3132 1-13.문장,문서] 문장, 문단 꾸미기 - ① 문장, 문단 태그 입문 99 단국강토 02.16 2555
3131 1=12.[글자] 움직이는 글자4 - ④ <marquee> 태그 다양한 실전 응용 99 단국강토 02.16 2154
3130 1-11.[글자] 움직이는 글자3 - ③<marquee> 태그 활용2 99 단국강토 02.16 2474
3129 1-10.[글자] 움직이는 글자2 - ② <marquee> 태그 활용 99 단국강토 02.16 2629
3128 1-9.[글자] 움직이는 글자1 - ① <marquee> 태그 99 단국강토 02.16 2593
3127 1-8.[글자] 글자 꾸미기 1 - ③ 글자 태그 정리 99 단국강토 02.16 2378
3126 1-6.[글자] 글자 기본 태그 - ② <font> <size> <color> 태그 99 단국강토 02.16 2861
3125 1-5.[태그] 태그의 이해 - ① <br>태그 99 단국강토 02.16 2005
3124 1-4.[HTML 기초] HTML 구조와 속성 - ④ HTML 들여다보기 99 단국강토 02.16 2398
3123 1-3.[HTML 기초] HTML 문서 - ③ HTML 만들기 99 단국강토 02.16 2567
열람중 CSS 사용 표현 - 범위 표현 99 단국강토 02.16 2004
3121 CSS 사용방법 - 배경표현 99 단국강토 02.16 2309
3120 CSS 사용방법 - 문단표현 99 단국강토 02.16 2047
3119 CSS 사용방법 - 테두리표현 99 단국강토 02.16 2332
3118 CSS 사용방법 - 커서표현 99 단국강토 02.16 2016
3117 CSS 사용방법 - 필터 표현 99 단국강토 02.16 2291
3116 내 전용 스타일 시트입니다. 99 단국강토 02.16 2016
3115 스타일 시트로 이미지 롤오버 만들기 99 단국강토 02.16 1888
3114 프리진의 css 99 단국강토 02.16 2122
3113 TextArea 박스 내부에 밑줄이미지 삽입 99 단국강토 02.16 3867
3112 CSS를 이용한 테이블 라인 표현하기 99 단국강토 02.16 3021
3111 테이블(table)와 관련된 스타일 시트 99 단국강토 02.16 2593
3110 스타일시트로 모서리가 라운딩 처리된 테이블[roundrect] 99 단국강토 02.16 2219
3109 LG전자 스타일시트 99 단국강토 02.16 2427
3108 TextArea 자동으로 늘리기 99 단국강토 02.16 4314
3107 자바스크립트 100선 99 단국강토 02.16 1376
3106 자바스크립트 100선 99 단국강토 02.16 2150
마케팅
특별 마케팅자료
다운로드 마케팅자료
+ 마케팅 더보기
+ 특별 마케팅자료 더보기
+ 다운로드 마케팅자료 더보기
창업,경영
기획,카피,상품전략
동기부여,성취
+ 창업,경영 더보기
+ 기획,카피,상품전략 더보기
+ 동기부여,성취 더보기