'3. Implementation/HTML / CSS'에 해당되는 글 6건
- 2011.07.22 HTML5 & CSS3
- 2011.07.22 Markup Validation Service
- 2011.06.16 [펌] SPAN 태그의 의미, 사용법
- 2009.07.04 CSS 에서 클래스
- 2009.06.16 [IE전용] 배경에 그라디언트(Gradient) 효과 주기
- 2009.06.15 textbox의 입력문자 제어하기(영문/한글) 출처: http://kurapa.com
Prev
html5 css3.a00책 소개는 아래와 같습니다.
http://insightbook.springnote.com/pages/7591481
http://www.yes24.com/24/Goods/5141187?Acode=101
SPAN 태그는 "Inline Text Container (문장 단위로 텍스트 영역을 지정하는 것)"인데, 그 자체로는 아무 역할도 하지 않고,
문장의 특정 구역에 CSS스타일을 지정할 때 사용합니다.
DIV 태그의 역할과도 비슷하지만, DIV 태그는 사각형 박스 모양으로 구역을 지정하고, SPAN은 한 문장 단위입니다.
웹페이지 중에서, 어떤 태그도 달려 있지 않은 곳에, 뭔가를 지정하기 위해서는 SPAN 태그를 사용하면 됩니다. 쉽게 말해서, SPAN 태그는 "공 태그" 즉 비어 있는 태그입니다. 이 SPAN 태그를 어떻게 사용할지는, 웹페이지 작성자의 마음에 달려 있습니다.
다음은 어떤 문장의 가운데에 있는 "뜬구름"이라는 단어의 크기를 조정합니다. "뜬구름"이라는 단어에는 다른 태그가 붙어 있지 않기에, span 태그로 감싸 준 후, span 태그에다 스타일을 지정하면 되는 것입니다.
지금은 저 뜬구름
조차도 영속적인 존재로 보이고 있다.
이것은 "뜬구름"이라는 단어에 mytest 라는 아이디를 부여하는 예제입니다.
지금은 저 뜬구름조차도 영속적인 존재로 보이고 있다.
여러 태그에 공통적으로 사용할 스타일의 이름 적용하기
|
<HTML> <HEAD> <STYLE TYPE="text/css"> .attention
{color:red}; </STYLE> </HEAD> <BODY> <p>이문장에는스타일이적용되지않습니다.</P> <p class="attention">스타일이적용되는문장입니다.</P> <div class="attention">스타일이적용되는문장입니다.</div> </BODY> </HTML> |
태그 내에서 스타일 이름 적용하기
|
<HTML> <HEAD> <STYLE TYPE="text/css"> div.attention
{color:red; text-align:center}; </STYLE> </HEAD> <BODY> <div>이문장에는스타일이적용되지않습니다.</div> <div class="attention">스타일이적용되는문장입니다.</div> <p class="attention">다른태그에서스타일이적용되지않습니다.</p> </BODY> </HTML> |
참고 : 삼성 SDS 멀티캠퍼스 - "Java Script 쉽고 빠르게" - 과정 중에서
[IE전용] 배경에 그라디언트(Gradient) 효과 주기
|
<style type="text/css"> html { filter:progid:DXImageTransform.Microsoft.Gradient
(GradientType=0,StartColorStr='#ffffffff',EndColorStr='#D5E4F5'); } </style> |
버튼도 마찬가지로 다음과 같이 하면 된다.
|
input.btn { color:#050; font: small 'Verdana', 'trebuchet
ms',helvetica,sans-serif; background-color:#fed;
border:1px solid; border-color: #696 #363 #363 #696; filter:progid:DXImageTransform.Microsoft.Gradient (GradientType=0,StartColorStr='#ffffffff',EndColorStr='#ffeeddaa'); } <input id="button1" type="button" class="btn" value="button1" /> |
출처 : 구글링
textbox의 입력문자 제어하기(영문/한글) 출처: http://kurapa.com
2. 한/영중 선택가능 : style="ime-mode:auto"
3. 디폴트 한글 : style="ime-mode:active"
4. 디폴트 영문 : style="ime-mode:inactive"
ex) 디폴트로 한글 입력이 되는 입력폼
<input type="text" name="user_name" style="ime-mode:active" />
출처 : http://kurapa.com/content-a1065
Rss Feed