'Language/CSS'에 해당되는 글 8건

  1. 2013.02.21 html5 태그 지원 테스트
  2. 2011.08.01 div로 세로 정렬 해결법 css코딩[핵]
  3. 2011.01.07 선의 모양(border-style)
  4. 2010.10.27 align="absmiddle"
  5. 2010.10.27 웹표준 준수사항
  6. 2010.10.27 CSS의 선택자
  7. 2010.10.27 CSS Reference 레퍼런스
  8. 2010.10.27 Font-family

html5 태그 지원 테스트

Language/CSS 2013. 2. 21. 14:12
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<title>HTML5 inputs and attribute support</title>
<meta name="keywords" content="html5, input, forms, attributes, browser support" />
<link rel="stylesheet" href="/css/core.css" />
<script src="/scripts/modernizr-1.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="/scripts/attr_support-min.js"></script>
</head>
<body id="input-attr-support">
<header>
<hgroup>
<h1>HTML5 inputs and attribute support</h1>
<h3 id="ua"></h3>
</hgroup>
</header>
<p>A red input (followed by frowny faces) indicates the browser does not support the input type.</p>
<table id="text-search-url-tel-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>list</th>
<th>maxlength</th>
<th>pattern</th>
<th>placeholder</th>
<th>readonly</th>
<th>required</th>
<th>size</th>
</tr>
</thead>
<tbody>
<tr id="text-row">
<th><input id="text" type="text" /></th>
<th><label for="text">text</label></th>
<td id="t_autocomplete"></td>
<td id="t_autofocus"></td>
<td id="t_list"></td>
<td id="t_maxlength"></td>
<td id="t_pattern"></td>
<td id="t_placeholder"></td>
<td id="t_readonly"></td>
<td id="t_required"></td>
<td id="t_size"></td>
</tr>
<tr id="search-row">
<th><input id="search" type="search" /></th>
<th><label for="search">search</label></th>
<td id="s_autocomplete"></td>
<td id="s_autofocus"></td>
<td id="s_list"></td>
<td id="s_maxlength"></td>
<td id="s_pattern"></td>
<td id="s_placeholder"></td>
<td id="s_readonly"></td>
<td id="s_required"></td>
<td id="s_size"></td>
</tr>
<tr id="url-row">
<th><input id="url" type="url" /></th>
<th><label for="url">url</label></th>
<td id="u_autocomplete"></td>
<td id="u_autofocus"></td>
<td id="u_list"></td>
<td id="u_maxlength"></td>
<td id="u_pattern"></td>
<td id="u_placeholder"></td>
<td id="u_readonly"></td>
<td id="u_required"></td>
<td id="u_size"></td>
</tr>
<tr id="tel-row">
<th><input id="tel" type="tel" /></th>
<th><label for="tel">tel</label></th>
<td id="te_autocomplete"></td>
<td id="te_autofocus"></td>
<td id="te_list"></td>
<td id="te_maxlength"></td>
<td id="te_pattern"></td>
<td id="te_placeholder"></td>
<td id="te_readonly"></td>
<td id="te_required"></td>
<td id="te_size"></td>
</tr>
</tbody>
</table>
<table id="email-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>list</th>
<th>maxlength</th>
<th>multiple</th>
<th>pattern</th>
<th>placeholder</th>
<th>readonly</th>
<th>required</th>
<th>size</th>
</tr>
</thead>
<tbody>
<tr id="email-row">
<th><input id="email" type="email" /></th>
<th><label for="email">email</label></th>
<td id="e_autocomplete"></td>
<td id="e_autofocus"></td>
<td id="e_list"></td>
<td id="e_maxlength"></td>
<td id="e_multiple"></td>
<td id="e_pattern"></td>
<td id="e_placeholder"></td>
<td id="e_readonly"></td>
<td id="e_required"></td>
<td id="e_size"></td>
</tr>
</tbody>
</table>
<table id="password-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>maxlength</th>
<th>pattern</th>
<th>placeholder</th>
<th>readonly</th>
<th>required</th>
<th>size</th>
</tr>
</thead>
<tbody>
<tr id="password-row">
<th><input id="password" type="password" /></th>
<th><label for="password">password</label></th>
<td id="p_autocomplete"></td>
<td id="p_autofocus"></td>
<td id="p_maxlength"></td>
<td id="p_pattern"></td>
<td id="p_placeholder"></td>
<td id="p_readonly"></td>
<td id="p_required"></td>
<td id="p_size"></td>
</tr>
</tbody>
</table>
<table id="datetime-date-month-week-time-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>list</th>
<th>max</th>
<th>min</th>
<th>readonly</th>
<th>required</th>
<th>step</th>
</tr>
</thead>
<tbody>
<tr id="datetime-row">
<th><input id="datetime" type="datetime" /></th>
<th><label for="datetime">datetime</label></th>
<td id="dt_autocomplete"></td>
<td id="dt_autofocus"></td>
<td id="dt_list"></td>
<td id="dt_max"></td>
<td id="dt_min"></td>
<td id="dt_readonly"></td>
<td id="dt_required"></td>
<td id="dt_step"></td>
</tr>
<tr id="date-row">
<th><input id="date" type="date" /></th>
<th><label for="date">date</label></th>
<td id="d_autocomplete"></td>
<td id="d_autofocus"></td>
<td id="d_list"></td>
<td id="d_max"></td>
<td id="d_min"></td>
<td id="d_readonly"></td>
<td id="d_required"></td>
<td id="d_step"></td>
</tr>
<tr id="month-row">
<th><input id="month" type="month" /></th>
<th><label for="month">month</label></th>
<td id="m_autocomplete"></td>
<td id="m_autofocus"></td>
<td id="m_list"></td>
<td id="m_max"></td>
<td id="m_min"></td>
<td id="m_readonly"></td>
<td id="m_required"></td>
<td id="m_step"></td>
</tr>
<tr id="week-row">
<th><input id="week" type="week" /></th>
<th><label for="week">week</label></th>
<td id="w_autocomplete"></td>
<td id="w_autofocus"></td>
<td id="w_list"></td>
<td id="w_max"></td>
<td id="w_min"></td>
<td id="w_readonly"></td>
<td id="w_required"></td>
<td id="w_step"></td>
</tr>
<tr id="time-row">
<th><input id="time" type="time" /></th>
<th><label for="time">time</label></th>
<td id="ti_autocomplete"></td>
<td id="ti_autofocus"></td>
<td id="ti_list"></td>
<td id="ti_max"></td>
<td id="ti_min"></td>
<td id="ti_readonly"></td>
<td id="ti_required"></td>
<td id="ti_step"></td>
</tr>
</tbody>
</table>
<table id="datetimelocal-number-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>list</th>
<th>max</th>
<th>min</th>
<th>readonly</th>
<th>required</th>
<th>step</th>
</tr>
</thead>
<tbody>
<tr id="datetimelocal-row">
<th><input id="datetime-local" type="datetime-local" /></th>
<th><label for="datetime-local">datetimelocal</label></th>
<td id="dtl_autocomplete"></td>
<td id="dtl_autofocus"></td>
<td id="dtl_list"></td>
<td id="dtl_max"></td>
<td id="dtl_min"></td>
<td id="dtl_readonly"></td>
<td id="dtl_required"></td>
<td id="dtl_step"></td>
</tr>
<tr id="number-row">
<th><input id="number" type="number" /></th>
<th><label for="number">number</label></th>
<td id="n_autocomplete"></td>
<td id="n_autofocus"></td>
<td id="n_list"></td>
<td id="n_max"></td>
<td id="n_min"></td>
<td id="n_readonly"></td>
<td id="n_required"></td>
<td id="n_step"></td>
</tr>
</tbody>
</table>
<table id="range-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>list</th>
<th>max</th>
<th>min</th>
<th>step</th>
</tr>
</thead>
<tbody>
<tr id="range-row">
<th><input id="range" type="range" /></th>
<th><label for="range">range</label></th>
<td id="r_autocomplete"></td>
<td id="r_autofocus"></td>
<td id="r_list"></td>
<td id="r_max"></td>
<td id="r_min"></td>
<td id="r_step"></td>
</tr>
</tbody>
</table>
<table id="color-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autocomplete</th>
<th>autofocus</th>
<th>list</th>
</tr>
</thead>
<tbody>
<tr id="color-row">
<th><input id="color" type="color" /></th>
<th><label for="color">color</label></th>
<td id="c_autocomplete"></td>
<td id="c_autofocus"></td>
<td id="c_list"></td>
</tr>
</tbody>
</table>
<table id="checkbox-radio-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>autofocus</th>
<th>checked</th>
<th>required</th>
</tr>
</thead>
<tbody>
<tr id="checkbox-row">
<th><input id="checkbox" type="checkbox" /></th>
<th><label for="checkbox">checkbox</label></th>
<td id="cb_autofocus"></td>
<td id="cb_checked"></td>
<td id="cb_required"></td>
</tr>
<tr id="radio-row">
<th><input id="radio" type="radio" /></th>
<th><label for="radio">radio button</label></th>
<td id="rb_autofocus"></td>
<td id="rb_checked"></td>
<td id="rb_required"></td>
</tr>
</tbody>
</table>
<table id="file-upload-table">
<thead>
<tr>
<th><code>&lt;input&gt;</code></th>
<th>type</th>
<th>accept</th>
<th>autofocus</th>
<th>multiple</th>
<th>required</th>
</tr>
</thead>
<tbody>
<tr id="file-row">
<th><input id="file" type="file" /></th>
<th><label for="file">file</label></th>
<td id="f_accept"></td>
<td id="f_autofocus"></td>
<td id="f_multiple"></td>
<td id="f_required"></td>
</tr>
</tbody>
</table>
<p>See also <a href="/code/html5-forms-ui-support.html">html5 forms UI support</a> &amp; <a href="/code/html5-textarea-attribute-support.html">html5 textarea attributes support</a>.</p>
<p><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-input-element.html#input-type-attr-summary">Reference</a> <a href="http://gist.github.com/208473">Core Tests</a></p>
<p class="small">Copyright &copy; 2009 Michael Taylor (<a href="http://www.twitter.com/miketaylr">@miketaylr</a>) and licensed under the <a href="/code/license.txt">MIT license.</a> Special thanks to <a href="http://paulirish.com">Paul Irish</a>.</p>
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script type="text/javascript">try {var pageTracker = _gat._getTracker("UA-1911699-3");pageTracker._trackPageview();} catch(err) {}</script>
</body>

</html>


출처 - http://miketaylr.com/code/input-type-attr.html


저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

div로 세로 정렬 해결법 css코딩[핵]  (0) 2011.08.01
선의 모양(border-style)  (0) 2011.01.07
align="absmiddle"  (0) 2010.10.27
웹표준 준수사항  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
:

div로 세로 정렬 해결법 css코딩[핵]

Language/CSS 2011. 8. 1. 14:05

table의 td는 style의 vertical-align을 지정하여, 텍스트와 이미지를 배치할 수 있지만,
div 태그안에서는 vertical-align이 적용되지 않습니다.

 

div에 vertical-align을 지정하려면 아래와 같이 합니다.

 

x:left, y:bottom 정렬

<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
      <div style=" #position: absolute; #top: 100%; display: table-cell; vertical-align: bottom;">
            <div style=" #position: relative; #top: -100%">
            내용을 하단으로...
            </div>
       </div>
 </div>

 

 

x:center, y:bottom 정렬

<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
      <div style=" #position: absolute; #top: 100%; #left: 50%; display: table-cell; vertical-align: bottom; text-align: center;">
            <div style=" #position: relative; #top: -100%; #left: -50%;">
            내용을 하단 중앙으로...
            </div>
       </div>
</div>

 

x:center, y:center 정렬
<div style="display: table; width: 500px; height: 100px; #position: relative; overflow: hidden; border: 1px solid red;">
      <div style=" #position: absolute; #top: 50%; #left: 50%; display: table-cell; vertical-align: middle; text-align: center;">
            <div style=" #position: relative; #top: -50%; #left: -50%;">
            내용을 가운데로...
            </div>
       </div>
</div>

 

display: table;은 table 태그 이외의 것을 table처럼 화면에 표시하도록 합니다.
그리고 display: table-cell;이 적용된 태그는 테이블의 셀과 동일하게 취급하기 때문에
td와 마찬가지로 vertical-align을 사용할 수 있습니다.

 

하지만 IE에서는 display: table;과 display: table-cell;을 모두 지원하지 않기 때문에,
CSS # 핵(#position과 #top, #left)을 이용해서 텍스트의 위치를 배치하고,

IE 이외의 브라우저에서는 vertical-align과 text-align 값으로 위치를 조정합니다.

-출처 : http://blog.naver.com/hee0133?Redirect=Log&logNo=120117010679

 

[출처] div로 css코딩을 하는데.. 세로 정렬 해결법|작성자 버블버블

저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

html5 태그 지원 테스트  (0) 2013.02.21
선의 모양(border-style)  (0) 2011.01.07
align="absmiddle"  (0) 2010.10.27
웹표준 준수사항  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
:

선의 모양(border-style)

Language/CSS 2011. 1. 7. 16:56

선의 모양(border-style)
solid, double, groove, dotted, dashed, inset, outset, ridge, hidden

 

border-style

 

 

 

선의 굵기(border-width)와 선의 색상(border-color)은 별도로 설명할 필요는 없을 것 같아 선의 모양(border-style)과 같이 표현해 보겠다.

 

 style에 inset 을 넣고 노란색으로 10pt의 박스를 만든 예

style="border-width: 10pt; border-style: inset; border-color:yellow"

 

 테이블에 border style 을 적용한 예

스타일시트를 적용한 테이블

스타일시트 소스

<style>
table { border-color: #408080; border-style: dashed; }
td { border-color: #FFBD32; border-style: ridge; }

</style>

 

 

 

이 밖에도 박스의 위/아래/좌/우를 별도로 지정해서 값을 지정할 수도 있다.

속성의 명칭은 border-style, border-width, border-color의 중간에 top. bottom, left, right 를 넣으면 된다.

예를 들면, 상단선의 색상의 속성 명칭은 border-top-color 이 된다.

 

 아래에 선을 넣은 예

style="border-bottom-color:green; border-bottom-style:dotted; border-bottom-width:10px;"

 

 좌/우에 선을 넣은 예

style="border-left-color:pink; border-left-style:double; border-left-width:20px; border-right-color:cyan; border-right-style:ridge; border-right-width:10px"
저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

html5 태그 지원 테스트  (0) 2013.02.21
div로 세로 정렬 해결법 css코딩[핵]  (0) 2011.08.01
align="absmiddle"  (0) 2010.10.27
웹표준 준수사항  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
:

align="absmiddle"

Language/CSS 2010. 10. 27. 09:35

img align="속성" align="absmiddle" 에 대해서 몇가지 실험해봤어요 (익스와 파폭)

 

 

글자와 이미지의 세로 정렬 문제로..

이글저글 읽어보다가 눈으로 확인하고 싶은 마음에 실험에 들어갔답니다

서투르신 분들께 도움이 되었으면 하는바램입니다...^^;

간단 명료한 설명을 위해 딱딱한 글로 기제함을 이해해주세요.


absmiddle 은.. (absolute middle)

절대적으로 가운데로 하란뜻이라고 보면 될듯하다

정렬후에는 세로정렬에 영향을 준다

확인 해야할부분(로그인버튼)

이미지 테그에 적용방법

img src="ooo.gif" width="40" height="25" border="0" align="absmiddle"

캡쳐이미지1) align="absmiddle" 적용전 (위 이미지)

 

 

캡쳐이미지2) align="absmiddle" 적용후 (위 이미지)

 
이밖에 참고사항
 
img태그나 기타 태그 속성중에 align="absmiddle" 는 비표준이므로
middle 로 수정해서 쓰라는 글로 인해 테스트겸  middle로 적용후 확인해보았다
 
align="middle" 로 적용된 확인결과는 아래 캡쳐 참고
캡쳐이미지3) align="middle" 적용후 (위 이미지)
 
테스트 결과 글자들과의 세로정렬이 absmiddle과의 차이점을 알수있다.
역시나 absmiddle 의 효과를 볼려는 이들에게는 middle의 속성으로는 그효과를 볼수없다 
파폭에서도 middle 적용시 위와같은 같은 결과가 나왔다.
 
 
즉, 결론은...
이미지와 글자의 높낮이 정렬문제는 align="absmiddle"를 쓰면될듯하다
(익스 파폭 확인결과 캡쳐2이미지로 적용되었음)



속성들의 관련 자료 (참고하세요)
이미지와 텍스트의 위치를 지정하기 위해서는 img 태그의 속성중 align 속성을 사용합니다.
img 태그를 쓰고 그 뒤에 문장을 쓰면 속성값 대로 문장과 이미지가 정렬됩니다.
기본 형식은 ' <img sre="파일명" align="속성값"> 문자열 ' 입니다.
align 속성을 생략하면 기본값인 top 이 적용됩니다. (align 의 속성값은 아래와 같습니다.  )


left          이미지의 왼쪽에 문자열을 정렬합니다.
right        이미지의 오른쪽에 문자열을 정렬합니다.          
center       이미지의 중간에 문자열을 정렬합니다.
top          이미지의 제일 상단과 문자의 상단을 맞춥니다.            
texttop       영문에서 g 보다 f 가 더 위로 튀어나온 것을 볼수 있는데
                  위로 올리간 문자의 맨위와 이미지의 상단을 맞춥니다.             
middle        문자열의 밑선을 이미지의 가운데에 맞춥니다.
absmiddle  문자열의 가운데를 이미지의 가운데에 맞춥니다. 
bottom      이미지의 하단과 문자열의 하단을 맞춥니다. 
baseline     bottom과 같은 역할을 합니다. 
absbottom  영문문자열에서 해당되며, fight 라는 단어를 쓸때
                   f 보다 g 가 더 밑으로 내려와 있으므로 g 의 밑선과 그림의 하단을 맞춥니다.

[출처] align="absmiddle" 이미지와 글자 높낮이가 다를때 관해서|작성자 셀레베스

저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

div로 세로 정렬 해결법 css코딩[핵]  (0) 2011.08.01
선의 모양(border-style)  (0) 2011.01.07
웹표준 준수사항  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
CSS Reference 레퍼런스  (0) 2010.10.27
:

웹표준 준수사항

Language/CSS 2010. 10. 27. 09:35

웹표준 준수사항 몇가지 (조건 : HTML 4.01 Transitional
 

1) 자바스크립트 지시자나 스타일시트 지시자에 타입정보가 꼭 필요하다.
   <script language="JavaScript" type="text/javascript">
   <style type="text/css" >

 

2) img,  map 태그등에 모두 alt 속성이 필요하다.

 

3) td는 background 속성을 지원하지 않으므로 스타일 시트형태로 표현한다.
    <td style="background-image:url('/img/img.gif');"></td>

 

4) table은 height 속성을 지원하지 않는다.
    <table height="100%"> <-- 에러

 

5) tr은 colspan, height 속성을 지원하지 않는다.
   <tr height="30" colspan="2"> <-- 에러

 

6) body 태그는 2개이상있으면 안된다.
    body에 onLoad때문이라면 body태그대신
   <script language="JavaScript" type="text/javascript">
    window.onload = funcName(arg1,arg2);
   </script>
   형식으로 한다.

 

7) 스타일시트 font-family 에 한글 parsing이 안되는 문제가 있다
    font-family:돋움 의경우 font-family:Dotum 으로 변경한다.

 

8) 스타일시트 선언은 <head> 안에서 해줘야한다. <body> 안에서 선언하면 에러 -_-
    <head>
    <link href="./style.css" rel=stylesheet type='text/css'>
    </head>

 

9) html 안에 bgcolor나 width,height값을 %단위로 속성 삽입시 코텐션빠지면 에러
    <td height="1" colspan="2" bgcolor="#ffffff"></td>
    <table width="100%">
    위와같이 "" 또는 '' 로 감싸줘야한다.

 

10) form 태그가 table 안에 있으면 에러 table을 감싸고 있어야한다. table 안에 있으면 에러
     <form>
     <table><tr><td></td></tr></table>
     </form>
    또한 form태그안에는 name속성과 action 속성이 모두 존재해야한다.
    <map 태그역시 table 바깥에 위치해야함

 

11) 이미지서브밋에 width, height, border 속성을 쓰면 에러.
      <input type="image" src="images/button_search.gif" align="bottom">
      위와같이 align 속성은 쓸수 있음

 

12) url 쿼리스트링의 경우 & 기호는 다음과같이 인코드해주어야한다.
      & + amp; (html 에디터에서는 안보이네요 -_-)
      & a m p ; (띄어쓰기 붙혀서..)
      <a href="/dir/file.php?id=111& a m p ;pwd=222">xxxxxxxx</a>

 

13) img태그나 기타 태그 속성중에 align="absmiddle" 는 비표준 middle 로 수정

 

14) 스타일을 표현할때 width, height 값에 px 안붙이면 에러, 색상코드에 # 안붙이면 에러
      style="width:10px;height:20px;#FFFFFF;"

 

15) hidden 태그경우 <table 안에 들어있으면 에러.. 즉 form 안에 table 밖에 위치
      즉 form태그 안에 table태그 밖에 위치해야함

 

16) body태그에 leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"

     부분 있으면 에러style="margin:0px;" 형태로 바꿔준다.

 

17) 자바스크립트 변수에 html 닫힘태그 쓸때는 escape문자로 표현한다.
      <a href='url'>url<\/a>

 

18) 플래쉬 삽입
      <object type="application/x-shockwave-flash" data="

          <?=$IndexImg?>/index_main.swf" width="260" height="487">
          <param name="movie" value="<?=$IndexImg?>/index_main.swf">
          <param name="quality" value="high">
      </object>
      플래쉬 태그에 classid나 codebase를 쓰면 에러. 다만 js형태로 밖으로 빼놓으면 에러 못찾음 -_-;;

 

19) 주석에 + 기호달면 에러
      <!-- ----------- + ---------------- -->
      위의 형태 에러남..

 

20) DocType를 페이지 맨상단(html태그 밖)에 정의해야함
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

       "http://www.w3.org/TR/html4/loose.dtd">

 

21) TEXT-DECORATION 의 스타일 표현형태
      TEXT-DECORATION: none
      TEXT-DECORATION: yes(x) -> TEXT-DECORATION: underline 

[출처] HTML 웹표준 준수 몇가지|작성자 셀레베스


저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

선의 모양(border-style)  (0) 2011.01.07
align="absmiddle"  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
CSS Reference 레퍼런스  (0) 2010.10.27
Font-family  (0) 2010.10.27
:

CSS의 선택자

Language/CSS 2010. 10. 27. 09:33

- 엘리먼트선택자.(Element Selection)

엘리먼트 선택자는 기본적인 태그명을 작성하고 그에 따른 CSS를 기입하는 방법이다.

예) Tag{ 스타일시트 }

 

- 아이디 선택자(Identity Selection)

태그중 특정태그에 적용된 id값을 찾아서 적용되는 CSS입니다.

예)#ID{ 스타일시트 }

 

- 클래스 선택자(Class Selection)

태그중 특정 태그에 적용된 class를 찾아서 적용되는 CSS입니다.

예) .class{ 스타일시트 }

 

- 전체선택자(All Selection / universal Selection)

전체선택자는 해당 페이지가 적용되는 모든 태그에 적용합니다.

예) *{ 스타일시트 }

 

- 임폴트선택자(링크선택자 / Import Selection)

임폴트(css를 문서 오는 경우)에 쓰이는 선택자.

예) @import url("경로")

 

- 중요구문 선택자. (important Selection)

css의 로딩인식순서와 상관없이 가장 먼저 읽히 도록 설정하는 선택자.

예) .class {color:red; !important }

 

- 객체상속선택자. (하위선택자 / descendant Selection)

특정 태그 또는 아이디 또는 클래스 이하의 특정 부분에 css를 먹이는 선택자.

예) #ID Tag{ 스타일시트 }

예) #ID.class{ 스타일 시트 }

예) .class .class{ 스타일시트 }

예) .class Tag{ 스타일시트 }

예) Tag Tag{ 스타일시트 }

등 복합적으로 혼합 가능.

단 객체상속선택자는 해당하는 부분이 아니여도 적용되는 사례가 종종 발견됨.;;

 

 

- 자식선택자. (child Selection)

특정 엘리먼트 또는 아이디 또는 클래스에서 바로 하위의 특정 엘리먼트 , 아이디 , 클래스를 선택하는 선택자.

(중첩으로 들어가게 되면 중첩된 엘리먼트는 무시)

예) html > body{ 스타일시트 }

 

 

- 인접형제선택자. (adjacent sibling Selection)

특정엘리먼트 또는 아이디 또는 클래스가 닫힌후 처음나오는 특정 엘리먼트, 아이디 ,클래스를 선택하는 선택자.

예) div + p{ 스타일시트 }

 

- 속성선택자. (attribute Selection)

특정엘리먼트에서 어떠한 속성이 존재할경우, 그 속성을 가진 특정엘리먼트를 선택하는 선택자.

예) table[border]{ 스타일시트 }

 


- 유사클래스선택자 (이벤트 체크 선택자 / pseudo-class Seletion)

특정클래스에 마우스에 따른 특정한 이벤트(또는 액션)이 일어날경우에 적용되는 상황을 선택해주는 선택자.

예) a:hover{ 스타일시트 }

예) td:hover{ 스타일시트 }


유사 클래스 선택자 종류(CSS 2.0)

:active         마우스가 onmousedown이 되어있는상태.(왼쪽클릭을 한후 때지 않은상태)

:focus         tabindex focus가 맞추어져 있는 상태. - IE는 안됨

:hover         마우스가 올라가 있는 상태.

:link            들리지 않은 링크(페이지가 열린적이 없음)

:visited        들른후의 링크(페이지가 열린적이 있음)

:first-child    한 엘리먼트 내에서 존재하는 엘리먼트중 가장 처음 엘리먼트- IE는 안됨

:lang           특정 인코딩셋을 사용하는 엘리먼트.- IE는 안됨

 


- 유사엘리먼트선택자 (이벤트 체크 선택자 / pseudo-element Seletion)

특정엘리먼트에 추가 또는 특정부분에 적용 하는 선택자입니다.

예) a:first_letter{ 스타일시트 }

예) td:before{ 스타일시트 }


유사 엘리먼트 선택자 종류(CSS 2.0)

:first-letter  엘리먼트 내에서 가장 처음에 나오는 글자.

:first-line 엘리먼트내에서 가장 먼저나오는, 줄바끔이 되기전까지의 문단.

:before 해당하는 엘리먼트에서 바로 전 에 나오는내용 (content라는 내용을 주로 쓰는듯) - IE는 안됩니다.

:after  해당하는 엘리먼트에서 바로 후 에 나오는내용 (content라는 내용을 주로 쓰는듯) - IE는 안됩니다.

 

- 주황색 부분은 되는걸로 압니다만..

- 녹색부분은 불여우2.0 이상이나 익스7.0 이상에서 해야 제대로 동작하는걸로 압니다 ^ㅡ^)b

 

 

ⓒ CSS마스터전략(앤디버드) + 제 개인적인 지식 + luka님. + w3schools

ⓒ http://cafe.naver.com/hacosa.cafe?iframe_url=/ArticleRead.nhn%3Farticleid=1442

[출처] 희안님의 글을 보고 정리한 CSS의 선택자|작성자 셀레베스


저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

선의 모양(border-style)  (0) 2011.01.07
align="absmiddle"  (0) 2010.10.27
웹표준 준수사항  (0) 2010.10.27
CSS Reference 레퍼런스  (0) 2010.10.27
Font-family  (0) 2010.10.27
:

CSS Reference 레퍼런스

Language/CSS 2010. 10. 27. 09:31
CSS (Cascading Style Sheet)
  1. CSS (Cascading Style Sheet)란 무엇인가?
  2. CSS (Cascading Style Sheet)의 기본 구조(대/소문자 구분,주석처리)
  3. CSS (Cascading Style Sheet)를 HTML 문서에 삽입하는 방법
  4. CSS (Cascading Style Sheet) 사용하는 단위
  5. HTML4.0,CSS 정식 색상 코드
  6. 시스템 색상(User Preference Color)
  7. CSS (Cascading Style Sheet)의 장점 Vs 단점
  8. CSS (Cascading Style Sheet) 메뉴얼 파일(.chm)
  9. 링크 타입(link type) ?
ㅁ font(글꼴) ㅁ text(글자) ㅁ background(배경)
ㅁ border(테두리) ㅁ margin(여백) ㅁ padding(안쪽여백)
ㅁ list(목록) ㅁ position(위치) ㅁ classification(식별)
ㅁ table(표) ㅁ Printing(프린트) ㅁ scrollbar(스크롤바 색상)
ㅁ filter(필터 : Alpha, Blur, Chroma, FlipH, FlipV, Gray, Invert, Light, Mask, Xray)
 

 

 CSS (Cascading Style Sheet) 의 속성 및 속성값

ㅁ NN: Netscape, ㅁ IE: Internet Explorer, ㅁ W3C: Web Standard
 

 
 FONT(글꼴) TOP
CSS Script 내 용 NN IE W3C
font font 글꼴에 관련된 속성을 설정 4.0 4.0 CSS1
font-family fontFamily 글꼴이름을 설정 4.0 3.0 CSS1
font-size fontSize 글자 크기를 설정 4.0 3.0 CSS1
font-style fontStyle 글자의 형태를 설정 4.0 4.0 CSS1
font-variant fontVariant 글자의 대/소문자 설정 6.0 3.0 CSS1
font-weight fontWeight 글자의 두께 설정 4.0 4.0 CSS1
 

 
 TEXT(글자) TOP
CSS Script 내 용 NN IE W3C
color color 글자 색을 설정 4.0 3.0 CSS1
direction direction 글자를 표시하는 방향설정

CSS2
letter-spacing letterSpacing 글자 사이의 간격을 설정 6.0 3.0 CSS1
text-align textAlign 글자의 정렬을 설정 4.0 4.0 CSS1
text-decoration textDecoration 글자의 꾸밈 및 형식 설정 4.0 4.0 CSS1
text-indent textIndent 문단의 첫 줄을 들여쓰기 설정 4.0 4.0 CSS1
text-transform textTransform 글자의 대.소문자 변환 여부를 설정 4.0 4.0 CSS1
line-height lineHeight 줄 간격을 설정 4.0 4.0 CSS1
text-underline-position textUnderlinePosition 밑줄이 그어지는 위치 지정
5.5
word-spacing wordSpacing 단어 사이의 간격을 설정 6.0
CSS1
ime-mode imeMode 입력 할수 있는 곳에 대해서 IME 설정
5.0 CSS1
 

 
 BACKGROUND(배경) TOP
CSS Script 내 용 NN IE W3C
background background 웹문서의 배경을 정의하며 각각의 속성값을 "," 없이 두 개 이상 설정 가능 6.0 3.0 CSS1
background-attachment backgroundAttachment 배경그림을 고정 또는 스크롤 설정 6.0 3.0 CSS1
background-color backgroundColor 배경색 설정 4.0 4.0 CSS1
background-image backgroundImage 배경그림 설정 4.0 4.0 CSS1
background-position backgroundPosition 배경그림 위치 설정 6.0 3.0 CSS1
background-repeat backgroundRepeat 배경그림 반복 여부 설정 4.0 4.0 CSS1
 

 
 BORDER(테두리) TOP
CSS Script 내 용 NN IE W3C
border border 테두리의 너비, 형식, 색을 설정 두 개이상 설정 가능 4.0 4.0 CSS1
border-top borderTop 위쪽 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1
border-bottom borderBottom 아래 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1
border-left borderLeft 왼쪽 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1
border-right borderRight 오른쪽 테두리의 너비, 형식, 색등을 설정 6.0 3.0 CSS1

border-color borderColor 테두리(테두리)의 색을 설정 6.0 3.0 CSS1
border-top-color borderTopColor 위쪽 테두리의 색을 설정 6.0 4.0 CSS2
border-bottom-color borderBottomColor 아래 테두리의 색을 설정 6.0 4.0 CSS2
border-left-color borderLeftColor 왼쪽 테두리의 색을 설정 6.0 4.0 CSS2
border-right-color borderRightColor 오른쪽 테두리의 색을 설정 6.0 4.0 CSS2

border-style borderStyle 테두리 형식 설정 6.0 3.0 CSS1
border-top-style borderTopStyle 위쪽 테두리 형식 설정 6.0 4.0 CSS2
border-bottom-style borderBottomStyle 아래 테두리 형식 설정 6.0 4.0 CSS2
border-left-style borderLeftStyle 왼쪽 테두리 형식 설정 6.0 4.0 CSS2
border-right-style borderRightStyle 오른쪽 테두리 형식 설정 6.0 4.0 CSS2

border-width borderWidth 테두리 두께 설정 4.0 4.0 CSS1
border-top-width borderTopWidth 위쪽 테두리 두께 설정 4.0 4.0 CSS1
border-bottom-width borderBottomWidth 아래 테두리 두께 설정 4.0 4.0 CSS1
border-left-width borderLeftWidth 왼쪽 테두리 두께 설정 4.0 4.0 CSS1
border-right-width borderRightWidth 오른쪽 테두리 두께 설정 4.0 4.0 CSS1
 

 
 MARGIN(여백) TOP
CSS Script 내 용 NN IE W3C
margin margin 여백의 속성을 설정 4.0 4.0 CSS1
margin-top marginTop 위쪽 여백 설정 4.0 3.0 CSS1
margin-bottom marginBottom 아래 여백 설정 4.0 4.0 CSS1
margin-left marginLeft 왼쪽 여백 설정 4.0 3.0 CSS1
margin-right marginRight 오른쪽 여백 설정 4.0 3.0 CSS1
 

 
 PADDING(테두리와 내용과의간격 = 안쪽여백을 뜻함) TOP
CSS Script 내 용 NN IE W3C
padding padding 테두리와 글자 사이 간격 설정
4.0
padding-top paddingTop 위쪽 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1
padding-bottom paddingBottom 아래 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1
padding-left paddingLeft 왼쪽 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1
padding-right paddingRight 오른쪽 테두리와 글자 사이 간격 설정 4.0 4.0 CSS1
 

 
 LIST(목록) TOP
CSS Script 내 용 NN IE W3C
display display 객체에 인라인 또는 블럭단위의 박스를 생성 4.0 4.0 CSS1
list-style listStyle 목록의 형식,위치,그림의 속성을 설정 6.0 3.0 CSS1
list-style-image listStyleImage 목록의 표시를 그림으로 설정 6.0 3.0 CSS1
list-style-position listStylePosition 목록 항목의 위치를 설정 6.0 3.0 CSS1
list-style-type listStyleType 목록의 항목 표시자의 속성을 설정 4.0 4.0 CSS1

 

 
 POSITION(위치) TOP
CSS Script 내 용 NN IE W3C
height height 영역의 높이를 설정 6.0 3.0 CSS1
width width 영역의 너비를 설정 4.0 4.0 CSS1
top top 상단 테두리에서 떨어진 간격 설정 4.0 4.0 CSS2
bottom bottom 하단 테두리에서 떨어진 간격 설정
5.0 CSS2
left left 상단 테두리을 기준으로 왼쪽 간격을 설정 4.0 4.0 CSS2
right right 상단 테두리을 기준으로 오른쪽 간격을 설정
5.0 CSS2
clip clip 4각형 Block Box를 지정하는 수치만큼 가려서 안 보이도록 설정 6.0 4.0 CSS2
overflow overflow width 속성이나 height 속성에 의해서 내용에 따라 화면의 크기를 제어 6.0 4.0 CSS2
position position 화면에 표시할 위치를 설정 6.0 4.0 CSS2
visibility visibility 화면에 표시 여부를 설정 6.0 3.0 CSS1
z-index zIndex Netscape의 <LAYER>와 같은 개념 6.0 4.0 CSS2
 

 
 CLASSIFICATION(식별) TOP
CSS Script 내 용 NN IE W3C
cursor cursor 커서의 모양을 설정 6.0 4.0 CSS2
float float 상위 요소안에서 좌.우로 이동할 것인가를 설정 4.0 4.0 CSS1
clear clear 상위 요소안에서 좌.우로 이동하지 않고 줄바꿈 설정 4.0 4.0 CSS1
zoom zoom 객체의 크기를 확대/축소
5.5 CSS1
link link 링크 설정 : 링크관련 가상 클래스(link,visited,active,hover)
3.0 CSS1
 

 
 TABLE(표) TOP
CSS Script 내 용 NN IE W3C
border-collapse borderCollapse 표(TABLE)에 셀간격 설정
5.0 CSS2
table-layout tableLayout 테이블(표)의 테이블 셀(cell), 줄(row), 컬럼(column)들의 배치에 사용되는 기능
5.0 CSS2
 

 
 Printing (프린트) TOP
CSS Script 내 용 NN IE W3C
page-break-after pageBreakAfter 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정 7.0 4.0 CSS2
page-break-before pageBreakBefore 프린터로 출력할 때 다음 페이지로 페이지를 넘기는 것을 지정 7.0 4.0 CSS2
 

 
 SCROLLBAR COLOR(스크롤바 색상) TOP
CSS 내 용 NN IE W3C
scrollbar-3dlight-color 스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리에 색상 설정
5.5 CSS1
scrollbar-arrow-color 스크롤바의 화살표 박스의 화살표에 색상을 설정
5.5 CSS1
scrollbar-base-color 스크롤바의 arrow, shadow, darkshadow를 제외한 기본적인 곳에 설정
5.5 CSS1
scrollbar-darkshadow-color 스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽 가장 자리에 색상 설정
5.5 CSS1
scrollbar-face-color 스크롤바의 스클롤 박스와 화살표 박스 그리고 트랙의 표면 설정
5.5 CSS1
scrollbar-highlight-color 스크롤바의 스클롤 박스와 화살표 박스의 상단과 왼쪽 가장 자리의 하이라이트 부분과 트랙 설정
5.5 CSS1
scrollbar-shadow-color 스크롤바의 스클롤 박스와 화살표 박스의 하단과 오른쪽의 그림자 부분 설정
5.5 CSS1
scrollbar-track-color 스크롤바의 트랙에 설정
5.5 CSS1
 

 
 FILTER(필터) TOP
CSS Script 내 용 NN IE W3C
Alpha Alpha 그림이나 글자에 투명도를 조정할 수 있는 명령어
4.0
Blur Blur 흐리게 하는 효과
4.0
Chroma Chroma 지정된 특정색을 투명하게 하는 효과
4.0
Dropshadow Dropshadow 특정위치에 그림자를 만들어 줍니다
4.0
FlipH FlipH 이미지나 좌우가 바뀝니다.
4.0
FlipV FlipV 이미지나 상하가 바뀝니다.
4.0
Glow Glow 글자나 이미지에 지정된 색을 번지게 하는 효과를 나타냅니다
4.0
Gray Gray 흑백 이미지를 만듭니다.
4.0
Invert Invert 색조, 순도, 명도(필름 효과)를 반전
4.0
Light Light 조명 효과를 주어 이미지의 특정 부분을 밝게 해줍니다.
4.0
Mask Mask 불투명한 것은 투명한 마스크를 씌우고 투명한 것은 지정된 색으로 마스크를 씌워 줍니다.
4.0
Shadow Shadow 지정하는 색상과 방향으로 그림자를 만들어 줍니다.
4.0
Wave Wave 물결 형태의 웨이브를 만들어 주는 필터입니다.
4.0
Xray Xray X-ray 사진 같은 효과를 나타내 주는 필터입니다.

[출처] CSS Reference 레퍼런스 |작성자 셀레베스
저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

선의 모양(border-style)  (0) 2011.01.07
align="absmiddle"  (0) 2010.10.27
웹표준 준수사항  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
Font-family  (0) 2010.10.27
:

Font-family

Language/CSS 2010. 10. 27. 09:29

Font-family 란?>

각각의 font-family는 일반적인 특성을 공유하는 폰트의 집합체를 담고 있다.

font-family는 산세리프(sans-serif), 세리프(serif), 모노스페이스(monospace),

흘림체(cursive), 판타지(fantasy)

총 5개가 존재한다.

 

1. Sans-serif family : 세리프가 없는 폰트를 포함하고 있다.

Verdana, Arial Black, Trebuchet MS, Arial, Geneva

 

2. Serif family  : 신문에서 흔히 볼 수 있는 폰트 이다.

Times, Times New Roman, Georgia

 

3. Monospace family : 일정한 폭의 문자를 가진 폰트로 구성

Courier, Courier New, Andale Mono

 

4. Cursive family : 손으로 쓴것 같아 보이는 폰트를 포함

Comic Sans, Apple Chanery

 

5. Fantasy family : 화려한 양식의 폰트들을 포함

LAST NINJA, Impact

 

 

<Font-family 동작 방법>
body{
    font-family: Verdana, Geneva, Arial, sans-serif;
}

1. Verdana폰트가 컴퓨터에 사용가능한지 체크 없으면 다음으로
2. Verdana폰트가 사용 할 수 없다면 Geneva폰트를 찾는다.  없으면 다음으로
3. Geneva폰트가 사용 할 수 없으면 Arial폰트를 찾는다. 없으면 다음으로
4. 다 없으면 sans-serif 사용

[출처] CSS Font-family 란..|작성자 셀레베스

저작자표시 비영리

'Language > CSS' 카테고리의 다른 글

선의 모양(border-style)  (0) 2011.01.07
align="absmiddle"  (0) 2010.10.27
웹표준 준수사항  (0) 2010.10.27
CSS의 선택자  (0) 2010.10.27
CSS Reference 레퍼런스  (0) 2010.10.27
:
◀ PREV : [1] : NEXT ▶

티스토리툴바