'CSS'에 해당되는 글 2건

  1. 2008.04.19 CSS 로딩하는 세 가지 방법
  2. 2008.04.18 CSS Selectors
/**
아무 생각 없이 작성한 포스트였는데 알고보니 100번째로 작성한 포스트군요. 작성 도중에 지워 버린 포스트도 있고, 시작만 하고 완성하지 못해 공개 해놓지 못한 포스트들도 있어서 컨텐츠의 개수는 100개가 안되지만 어쨌거나 100번째로 작성하고 있는 포스트라니..감회가 새롭습니다. 예전에 네이버 블로그를 사용 할 때는 거의 모든 포스트들이 다른 블로그의 내용들을 가지고 온 것들이었는데, 이 블로그의 포스트들은 모두 제 손을 거쳐 탄생된 것들이어서 더욱 애착이 가네요^^;
*/

가장 먼저 해야 할 일은 CSS를 작성하는 것이지만 작성에 결과를 바로 바로 보면서 진행 해 나갈 수 있도록 하기위해 CSS를 로딩하는 방법에 대해 먼저 알아 보도록 하겠습니다. 만일 이 포스트를 읽고 계시는 분 중에 CSS작성에 대해서는 관심이 없고 기존에 작성되어 있는 CSS 정의들을 로딩하기만 원하시는 분들은 여기 까지만 읽으셔도 무방합니다.

1. 다른 파일에 있는 CSS 로딩 하기(External Style Sheet)

<link rel='stylesheet' type='text/css' href='cascading/style/sheet/path.css' />

2. HTML 파일에서 CSS 선언 하여 사용하기(Internal Style Sheet)

HTML codes are here!!
...
  <style type="text/css">
      <!-- CSS codes are here!! -->    
  </style>
...  
HTML codes are here!!

3. HTML 엘리먼트에 CSS 직접 적용하기(Inline Styles)

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

4. 한개 이상의 CSS를 사용한다면?(Multiple Style Sheets)
만일 여러개의 External CSS를 사용하거나, Internal CSS를 사용하고 또 Inline CSS를 사용하는데 똑같은 엘리먼트에 다른 스타일을 정의 했을 수도 있다. 이런 경우 Inline > Internal > External 순서로 하위 CSS가 먼저 적용되고, 그 다음 상위 CSS가 적용된다. 예를 들어 :
/* External CSS */
h3 {color:red;text-align:left;font-size:8pt;}

/* Internal CSS */
h3 {text-align:right;font-size:20pt;}
라면 :
h3 {color:red;text-align:right;font-size:20pt;}

과 같은 스타일이 적용된다. 하지만 만약 external css가 <head> 태그 내에 선언된 internal css 뒤에 위치한다면
internal css와 external css의 스타일이 적용되는 순서는 바뀐다. 즉, css가 선언된 순서가 중요하다는 뜻이다.

참조 :
 - http://www.w3schools.com/css/css_howto.asp

'진리는어디에 > Web' 카테고리의 다른 글

CSS 로딩하는 세 가지 방법  (0) 2008.04.19
CSS Selectors  (0) 2008.04.18
XMLHttpRequest 의 속성과 메소드  (2) 2008.04.17
HTTP 트랜젝션의 구조  (0) 2008.03.05
Posted by kukuta
TAG CSS, Web

댓글을 달아 주세요

CSS는 단순한 HTML태그에 여러가지 스타일 속성을 부여해서 보다 아름다운(?) 웹 페이지를 만들 수 있도록 도와줍니다. 하지만 모든 태그에 동일한 스타일 속성을 지정한다면 정말 무미건조 해지겠지요. 그래서 특정 태그만을 지정 하여 속성을 적용 할 수 있도록 범위를 한정 지을 수 있습니다. 그 때 사용되는 것이 바로 CSS Selector 입니다.

CSS Selector를 사용하여 스타일 적용 범위를 한정 하는 것에는 간단하게 세 가지 방법으로 나뉩니다. 물론 앞의 세 가지 방법들을 조합해서 사용하는 것도 가능하구요 :

  • 태그를 이용해 구분하는 방법
  • 클래스를 이용해 구분하는 방법
  • 아이디를 이용해 구분하는 방법

그럼 위의 세 가지 방법에 대해서 보다 자세히 알아 보도록 하겠습니다.

태그를 이용해 구분하는 방법

처음으로 태그를 이용한 selector에 대해서 알아보도록 하겠습니다. 예를 들어 '<DIV> 태그에 포함 되어진 모든 <H1> 태그들에 대해서 이런저런 스타일 속성을 지정하라!' 같은 것은 아래와 같이 표시 될 수 있을 겁니다 :

DIV H1 { color: red; }

위의 코드를 한번 다시 살펴 볼까요. 먼저 'DIV H1' 이라는 것에 주목을 해보도록 하겠습니다. 왠지 디렉토리 경로 표시에서 '\'나 '/'를 제외한 것 같지 않습니까? 네~ 맞습니다. CSS는 기본적으로 DOM 문서 규칙을 채택하고 있기 때문에 문서를 하나의 트리 형태, 즉, 디렉토리 구조와 같이 계층형으로 문서의 구조를 유지 하고 있습니다. 특정한 엘리먼트를 찾으려면 디렉토리 패스를 따라가듯이 경로를 지정 해 주시면 됩니다.

'{ color: red; }' 라는 것은 CSS를 적용하는 방법으로써, 찾아진 엘리먼트에 대해서 빨간색을 적용 하라는 뜻입니다.

클래스를 이용해 구분하는 방법

태그의 속성 중에 'class'라는 것이 있습니다.  class 속성을 이용하여 선택을 하려면 '.'를 클래스 앞에 붙여 주면 됩니다. 예를 들어 'callout이라는 클래스 속성을 가진 <div>태그 안에 있는 텍스트는 이런저런 속성을 지정 하라!' 라는 규칙을 적어 주고 싶다면 아래와 같이 하면 됩니다 :

.callout { border: solid blue 1px; background-color: cyan; }

위의 스타일을 태그에 지정하기 위해서는 태그의 클래스 속성을 'callout'이라고 하기만 하면 됩니다. 아래와 같이 말입니다 :

<div>이 텍스트는 일반 텍스트 형태로 보여 집니다</div>
<div class='callout'>이 텍스는 callout 스타일 속성이 적용된 체로 보여 집니다</div>

또한 한 개 이상의 클래스에도 중복적인 스타일 지정이 가능합니다. 아래와 같이 'loud'라는 클래스에 대한 스타일 속성이 추가적으로 지정되었다고 가정해 봅시다 :

.loud {color: orange }

그리고 이전에 했던것 과 비슷하게 두 스타일을 하나의 태그에 적용 시켜 보도록 하겠습니다 :

<div class='loud'>오랜지색 텍스트입니다</div>
<div class='callout'>callout 스타일 속성이 적용된 텍스트입니다</div>
<div class='callout loud'>위의 두 가지 스타일 속성이 동시에 적용된 텍스트입니다</div>

아이디를 이용해 구분하는 방법

아이디를 이용하여 selector를 적용하는 방법은 클래스를 이용한 것과 거의 비슷합니다. 다만 '.'가 '#'로 변경 된 것 외에는 다른 것이 없습니다. 다만 클래스는 한 HTML문서에서 여러번 나타날 수 있지만, 아이디는 한번만 나타나야만 한다는 것이 차이점이라고 할 수 있습니다. 그러니까  아이디를 이용해 속성을 적용한다는 것은 하나의 태그에만 속성을 적용한다는 뜻이지요. 간단하게 아래의 예를 보도록 하겠습니다 :

#close { color: red }

close라는 아이디를 가진 태그의 문자는 빨간색으로 스타일 속성을 지정하라는 뜻입니다. 그리고 이것이 의미하는 것은 여러 태그에 지정되는 것이 아니라  단 하나의 태그에만 지정된다는 것입니다.

위의 방법들을 복합적으로 사용

위에서 나온 방법들은 하나씩 따로 쓸 수 있을 뿐만 아니라, 원하는 만큼 서로 섞어서 사용 할 수도 있습니다. 예를 들어 '<span> 태그 중 클래스 속성이 highlight인 태그들에게 이런저런 스타일 속성을 지정하라!'라고 한다면 아래와 같이 태그에 대한 select방법과 클래스에 대한 select방법을 복합해서 사용 할 수 있습니다 :

span.highlight { backgroud-color: yellow }

그리고 계층적으로 구성 되어 있는 태그일지라도 복합적인 방법을 이용해서 사용하는 것이 가능합니다. 아래 처럼요 :

div.prose span.highlight { background-color: yellow }

Ref.

  • Ajax in Action

'진리는어디에 > Web' 카테고리의 다른 글

CSS 로딩하는 세 가지 방법  (0) 2008.04.19
CSS Selectors  (0) 2008.04.18
XMLHttpRequest 의 속성과 메소드  (2) 2008.04.17
HTTP 트랜젝션의 구조  (0) 2008.03.05
Posted by kukuta
TAG CSS, Web

댓글을 달아 주세요