47472 Members __ Online

정렬
HOME스터디[s]웹표준

DIV 레이아웃 [4-1] : CSS 기초 개념 잡기

posted by 라부
date : , update :
hit : 33867, scrab : 1 , recommended : 15

죄송합니다....

마지막 강좌를 올리고 벌써 2달이 훌쩍 넘어 버렸네여.

팅가 팅가 놀다가 댓글 남기신 것들 보구 오홋~!!!~~!!!! 

 

=============================================================================================================

 

사실 CSS를 자세히 공부하려면 그 분량이 만만치 않습니다.

그만큼 또 HTML 작업에 있어서 중요한 부분이기도 하지요.

 

DIV 레이아웃 작업에 있어서 CSS는 핵심입니다.

또한 사키히로님께서 질문하신 방탄웹도 결국은 CSS를 어떻게 다루느냐의 문제구요.

CSS만 가지구서도 책을 서너권은 너끈히 쓸 수 있을 만큼 그 내용이 방대합니다. (방탄웹 포함)

하지만 CSS도 기본적인 개념만 탑재가 된다면 혼자서 공부해 나가는게 그다지 어렵지 않습니다.

 

오늘은 그 개념잡기 놀이를 해보도록 하겠습니다.

물론 쉽게 쉽게 나가보는게 더 잼나겠져? ^^

 

 

 

1. Cascading Style Sheets

 

CSS란 Cascading Style Sheets의 약자입니다.

Cascading에 대해서는 좀 있다 설명 드리기로 하고 Style Sheets이란 말부터 살펴 보겠습니다.

 

Style Sheets이라....

단어의 뜻을 액면 그대로 해석해 보세요.

어떤 스타일을 정리해 놓은 종이(또는 서류)... 뭐 대충 이런 느낌이 드시나요?

맞습니다. Style Sheets이란 바로 그런 뜻입니다.

 

그럼 여기서 얘기하는 스타일이란 그럼 구체적으로 뭘까요?

시각적인 느낌... 형태나 모양.... 색감..... 디자인... 뭐 이런거 아니겠습니까?

 

무엇에 대한 시각적인 느낌인지..

무엇에 대한 형태나 모양을 뜻하는 것인지...

무엇에 대한 색감을 나타내는 것인지...

무엇을 디자인 하는 것인지....

아직 모르겠다라고 하실 분들은 없겠지요... ^^

 

Style Sheets은

HTML 문서에 대한 시각적인 느낌, 형태나 모양, 색감, 디자인 등을 정리해 놓은 서류인 것입니다.

지난 시간에 말씀 드린 것처럼

HTML은 이제부터 문서의 구조와 의미만을 나타내는데 사용해야 하기 *문에

해당 HTML 페이지의 디자인 적인 모든 요소들은

따로 분리하여 이 Style Sheets이라는 별도의 서류에 일괄 정리해 놓는다는 이야기입니다.

 

제로보드나 태터툴스에서

스킨을 바꾸면 사이트 디자인을 맘대로 바꿀 수 있는 것은

HTML 문서의 구조와 디자인이 분리되어 있기 때문에 가능한 것입니다.

 

모든 웹브라우저에서 완벽하게 작동하는... 깨지지 않는 방탄 웹페이지를 만들 수 있는 것도

각 브라우저에 최적화된 디자인적인 요소들만을 별도로 여러개 준비해 놓기 *문에 가능한 것입니다.

 

한가지 예를 더 들어 볼까요?

(당신 내가 바보인줄 알어? 이렇게 까지 예를 들어야 되겠어?...... 라고 화내지 마세요. ^^;; )

 

지금 가수 한명을 키울려고 하는 음반 제작자가 있습니다. (웹 개발자)

그리고 여기 그 가수가 있습니다. (HTML)

가수에게는 의상 코디네이터가 당연히 따라 다니죠. (CSS)

제작자는 가수에게 좋은 곡을 만들어 주고 연습을 시켰습니다. (HTML Contents - 문서의 내용) 

그래서 그 가수는 좋은 노래를 정말 잘 부르게 되었습니다. (표준에 맞게 코딩된 Well-Formed HTML Document)

코디네이터도 그 가수에게 나름대로 잘 어울린다 싶은 스타일의 의상을 입혀 주었습니다. (CSS로 HTML 문서를 예쁘게 꾸며 줌)

노래는 좋은데 반응이 별로입니다. 너무 촌스럽답니다.

그래서 제작자는 코디를 교체하여 가수를 좀 더 세련된 모습으로 변신 시켰습니다. (CSS를 변경하여 HTML 문서의 디자인을 바꿈)

 

ㅋㄷㅋㄷ.... 나름 쉽게 설명하려고 했는데

증말 유치하네요.... ^^;;

 

어*든 CSS란 HTML 문서를 디자인적인 측면에서 예쁘게 꾸며주는 역활을 하는 그런 코디네이터 같은 존재랍니다.

 

 

 

2. CSS를 HTML에 적용하는 방법

 

CSS를 HTML 문서에 적용하는 방법은 여러가지가 있습니다.

HTML 문서 안에 직접 포함시켜서 사용할 수도 있구요.

.css 라는 독립적인 파일 형태로 만든 다음 .html 파일에서  불러다 쓸 수도 있습니다.

 

1) HTML 문서안에서 직접 사용하기

- style 어트리뷰트를 사용하기 (인라인 CSS: In-line CSS)

간단합니다. 이런거죠.

 

<div style="border:1px solid white;"></div>

- style 엘레먼트를 사용하기 (임베디드 CSS: Embedded CSS)

HTML 문서 상단 <head></head> 사이에

 

<style type="text/css">

    div { border:1px solid white; }

</style>

 

이런식으로 스타일을 지정해 주는 방법입니다.

2) .css 파일로 분리한 후 HTML 에서 해당 .css 파일을 호출하여 사용하기

main.css 라는 스타일시트 파일이 있다고 가정합시다.

이 파일을 메모장에서 열어 보면

div { border:1px solid white; }

일케 되어 있습니다. <style type="text/css"> 이런거 필요없이

그냥 바로 div { border:1px solid white; } 만 들어 있는 모습이지요.

메모장에서 위와 같이 입력한 뒤 저장할 때 .css로 저장하기만 하면 됩니다.

간단하죠?

 

이처럼 CSS를 별도의 파일로 만들어 사용하는 이유는

좀 큰 규모의 사이트일 경우

CSS의 내용이 아주 방대해 질 수 있습니다.

그리고 HTML 페이지가 아주 많은 사이트일 경우

스타일을 변경할 때 CSS가 모든 각각의 HTML 페이지 안에 다 들어가 있다면

일일이 그 하나 하나의 HTML 페이지를 열어서 수정을 해야 하기 때문에 여간 불편한 일이 아닐 수 없지요.

 

따라서 이처럼 CSS만 별도의 .css 파일로 만들어서 여러 HTML 페이지에서

공용한다면 나중에 CSS를 변경할 일이 생겨도

한두개의 .css 파일만 수정하면 됨으로 아주 편리하게 작업할 수 있습니다.

 

위에서 예제로 만든 이 main.css 를 HTML로 불러와 사용하는 방법은 다음과 같습니다.

 

 

- link 엘레먼트 사용하기

HTML 문서 상단에 있는 <head></head> 사이에

 

<link type="text/css" href="main.css" rel="stylesheet" />

 

와 같이 main.css 파일의 경로를 지정해 주면 됩니다.

파일의 경로는 절대경로, 상대경로... 둘다 상관없습니다.

- style 엘레먼트 안에서 @import 구문 사용하기

마찬가지로 <head></head> 사이에

 

<style type="text/css">
  @import url(main.css);
</style>

 

와 같이 main.css 파일의 경로를 지정해 주면 됩니다.

 

참고로 위와 같이 @import를 사용하는 방법은

외부 .css 파일을 불러오는 것과 직접 스타일을 지정해 주는 방법 두가지를

동시에 사용할 수 있다는 장점이 있습니다.

다음과 같이 말이죠....

 

<style type="text/css">
  @import url(main.css); 

  p { color : #f00; }
</style>

 

단점은 오래된 브라우저들(넷스케이프 4 등)의 경우 @import 구문을 인식하지 못한다는 것인데

이것을 장점으로 승화시켜 방탄웹을 구축할 때 사용하기도 합니다. (나중에 공부할꺼에여... 이거..)

 

 

3. Cascading 에 대하여...

 

Cascading 이란 계층적이란 의미를 갖습니다.

언뜻 철학적인 듯한 느낌이 들지만 별거 아닙니다.

방금 전 2번에서 CSS를 HTML에 적용하는 4가지 방법을 말씀 드렸었죠?

이 4가지 방법들 사이에는 스타일 적용 시, 우선 순위가 존재한다는 뜻입니다.

 

우선 순위가 높은 것부터 차례대로 나열하자면 다음과 같습니다.

 

1. Style 어트리뷰트 (인라인 CSS)

2. Style 엘레먼트 (임베디드 CSS)

3. Link 엘레먼트

4. @import 구문

 

예를 들어 설명해 보겠습니다.

다음의 HTML을 봐주세요.

 

<head>

<style tyle="text/css">

div { border:1 px solid red; }

</style>

</head>

<body>

<div style="border:2px solid blue;">구지성 *오~!!!</div>

</body>

 

위의 HTML을 보시면 div 는 하나인데 그 div의 테두리 선 두께와 색깔을 지정한 CSS는 두개입니다.

하나는 div 의 어트리뷰트로써, 두께가 2 픽셀에 파란 색깔의 테두리로 지정되어 있고

또 하나는 <style> 엘레먼트에, 1 픽셀의 빨강 테두리선으로 지정되어 있습니다.

 

이럴경우, 앞서 말씀 드린것처럼

style 어트리뷰트에 지정된 내용이

<style> 엘레먼트에 지정된 내용보다 우선 순위가 높기 때문에

결과적으로 2 픽셀 두께의 파란색 테두리가 화면에 나타나게 되는 것입니다.

 

이러한 특성을 실제 프로젝트에서는 어떻게 이용하냐 하믄요...

이미 .css 파일을 HTML에서 불러다 쓰는 방법을 사용하여 사이트를 구축했는데

변덕쟁이 팀장이 어떤 특정한 페이지의 CSS를 이리 저리 변경하라고 다그친다면... 그것도 지금 당장.... (뛰바...)

굳이 복잡하게 얽히고 *혀있는 .css 파일의 내용을 건드리지 않고서도

HTML 페이지안의 해당 엘레먼트에 style 어트리뷰트를 지정해 주기만 하면

그것이 우선적으로 페이지에 적용됨으로 금방 작업을 끝낼 수 있답니다.

 

Cascading 에 대해 잘 이해하고 계시면 일케 조아여~.

 

 

 

4. CSS를 쓰면 좋은 점.

 

1) HTML만을 사용했을 때 보다 표현할 수 있는 범위가 훨씬 방대합니다.

예를 들어 <font> 엘레멘트로 지정할 수 있는 글자 크기는 1~7 정도 밖에 안됩니다.

하지만 CSS를 사용하면 100px (픽셀) 크기의 글자도 표현할 수 있습니다.

(참고로 XHTML Strict에서는 더 이상 font 엘레멘트를 사용하지 않습니다.)

 

이 부분에 대해서는 말로 설명 하는것 보다 실제 예제를 접해 보시면 쉽게 이해하실 거에여.

따라서 앞으로 배우게 될 예제들을 보시면 됩니다. 

2) 일관되고 체계화된 디자인 관리가 가능합니다.

레이아웃만 정리해 놓은 .css 파일 하나...

글자, 폰트 등의 디자인을 정리해 놓은 .css 파일 하나...

메뉴 네비게이션만 정리해 놓은 .css 파일 하나...

뭐 이런식으로 전체 사이트의 디자인을 세부적으로 분류한 .css 파일들을 만들어서

모든 HTML 페이지에다 붙혀서 사용한다면

체계적이고 효율적인 디자인 관리가 가능해 집니다.

수정작업도 빠르고 편리하게 일괄적으로 처리할 수 있구요.

넘 편리하겠져?

3) 유지 보수가 쉽고 빨라집니다.

위에서 이미 설명한 부분입니다. 패스~~ 

4) DHTML, JavaScript, DOM(Document Object Model), Ajax 등과의 연계 작업이 가능해 집니다.

다이내믹 HTML이나 자바스크립트, DOM, Ajax 등과 같은 작업 시,

CSS는 없어서는 안되는 존재입니다.

 

초보 웹디자이너 분들은 좀 생소하게 들릴 수도 있는데여

쉬운 예를 하나 들자면...

 

마우스 오버, 마우스 아웃 같은거 있잖습니까?

마우스를 메뉴위에 올려 놓으면 그림이 바뀌고

마우스를 빼면 그림이 다시 제자리로 돌아오고 뭐 이런거 드림위버로 많이 만들었었잖아여..

이런게 다 (자바스크립트와) CSS를 통해서 이루어지는 것입니다.

 

DHTML, JavaScript, DOM(Document Object Model), Ajax 등은 사실 그 범위가 딱 정해져 있지 않습니다.

다들 서로 서로가 조금씩 물려서 돌아가고 있기 때문이지요...

하지만 아쉽게도 이 부분은 본 강좌에서는 다루지 않음으로

그냥 글쿠나 하는 정도로만 넘어 가셔도 됩니다.

그치만 나중에 DHTML, JavaScript, DOM(Document Object Model), Ajax 이런것도 공부하겠다고 마음먹고 계신 분들은

CSS 부터 확실히 하고 시작하셔야 합니다. 그러면 반은 먹고 들어 갑니다.

 

(이 부분에 대해 궁금하신 점이 있으시면 언제든 댓글 남겨 주세요)

5) 장치별 출력 설정이 가능해 집니다.

어떤 HTML 페이지를 프린트 한다고 가정해 봅시다.

이미지도 많고 바탕 그림이 완전 검정칠이 되어 있다고 한다면

그 페이지를 그대로 프린트하는 사용자들은 짜증납니다.

잉크 값도 비싼데....

 

CSS를 사용하면 프린트 할 때는 요 .css 파일을 사용해라... 라고 지정해 줄 수 있습니다.

이 프린트 용 .css 파일은 당연히...

프린트 할 필요가 없는 이미지나 텍스트들은 다 빼버리고

프린트 되어야 하는 내용들만 보여주게 끔 설정이 되어 있겠죠...

 

<link rel="stylesheet" type="text/css" media="screen,projection" href="global.css" />

==> 이것은 컴터 화면이나 프로젝터로 볼때 적용하라는 CSS 설정입니다.


<link rel="stylesheet" type="text/css" media="print" href="print.css" />

==> 이것은 같은 페이지를 프린트 할 때 적용하라는 CSS 설정입니다.

 

외우실 필요는 없고 아~~ 이런것도 있구나 하고 넘어 가심 됩니다.

오늘은 개념 잡기니까요.

나중에 예제를 통해 다시 다뤄 보도록 하겠습니다.

 

6) HTML 페이지 로딩이 빨라집니다.

CSS 파일은 한번 로딩이 되면 담부터는 캐시에서 돌아가기 때문에 사이트가 아주 빨라 진다는 장점이 있습니다.

 

예를 들어 어떤 웹사이트를 방문했다고 가정하겠습니다.

이 사이트의 index.html 은 global.css 파일을 불러다가 디자인적인 표현을 모두 처리하고 있습니다.

사용자가 '상품보기' 메뉴를 클릭하여 product.html 이라는 페이지로 이동합니다.

이 product.html 도 index.html 페이지와 마찬가지로 global.css 파일을 통해 페이지의 디자인을 표현하고 있습니다.

이럴 경우 global.css 파일은 index.html 페이지가 로드 될때 이미 캐시에 저장이 되었기 때문에

product.html 페이지가 뜰때에는 또다시 로딩이 되는게 아니고 캐시에서 로드가 됨으로 속도가 그만큼 빨라지게 되는 것입니다.

 

HTML이 문서의 구조만을 담당하고, 디자인 적인 요소들은 모두 CSS로 분리가 되게 되면

그만큼 HTML 자체의 코딩은 확연히 줄어들게 되겠죠...

게다가 그렇게 분리된 디자인적인 요소들이 모두 캐시에서 로딩이 됨으로 속도가 빨라지지 않을 수 없는 것입니다.

 

이러한 특성을 이용하여 실제 프로젝트 작업 시,

배경 이미지라든가 사이트에서 공통적으로 자주 가져다 쓰는 각종 잡다구리한 아이콘 이미지 같은 것들을

HTML이 아닌 CSS에서 불러오도록 미리 작업을 해놓으면

반복적인 이미지들의 반복적인 로딩 시간을 줄일 수가 있게 됩니다.

 

 

============================================================================================================

 

오늘은 CSS에 대해 아주 기본적인 개념과 특성들에 대해 살펴 보았습니다.

근데 지금 쯤 이렇게 생각하시는 분들이 있을 것 같은데여....

 

"음... 근데여... 대충 CSS가 먼지는 알겠는데여 실제로 작업할려면 뭘 어떻게 해야 하는건지....

뭘 어떻게 만드는 건지 모르겠어여.... "

 

모르시는게 당연하져... CSS 문법에 대해서는 담 시간에 할꺼니까여~~ ^^;;

빠이 빠이~~~~~ 쿨럭~!!

 

 

출처 - http://blog.naver.com/wdig    

 

######################################################

#####     작성자: 간츠 gantz2010@hotmail.com                     #####
#####     블로그: http://blog.naver.com/wdig                      #####
#####     기   타: 퍼 가실때는 출처를, 질문은 이메일로...       #####

#####################################################









레이아웃, 웹표준, div, 강좌
댓글 4 | 엮인글 0

DIV 레이아웃 [4-2] : CSS 기본 문법
DIV 레이아웃 [3-2] : XHTML 기본 문법 정리





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E