Recently in WEB Category

CSS기본

By 집중 on April 13, 2009 9:00 AM | 댓글 없음 | 트랙백 없음

CSS 기본

zbum

I. 서론

웹표준에 입각한 웹페이지를 구성하는데 있어 구조-형식-동작의 분리는 필수적인 요소이다. 지금껏 웹페이지의 디자인을 위해 아무렇게나 써왔던 TABLE Layout, 형식을 위한 tag들을 사용하지 않기위하여 CSS에 대한 깊은 이해는 필수적이다.

 

CSS는 Selector와 Definition으로 구성되어 있으며 Selector을 이해한다면 CSS의 70% 이상을 이해한 것일 할 수 있다. 나머지 Definition은 레퍼런스를 이용하여 계속 참조해 나가야 할 부분이다.  그럼 이제부터 CSS Selector에 대해서 공부해 보자.

II. 본론

1) CSS 의 구성

 CSS는 선택자(Selector)와 선언부로 이루어져 있다. 선언부는 속성과 값으로 구성되어 있다.

 

CSS_BASIC.png 

 

2) CSS 선택자와 HTML 엘리먼트

 CSS의 Selector는 웹페이지의 Document상에서 CSS 속성을 적용할 HTML ELEMENT를 선택(특정,Targeting)하기위한 CSS구성요소 이다.

 CSS Selector의 역할은 아래 그림을 보면 명확히 알 수 있다. 즉, xxx.css에서 p라는 selector를 사용하면 그 CSS를 적용한 HTML문서의 모든 p tag에 해당 속성이 적용된다. 아래 그림처럼 <p>가나다라마</p> 는 볼드체에 파란색 글씨로 보일 것이다.

 

 CSS_HTML.png

 

 

 3) CSS 선택자의 종류

위의 예와 같이 HTML 의 엘리먼트를 선택하는 선택자 뿐만아니라 다양한 형태의 CSS Selector가 존재한다.  아래는 CSS2기준의 Selector이다.

 

구분 패턴 대상 비고
universal selector * Document 상의 모든 HTML Element를 선택  
Element type Selectors E Dcouement 상의 모든 E 엘리먼트 타입을 선택  
Descendant Selectors E F E의 하위도드중 F 타입을 선택  
Child Selectors E > F E의 자식 노드 중 F 타입을 선택  
Class Selector .aaa class 속성이 aaa 인 HTML 엘리먼트 선택  
ID Selector #bbb id 속성이 bbb인 HTML 엘리먼트 선택  
Pseudo-element Selector E:first-child    
Pseudo-class E:active,
E:hover,
E:focus		 특정 조건하의 모든 엘리먼트를 선택  
Adjacent Selector E+F E엘리먼트 다음에 바로 F엘리먼트가 이어지면 선택     엘리먼트간 간격 조정등에 유용 IE8에서 지원
Attribute Selectors       E[foo],    foo 속성값이 지정된 E엘리먼트 선택   
    E[foo=“warning”],    foo 속성값이 warning인 E엘리먼트   
    E[foo~=“warning”]    foo 속성값에 단어 warning 이 포함된 E엘리먼트   
    E[lang|=“en”]    lang 속성값에 ‘-’으로 구분된 en값이 포함된 E엘리먼트		 lang=“en-uk”
lang=“en-us”

 

III. 결론

CSS의 Selector에 대해서 살펴보았다.

다음엔 CSS를 이용한 웹페이지 Layout에 대해서 살펴 보겠다.

 

이 글은 스프링노트에서 작성되었습니다.

jquery UI의 Slider사용해 보기

By 집중 on January 8, 2009 12:10 AM | 댓글 없음 | 트랙백 없음
슬라이더는 웹어플리케이션에서 큰 기능성으로 어필하진 않지만 사용자 인터페이스의 직관성과 편의성을 높여 어플리케이션의 체감완성도를 높여 줄 수있다. 한마디로 그럴듯 해 보인다는 거다..

먼저 슬라이더의 구현모습을 보자.



jquery로 구현하는 소스코드는 놀라울 만치 간결하고 명료하다. 구현 소스코드
<html>
  <head>
    <script>
        $("#example_slider").slide();
    </script>
  </head>
  <body>
    <div id="example_slider"></div>
  </body>
</html>


커스터마이징을 위한 여러가지 옵션이 있다. 상세한 옵션은 다음 링크를 참조 할것.

jquery UI/Slider Document

jQuery UI 의 Dialog

By 집중 on December 10, 2008 11:15 PM | 댓글 2 개 | 트랙백 없음
최신 브라우져 및 툴바 에서 팝업이 악용되는 것을 방지하기 위하여 팝업창을 제어하고 있다. 이에 영향을 받지 않는  jquery 기반의 팝업을 사용할 수 있다.

샘플코드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#example").dialog({ autoOpen: false });
    $("#poppop").click( function() {
        $("#example").dialog('open');
    });
  });
  </script>
  
</head>
<body>
  <link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.dialog.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.resizable.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.draggable.js"></script>


<div id="example" class="flora" title="This is my title">I'm in a dialog!</div>
<input type="button" id="poppop" value="popup" />
</body>
</html>

결과화면( 버튼을 클릭해보자.. )
I'm in a dialog!

jquery UI progressbar 적용해 보기

By 집중 on December 7, 2008 1:35 AM | 댓글 없음 | 트랙백 없음
jquery ui의 프로그래스바를 적용해 본다. 항상 그렇지만 jquery는 정말 간단하게 하나의 메서드(method)로 적용가능하다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("#progressbar").progressbar();
    $("#start").click(function(){
      $("#progressbar").progressbar('start');
    });
  });
  </script>
  
</head>
<body>
  <link rel="stylesheet" href="http://dev.jquery.com/view/tags/ui/latest/themes/flora/flora.all.css" type="text/css" media="screen" title="Flora (Default)">
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.progressbar.js"></script>


<div id="progressbar"></div> <input type="button" value="Start" id="start" />
</body>
</html>
이렇게 하면 아래와 같이 프로그래시브 바와 버튼이 표시된다.

mixsh 등록

By 집중 on December 7, 2008 1:00 AM | 댓글 없음 | 트랙백 없음
인증키: wAdGgPHRT2sRAD3AJcCwR2t5H/btSNdw3N7mo4xtq3E=
« TEST | Main Index | Archives | 개발환경 »

About This Blog Author

정지범(jibum.jung@gmail.com)

Search

Google AdSense

Clock Link

Categories

Monthly Archives

Pages

Developers Works

Creative Commons License
This blog is licensed under a Creative Commons License.