47166 Members __ Online

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

DIV 레이아웃 [4-3] : CSS 실전 사용팁

posted by 라부
date : , update :
hit : 39573, scrab : 1 , recommended : 19 , attach : 3

오늘은 CSS를 실제 프로젝트에서 사용할 때 꼭 알아 두어야 하는 몇가지 사용팁에 대해 살펴 보려고 합니다.

오늘 공부하려는 것들을 이해하지 못하시면

CSS를 사용하여 작업 한다는 것은 오히려 더 불편하고 까다로운 작업이 될 수 있습니다.

CSS는 편하자고 쓰는 것인데 불편하면 쓸 이유가 없지요.

 

자... 그럼 농띠가 되기 위한 CSS 사용팁을 배워 보도록 하겠습니다.

 

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

 

 

 

1. 닥타입(Doctype)을 정하자.

 

HTML 문서의 닥타입(Doctype)이 무엇이냐에 따라 브라우저가 CSS를 해석하는 방법이 달라지게 됩니다.

다시말해, 같은 CSS라 할지라도 어떤 닥타입을 사용하느냐에 따라 HTML 문서의 디자인 결과가 달라지게 된다는 말입니다. (한가지 예로써 이미 지난 강좌를 통해 DIV 박스모델 배웠었지요?) 따라서 하나의 프로젝트를 진행할 때는 분명하게 하나의 닥타입을 정한 다음 그것을 기준으로 모든 CSS 작업을 진행해야 되는 것입니다. (HTML과 마찬가지로요...)

 

간혹 닥타입을 선언하지 않고 CSS를 작업하시는 분들이 계시던데

이럴경우 본인이 의도한데로 결과가 나오지 않고 디자인이 깨질 경우

문제점을 찾아내어 수정하기가 상당히 까다롭습니다.

그리고 수정한다 하더라도 브라우저의 종류에 따라 또다시 다른 결과물이 나오는 경우가 대부분이지요.

 

본강좌에서는 XHTML 1.0 Strict 로 작업할 예정임으로 앞으로의 모든 CSS 예제는 이것을 기준으로 작업하게 됩니다.

 

 

 

2. id 와 class의 차이점을 이해하자.

 

보통 우리는 하나의 HTML 문서안에서 여러개의 서로 다른 id와 class 셀렉터를 사용하여 CSS 작업을 하게 됩니다.

이때 id는 같은 이름을 여러번 사용할 수 없습니다만 class는 동일한 이름을 공통적으로 사용할 수 있습니다.

 

무슨 얘긴지 이해하는데에는 예제 만큼 좋은게 없겠죠~

 

<p id="girl">구지성 *오~</p>

<p id="girl">구하라 *오~</p>

 

위의 예를 보시면 하나의 HTML 문서 안에서 girl 이라는 동일한 이름을 가진 id가 2개 있습니다.

이렇게 하면 잘못된 것이라는 뜻입니다.

 

하나의 HTML 문서안에서는 오직 유일한 하나의 이름을 가진 id 만이 존재할 수 있습니다.

따라서 위의 예제를 올바르게 수정한다면 다음과 같이 바꿀수 있습니다.

 

<p id="girl_1">구지성 *오~</p>

<p id="girl_2">구하라 *오~</p>

 

이렇게 하면 girl_1 이란 이름도 하나만 존재하게 되고

girl_2 라는 id 이름도 하나만 존재하게 됨으로

문법상 아무런 하자가 없게 되는 것입니다.

 

만일 girl 이라는 같은 이름을 사용하여 동일한 디자인 효과를 주고 싶다면 어떻게 해야 될까요?

이럴때를 위해 id 대신 class를 사용하는 것입니다.

 

<p class="girl">구지성 *오~</p>

<p class="girl">구하라 *오~</p>

 

이렇게 하면 동일한 디자인적인 효과를 서로 다른 두개의 <p> 엘레멘트에 동시에 줄수 있게 되는 것입니다.

 

이제 아셨죠?

id 이름은 하나의 HTML 문서 안에서 유일한 이름이 되어야 합니다.

만일 동일한 이름을 사용하여 동일한 효과를 여러 엘레멘트에 공통적으로 주고자 할때는

id 대신 class 를 사용하는 것입니다.

 

(

id 는 CSS Scripting 이나 Ajax, DOM 등을 사용할 때 필수적인 셀렉터입니다.

프로그래밍적으로 특정한 엘레멘트를 컨트롤 하려면 그 엘레멘트를 지칭하는 유일한 표시자가 필요하게 되는데

이 역활을 해주는 것이 바로 id 이름이 되는 것입니다.

예: document.getElementById('girl').style.display='none';

)

 

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

* 참고 *

*******************************************************************************************

간혹 CSS에 문제가 있어서 디자인이 깨지거나 의도한데로 결과가 나오지 않을 때가 있습니다.

이때, 제 경험으로 미루어 보자면 id 나 class 이름이 엉켜서 발생하는 경우가 대부분입니다.

따라서 사이트의 규모가 클 경우 CSS Naming을 잘 하셔야 합니다.

중복되거나 중첩되는 이름의 사용을 피하기 위해 별도의 id, class 이름 목록표를 작성해 놓는 것도

아주 좋은 방법이 될 수 있습니다.

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

 

 

 

3. 셀렉터 Cascading

 

지난 강좌에서 CSS Cascading 에 대해 배웠었죠?

그거랑 비슷한 건데요.

셀렉터들 사이에도 우선 순위가 존재한다는 것입니다.

 

우선 순위가 높은 셀렉터부터 나열하자면 다음과 같습니다.

1. ID 셀렉터

2. CLASS 셀렉터

3. TYPE 셀렉터

예를 들어 볼까요?

 

<style type="text/css">
#here {color:blue;}
.there {color:red; font-weight:bold;}
</style>

 

<p id="here" class="there">구지성 *오~~!! 근데 구하라가 대세~!!!!!!</p>

 

자, 위를 보시면 <p> 엘레멘트에 id 와 class 가 동시에 설정되어 있습니다.

이 경우 <p></p> 안에 들어 있는 글씨는 무슨 색이 될까요?

 

당연히 파란색이 됩니다.

왜냐면 아까 말씀 드렸듯이 ID 가 CLASS 보다 우선 순위가 높기 때문이지요.

 

또 한가지 재미있는 것은,

#here 라는 ID 에는 글씨를 굵게하는 font-weight 프로퍼티가 없기 때문에

.there 라는 CLASS 에 설정되어 있는 font-weight:bold 가 적용이 됩니다.

따라서 최종 결과물은

파란색 글씨의 굵은 글씨체인 구지성 *오~~!! 근데 구하라가 대세~!!!!!! 가 표시 됩니다.

 

정리하자면,

셀렉터 Cascading에서는 중복된 프로퍼티가 있을 경우

우선 순위가 높은 셀렉터의 내용이 적용이 되는데

이 순서는 ID > CLASS > TYPE 셀렉터 순서라는 것이지요.

 

하는김에 하나 더 해볼까요?

다음과 같을 경우 어떤 결과가 나올까요?

 

<style type="text/css">
#here {color:blue;}
</style>

 

<p id="here" style="color:red; font-weight:bold;">구지성 *오~~!! 근데 구하라가 대세~!!!!!!</p>

 

셀렉터 우선 순위에는 style 어트리뷰트(Inline Style Sheet)가 없었자나요?

근데 이렇게 두개를 함께 사용할 경우의 우선 순위는 누구에게 있을까요?

 

정답은 style 어트리뷰트입니다.

style 어트리뷰트는 CSS Parser(해석기) 가 ID 셀렉터로 인식합니다.

따라서 같은 엘레멘트 안에 두개의 ID 가 있다고 가정한다면

CSS Cascading 에서 배웠듯이 무조건 Inline Style 이 최상위기 때문에

style 어트리뷰트안에 지정한 내용이 우선 적용되는 것입니다.

따라서 결과는 빨간 색의 굵은 글씨체인 구지성 *오~~!! 근데 구하라가 대세~!!!!!! 가 표시 됩니다.

 

**************************************

 

음 그리고 또하나..... 중요한게 있는데요.

셀렉터 Cascading 과는 좀 다른 것이긴 하지만

어느정도 깊은 관련이 있음으로 한번 집고 넘어가도록 하겠습니다.

 

자, 다음과 같은 CSS 가 있다고 가정해 봅시다.

 

<style type="text/css">
div {color:blue;}

div {color:red;}

div {color:green;}
div {color:orange;}
</style>

 

<div>구지성 *오~~!! 근데 구하라가 대세~!!!!!!</div>

 

div 는 하나인데 그 div 안의 색상을 나타내는 Style은 무려 4개가 있습니다.

이럴 경우 <div></div> 안의 글자 색은 CSS 맨 마지막에 있는

오렌지 색이 됩니다.

 

CSS도 스크립트 언어의 일종이기 때문에

브라우저의 CSS Parser 는 위에서부터 아래 방향으로 코드를 해석하게 됩니다.

따라서 동일한 프로퍼티들이 있을 경우,

첫번째 div 의 blue 는 그 다음에 나오는 div 의 red 가 덮어 씌우게 되고

그 red 는 그 다음에 나오는 div 의 green 이 덮어 씌워지게 됩니다.

이렇게 해서 결국 맨 마지막에 나온 div {color:orange;} 가 최종적으로 화면에 표시 되는 것입니다.

 

<style type="text/css">
#here {color:blue;}

#here {color:red;}

#here {color:green;}
#here {color:orange;}
</style>

 

<div id="here">구지성 *오~~!! 근데 구하라가 대세~!!!!!!</div>

 

이렇게 id 셀렉터로 바꿔도 결과는 마찬가지 입니다.

 

 

 

4. 블락레벨 엘레멘트들의 CSS 프로퍼티 값 상속 (Inheritance)

 

음... 이건 HTML 엘레멘트들 간의 CSS 상속에 관한 것입니다.

 

다음의 예를 한번 보시죠...

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Test</title>
<meta http-equiv="Content-Type" c"text/html; charset=euc-kr" />
     <style type="text/css">
     body { color: blue; }
     #good p { color: red; }
     </style>
</head>
<body>

 

<div id="good"><p><span>구지성 *오~!!!</span></p></div>

 

</body>
</html>

 

위의 코드를 브라우저로 확인해 보면 <span> 안의 글씨는

#good p { color: red; } 에서 설정했듯이

부모(상위) 엘레멘트인 <p> CSS 속성을 그대로 상속 받아 다음과 같이 붉은색이 됩니다. 구지성 *오~!!!

하지만 <span>을 <h1>으로 바꿔 볼까요? 다음과 같이 말이죠...

 

<div id="good"><p><h1>구지성 *오~!!!</h1></p></div>

 

자, 이것을 브라우저로 확인해 보면 <h1>으로 표시되는 글씨는 파란색으로 바뀌게 됩니다. 구지성 *오~!!!

(물론 h1 엘레멘트니까 글씨 크기는 저렇게 커지게 되겠져?)

 

CSS를 바꾸지도 않고 CSS에서 설정한 HTML을 바꾸지도 않았습니다.

그저 <p> 안의 <span> 을 <h1> 엘레멘트로 바꿔준것 밖에는 없는데.....

<p> 안에 들어 있는 엘레멘트의 글씨 색이 빨강색에서 파란색으로 되버렸습니다.

 

다시한번 쉽게 설명을 드리자면...

 

<p><span>구지성 *오~!!!</span></p>

 

<p> 다음에 나오는 <span> 은 <p>의 빨간색을 상속 받았지만....

 

<p><h1>구지성 *오~!!!</h1></p>

 

<p> 다음에 나오는 <h1> 은 부모 엘레멘트인 <p> 의 빨간색을 상속받지 않고

<body> 에 설정한 파란색을 상속 받았다는 얘기입니다.

 

복잡하져?

어떤것은 부모 엘레멘트의 CSS 설정을 상속받고 또 어떤것은 상속받지 않으니까여...

하지만 전혀 복잡하지 않습니다.

언뜻보면 복잡해 보이지만 알고 보면 여기에도 아주 간단한 공식이 있기 때문입니다.

 

DIV > P

 

div 는 p 보다 형아다~!!!!

형보다 나은 아우 없다구 그랬져?

<p> 엘레멘트는 <div> 형아의 옷(디자인)을 물려 입어야 하는 것입니다.

<div> 형아가 <p> 동생의 옷을 물려 입지는 않습니다.

 

따라서...

 

div {color:red}

 

<div><p>구지성 *오~!!!!!</p></div>

 

일케하면 <p> 동생안의 글씨색은 빨간색이 됩니다만...

 

p {color:red}

 

<p><div>구지성 *오~!!!!!</div></p>

 

일케하면 <div> 형아는 <p> 동생의 옷을 물려 입을 수 없기 때문에 그냥 기본색인 검정글씨가 되는 것입니다.

 

이쯤에서 기억력 좋으신 분들이 질문합니다.

'저 위의 예제에 있던 <h1> 은 구럼 뭐에여~?'

그럼 제가 대답합니다.

'갸는 <div> 형아의 친구에효~!!'

 

지난 강의에서 여러번 나왔었져.. 블락레벨 엘레멘트.....

지금까지 우리가 배웠던 블락레벨 엘레멘트들은 <div> 하고 <p> 밖에 없었자나요..

근데 블락레벨 엘레멘트들은 이 두가지 말고도 더 많이 있습니다.

 

대표적인 것들이 h1, h2, h3, h4, h5, h6 형제들이 있구요...

그리고 blockquote, pre, address.... 뭐 이런 애들도 있습니다....

여기서 이런 블락레벨 엘레멘트들은 거의 다가 div 형아의 친구들입니다.

 

DIV = 다른 블락레벨 엘레멘트들 (잡다구니 동네 친구들)

 

형들의 친구는 형의 옷을 입을 수 있죠~ 따라서 지들끼리는 CSS 상속이 됩니다.

하지만 <div> 와 마찬가지로 이런 동네 형들은 <p> 동생의 옷을 물려 입지는 않습니다.

 

결국 위의 예제에서 본 다음의 코드는 

 

<p><h1>구지성 *오~!!!</h1></p>

 

div 형아의 친구 <h1> 이 <p> 동생의 옷을 입을 수는 없음으로 <body> 에 설정되어 있는 파란색이 된거죠...

자, 이해 가시죠?

 

그럼 불쌍한 우리 <p>의 쫄따구는 없는가?

있습니다. 바로 인라인 엘레멘트라고 불리우는 것들인데요...

대표적인 것이 바로 <span> 이죠....

<span>은 막내 동생이라고 생각하세요...

따라서 <p> 에 설정된 CSS를 그대로 상속하게 됩니다.

 

P > SPAN (Inline-Level Elements)

 

근데 참 재밌는게요....

<SPAN> 이 막내동생이라서 그런지 듬직한 <DIV> 형아가 <SPAN>의 CSS 상속을 받는답니다.

 

SPAN > DIV (그리고 형아 친구들)


정말 재밌지 않나요?

 

근데....

사실 실제 코딩에서는

<span> 이나 <p> 같은 동생들 안에 <div> 형아를 위치시키는 일은 없기 때문에

그냥 그렇구나 정도로만 알고 계시면 좋을 것 같습니다.

 

<span><div>구지성 *오~!!!!<div></span>

<p><div>구지성 *오~!!!!<div></p>

 

실제 프로젝트에서 위와 같은 식으로는 작업하지 않으니까요....

 

이것은 나중에 HTML/XHTML 엘레멘트들에 대해 자세히 공부하시다 보면 알게 되는데

각각의 엘레멘트들은 그 자신안에 포함시킬 수 있는 하위 엘레멘트들에 대한 정의가 별도로 존재합니다.

결국 CSS 상속은 그 정의에 따라 될수도 있고 되지 않을 수도 있다는 얘기입니다.

 

 

자, 지금까지 CSS 상속에 관한 얘기를 했었는데요..

상속이란 부모 엘레멘트...

 

<부모><자식></자식></부모>

 

즉 '나'라는 자식 엘레멘트를 포함하고 있는 부모 엘레멘트의 CSS 설정이,

그 안에 포함된 자식 엘레멘트인 '나'에게도 적용되는 것을 말합니다.

이때 '나'는 동일한 CSS 설정이 없어야 하며...

만약 별도로 '나'에게 해당하는 CSS 설정이 있다면

'나'는 부모 엘레멘트의 CSS 설정을 상속 받지 않고 '나'의 CSS 설정이 적용됩니다.

 

입을 옷이 있는데 굳이 형옷을 물려 입을 필요가 없자나효~~!!!!

 

 

 

5. 그룹화 (Grouping)

  

음... 이건 이미 알고 계시는 아주 간단한 내용인데요...

 

<style type="text/css">
body {color:blue;}

body {background-color:white;}

body {margin:10px;}
body {font-size:12px;}
</style>

 

이렇게 따로 따로 되어 있는 것을.....

 

<style type="text/css">
body {

     color:blue;

     background-color:white;

     margin:10px;
     font-size:12px;

}
</style>

 

이런 식으로 묶어서 표현할 수 있다는 뜻입니다.

 

<style type="text/css">
body { 
color:blue; background-color:white; margin:10px; font-size:12px; }

</style>

 

당근 일케해도 되지요~

 

 

 

6. 사이즈(Size) 단위

 

CSS를 사용할 때 우리는 폰트의 크기, DIV 박스의 가로 세로 길이 등등

필수적으로 어떤 특정한 Size를 표기하게 됩니다.

 

이때 사용하는 Size의 단위에는 여러가지 종류들이 있습니다.

 

절대단위를 나타내는

in     : Inches (인치) - 1인치는 2.54 센티미터

cm   : Centimeters (센티미터)

mm   : Millimeters (밀리미터)

pt     : Points (포인트) - 1 포인트는 0.72 인치)

pc    : Picas (파이카) - 1 파이카는 12 포인트

 

가 있고

상대단위를 나타내는

em  : 지정되거나 상속받은 폰트 높이에 대한 상대 크기

ex   : 지정되거나 상속받은 폰트 중 알파벳 'x' 의 높이에 대한 상대 크기

px   : Pixels (픽셀) - 화면 해상도에 대한 상대 크기

%   : 퍼센티지 - 지정되거나 상속받은 (또는 상위 엘레멘트) 에 대한 백분율 상대 크기

 

가 있습니다. 뭔가 막 복잡하져?

 

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

* 참고 *

*******************************************************************************************

위의 상대단위들 중에서 px는 좀 특이한 녀석입니다.

이미 설명한것 처럼 px는 분류상..... 화면 해상도에 따라 그 크기가 달라지는 상대단위 입니다.

하지만 해상도가 달라지면 폰트 뿐만 아니라 모든 이미지들의 크기도 함께 달라지게 됨으로

우리는 이것을 절대로 상대단위 라고 느끼지 못하는 경향이 있습니다.

따라서 본 강좌에서는 앞으로 px를 편의상 절대단위에 포함하여 설명하도록 하겠습니다.

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

 

일단 절대단위, 상대단위란 말부터 살펴 보겠습니다.

 

절대단위란 정해진 그 사이즈가 고정되어 있다는 얘깁니다.

예를 들어 어떤 폰트의 사이즈가 12px 이라면

어떤 브라우저로 보든지...

브라우저의 기본 폰트 크기를 어떤것으로 변경하든지 간에 무조건 똑같이 12px 입니다.

 

하지만 120% 라는 폰트 사이즈는 상대단위로써 기본 폰트 사이즈에 비례해서

그 기본 폰트 크기에 대한 120% 라는 뜻이지요. 상위 레벨에 대한 상대적인 개념같은 거죠.

따라서 기본 폰트 사이즈가 달라지면 120% 로 지정한 글씨의 크기도 함께 달라지게 되는 것입니다.

 

12px 에 대한 120% 와

30px 에 대한 120% 는 전혀 다른 사이즈가 되겠죠?

 

사이즈(폰트크기나 박스모델 등) 설계는 초기 CSS 기획단계서부터 염두해 두어야 하는 부분입니다.

특히 방탄웹을 포함한 CSS 설계에서는 빼뜨릴 수 없는 아주 중요한 개념이지요.

또한 대규모 사이트일 경우 향후에 있을 사이트 업데이트 시에도 아주 유용한 개념입니다.

 

이 부분은 여러분들이 나중에 좀 더 내공이 쌓였을 때 쯤해서

다시한번 *어 보는 시간을 갖도록 하겠습니다.

오늘은 그냥 개념 정리만 하도록 하죠.

 

복잡하게 위의 모든 단위들을 다 외우실 필요 없어염.

사실 그거 다 쓸 일도 없구요...

다음의 4가지 단위만 기억해 두시면 됩니다.

 

pt, px, em, %

 

절대단위는 pt 와 px 만 알아도 충분하구요.

상대단위는 em 과 % 만 아셔도 충분합니다.

 

만일 프린트용 CSS를 별도로 구성하신다면 in (인치) 와 같은 단위도 사용하실 일이 있겠지만

위의 4가지만 확실히 아셔도 중급자 레벨 소리 듣는데는 별 무리가 없습니다.

 

그리고 다음의 표를 참고하세요.

4가지 단위 사이의 관계를 이해하시는데 도움이 되실 겁니다.

 

4301

 

 

그리고 초급자 분들께서는 em 사이즈를 계산하는게 디게 복잡시럽다고 생각하실텐데요..

다음의 사이트를 방문하시면 공짜로 em 계산기를 사용하실 수 있습니다.

 

http://riddle.pl/emcalc/

 

*******************************************************************************

 

그냥 여기서 끝내려고 했는데 맘이 영 찜찜해서

예제 몇개만 잠깐 살펴보구 끝내도록 하겠습니다.

 

<style type="text/css">
body { font-size: 12px; }
div { font-size: 1.5em; }
span { font-size: 3em; }
</style>

 

<body>
가나다라마바사
<div>가나다라마바사</div>
<div><span>가나다라마바사</span></div>
</body>

 

 

위의 코드를 보시면

body 는 div의 상위 레벨입니다.

그리고 div 는 span 의 상위 개념이구요.

 

body 에 폰트크기가 12px 로 지정되어 있습니다.

이때 div의 폰트크기가 1.5em 으로 되어 있다면

이 1.5em 은 12px 크기에 대해 150%라는 뜻입니다.

따라서 div 안의 글자 크기 1.5em이란 18px 과 같습니다.

 

span의 상위 레벨은 div 죠?

div 의 폰트 크기는 1.5em 으로써 크기가 18px 입니다.

span은 div 의 1.5em (즉, 18px) 에 대한 300% 크기를 나타냅니다.

(혼동하지 마세요. body 12px 에 대한 300% 가 아닙니다.)

따라서 span 안의 글자 크기 3em 은 픽셀로 보자면 54px 이 되는 것입니다.

 

4302

( EM계산기로 본 모습  http://riddle.pl/emcalc/ )

 

하나 더해볼까요?

 

<style type="text/css">
/* body { font-size: 12px; } */
div { font-size: 1.5em; }
span { font-size: 3em; }
</style>

 

<body>
가나다라마바사
<div>가나다라마바사</div>
<div><span>가나다라마바사</span></div>
</body>

 

위와 같이 body 의 폰트 크기 설정을 지웠습니다.

그럼 이때부터 div 는 브라우저의 기본 폰트 크기에 대한 1.5em (150%) 가 되는 것입니다.

왜냐하면 상위 레벨 중 상대 값의 기준이 되는 절대 값이 없기 때문에

결국 브라우저의 기본 크기 값 (Medium) 을 기준으로 상대 크기를 결정하게 되는 것이지요.

 

아무런 기본 폰트 크기 설정이 안되어 있을 경우

브라우저 기본 폰트의 크기는 12pt 입니다.

12pt 는 픽셀로 따지자면 16px 이 됨으로

div 폰트 크기 :16px 에 대한 1.5em ==> 24px 이 되구요.

span 폰트 크기는 div 폰트의 크기인 24px 대한 3em ==> 72px 이 되는 것입니다.

 

4303

( EM계산기로 본 모습  http://riddle.pl/emcalc/ )

 

 

왜 굳이 이렇게 복잡하게 하느냐.... 그냥 div { font-size: 18px; } 뭐 이런식으로 그냥 직접 지정해 버리면 될텐데....

라고 생각하시는 분들도 계시겠지만

그건 웹사이트를 다영한 환경에 맞춰 좀 더 유연하고 호환성 있게 제작하고자 하기 때문입니다. 

그리고 나중에 사이트를 수정할 때도 좀 더 효과적이고 편리하게 작업하기 위해서지요.

 

예를 들어,

만약 성질 고약한 팀장이 기껏 작업 다 끝내고 나니까 사이트 전체 폰트를 조금만 더 키워 보라고 한다면......

타이틀, 메뉴, 서브메뉴등 종류별로 사이즈가 다 다른데 말이죠.....

그냥 묵묵히..... 한줄 한줄 px 로 지정한 폰트 사이즈를 일일이 바꾸시겠습니까?

그건.... 노가다 삽질이죠.... 우리같은 고급인력들이 해서는 안되는 일입니당~ 천한 일!!!!ㅎㅎㅎ

 

상대단위로 CSS 작업했다면

딱 한줄....

 

body { font-size: 12px; }


요것만 13px 이나 14px 로 바꿔 주시면 전체 사이트의 폰트 크기 수정작업 완료~

잠깐 나가서 사우나 갔다와도 되겠네여....

 

어쨌든 Size 단위는 CSS 작업할 때 아주 중요한 부분을 차지하고 있다는 것을 기억해 두시구요.

보다 더 자세한 얘기는 나중에 더 하기로 하죠. 오늘은 이정도만 하기로 하겠습니다.


 

 

7. 주석문을 적절히 사용하자.

 

CSS에서 주석문을 적절히 사용하는 것은

여러가지 면에서 상당한 도움이 됩니다.

 

예를들어 여러 명이서 팀 작업을 할 경우에도 그렇고

또 임시로 잠깐 변경한 CSS를 별도로 구분해 줄때도 그렇고

방탄웹을 구현하기 위해 특정 브라우저를 위한 CSS 라는것을 표시할 때도 그렇고

향후 사이트 수정 작업을 할때도 그렇고...

 

주석문을 적절하게 사용하지 않고 작업한 사이트는 나중에 업데이트 할 시기가 오면

굉장히 골치 아프게 됩니다.

 

따라서 미리 미리

적절하게 주석문을 사용하여

각각의 CSS에 대한 역활이나 설명등을 첨부해 놓으면

나중에 아주 편리합니다.

 

CSS의 주석문 처리는 다음과 같이 합니다.

 

/* 주석문 시작

*/ 주석문 끝

 

예제)

 

<style type="text/css">

/* 이안에 있는것들이 주석문이 됩니다. */
body {

     color:blue;

     background-color:white;

     margin:10px;
     font-size:12px;

}

/* 이렇게 시작해서

#here {color:blue;}

이렇게 끝날수도 있습니다.

*/

div {color:green;} /* 이렇게 옆에 주석을 붙힐수도 있어여 */
</style>

 

 

 

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

 

자 수고들 하셨습니다.

오늘로써 CSS 속성 강좌가 끝났습니다.

속성이라고는 하지만 그래도 지금까지 공부하신 CSS 에 대한 내용만 가지고서도

앞으로 있을 본격적인 DIV 레이아웃 강좌를 충분히 이해 하실 수 있으리라 생각합니다.

그리고 좀 더 어려운 중/상급자 용 CSS 관련 서적을 구하셔서 혼자서도 충분히 공부하실 수 있으실 겁니다.

왜냐............... 개념이 잡혔으니까요... 안그러신가여? ㅎㅎㅎ

 

이제 길고 지루한 서론은 모두 다 지나갔구요.

담 시간에 잠깐 웹표준 작업에 필요한 개발 도구들에 대해 살펴 본 다음

실전 DIV 레이아웃 본론에 들어 가도록 하겠습니다.

 

 

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

 

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

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

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









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

DIV 레이아웃 [5] : 웹표준 작업시 꼭 필요한 도구들
DIV 레이아웃 [4-2] : CSS 기본 문법





%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