출처 - http://blog.naver.com/wdig
######################################################
##### 작성자: 간츠 gantz2010@hotmail.com #####
##### 블로그: http://blog.naver.com/wdig #####
##### 기 타: 퍼 가실때는 출처를, 질문은 이메일로... #####
####################################################
DIV 레이아웃 [4-1] : CSS 기초 개념 잡기
DIV 레이아웃 작업에 있어서 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로 저장하기만 하면 됩니다.
위에서 예제로 만든 이 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에서 불러오도록 미리 작업을 해놓으면
반복적인 이미지들의 반복적인 로딩 시간을 줄일 수가 있게 됩니다.
DIV 레이아웃 [4-2] : CSS 기본 문법
중급이나 고급이 아닌 기본 문법입니다....
왜 기본 문법만 하냐면... 그 이유는.............................. 모두 다 할려면 내용이 넘 많아서리... ^^;;
딱 DIV 레이아웃 작업에 필요한 만큼만 쪽찝게 과외 하도록 하겠습니다. ^^;;
1. 기본 문법
CSS의 기본 문법은 다음과 같습니다.
셀렉터 { 속성 : 값 }
예) div { color: white }
속성이 여러개일 경우에는 ; 로 구분합니다.
셀렉터 { 속성 : 값 ; 속성 : 값 ; 속성 : 값 ; }
예) div { color:#ffffff ; width:100px ; height:100px ; }
2. 속성(Property)과 값(Value)
속성이란 글자 그대로 속성입니다. ㅡㅡ;;
쉽게 이해를 돕기 위해 설명 하자면
HTML 엘레멘트(태그라고도 부르져..)들의 속성이라고 말씀 드릴 수 있겠지만
보다 더 정확하게 표현 하자면 셀렉터 (Selector) 에 대한 속성입니다.
셀렉터에 대해서는 조금 있다가 자세히 설명 드리기로 하고
일단 지금은 body, div, span, a, p, ul.... 등등...
HTML 엘레멘트 들의 크기, 색깔, 위치, 배경, 폰트, 마진, 패딩 등의 디자인 적인 모든 요소들의 명칭이 속성이라고 이해하시면 편합니다.
아직도 헷갈리신다고요?
color, width, height, margin, padding, background-color, display... 등등이 '속성'이구요...
#ffffff, 100px, 200px, 10px, 0, white, none.... 등과 같이 속성에 해당하는 설정 값들이 '값'에 해당하는 것입니다.
속성의 종류에 따라 해당 속성에 사용할 수 있는 값의 종류는 각기 다릅니다.
예를 들어 color 라는 속성의 값으로는 white이라는 키워드와 #ffffff 라는 헥스 값을 모두 사용할 수 있습니다만
width 라는 속성의 값으로는 위의 값들을 사용할 수 없습니다.
각각의 속성에는 해당 속성에 맞는 특정 값들이 존재하고 있으며
그 값들을 올바르게 사용하여 속성이 갖는 디자인적인 특징을 HTML 상에서 최종적으로 표현해야만 합니다.
만일 올바르지 않은 속성 이름이나 올바르지 않은 값을 사용한 경우
일반 컴터의 브라우저는 해당 속성이나 값을 무시하고 그냥 넘어가기 때문에
웹페이지에는 아무런 영향을 끼치지 않습니다만 CSS 문법 검사를 할 경우 오류 납니다.
이왕 하려면 제대로 해야겠져? ^^
속성에는 굉장히 여러가지 종류들이 있고 또 그 속성의 값들도 아주 다양합니다.
하지만 이러한 속성의 종류와 그 값들을 지금 당장 모조리 다 외운다는 건 바보같은 짓이구요.
앞으로 나오는 예제들을 통해 하나 하나씩 익혀 가시면 됩니다.
근데 앞으로 속성이라는 명칭 대신 프로퍼티(Property)라고 부를 것입니다.
왜냐면 앞서 배웠던 HTML 어트리뷰트(Attribute)도 똑같이 '속성' 이라는 뜻이기 때문에
혼동될 수가 있거든요.
복습하자면...
HTML 엘레멘트(Element) 의 속성은 어트리뷰트(Attribute) 이고
CSS 셀렉터(Selector) 의 속성은 프로퍼티(Property) 라고 기억해 두세요.
자 그럼 이제부터 셀렉터(Selector)라는 것에 대해 알아 보도록 하겠습니다.
3. 셀렉터(Selector)란?
CSS란 HTML의 디자인적인 요소들을 별도로 분리해 놓은 것이라고 배웠습니다.
HTML의 디자인적인 요소들이란 결국...
HTML 페이지를 구성하고 있는 하나 하나의 엘레멘트(태그)들에 대한 디자인적인 요소라는 뜻입니다.
예를 들어...
HTML 엘레멘트들의 디자인적인 요소들을 .css 파일에 따로 정리해 놓는다면
결과적으로 파일은 두개가 됩니다.
HTML 엘레멘트를 이용하여 문서의 구조와 내용을 담은 .html 파일 하나..
그리고 그 HTML 문서안에 들어있는 엘레멘트들의 디자인을 담은 .css 파일 하나...
만약 별도의 .css 파일을 사용하지 않고
같은 HTML 페이지 안에서 <style type="text/css"></style>를 사용한다 하더라도
문서의 구조와 디자인이 '분리'가 된다는 개념에는 변함이 없습니다.
이렇게 분리가 되면 한가지 문제가 생기게 됩니다.
어느 엘레멘트가 어떤 모습으로 표현이 되어야 하는지....
어느 넘이 빨간색이고 어느 넘이 파란색인지....
이 어느 넘이 어느 넘인지를 알지 못하게 되어 버리니까요.
HTML 안에 있는 각각의 엘레멘트에
오직 하나뿐인 고유한 이름을 붙혀 주던지....
아님 비슷한 넘들끼리 묶어서 그룹명을 붙혀 주던지...
아님 1분단 셋째줄에 앉은 넘... 처럼 위치를 지정해 주던지....
그것도 아님 5번째 줄 뒤에 앉은 넘들 모두 책상위로 올라가.... 처럼 어떤 조건에 의해 지정해 주던지....
암튼 언넘이 언넘인지 알수 있게끔 뭔가 룰을 정해서 각각의 엘레멘트들에 표시를 해 줘야지만
CSS에서도 특정한 바로 그넘에 대한 디자인을 지정해 줄 수가 있게 되는데
이 표시자가 바로 셀렉터인 것입니다.
분리되어 있는 HTML과 CSS의 관계를 가운데서 연결시켜 주는 역활을 하는 것이죠.
4. 셀렉터(Selector)의 종류와 특징
1) 유니버설(Universal ) 셀렉터
표시자 : *
HTML 페이지 안에 있는 모든 엘레멘트들을 가리킵니다.
예) * { font-size: 10px; }
위와 같이 하면 HTML 문서의 모든 글씨의 크기가 10px이 됩니다.
2) 타입(Type) 셀렉터
표시자: body, div, span, a, img, form, table 등등....
HTML의 엘레멘트 명칭 그 자체입니다.
혼동하지 마세요.
같은 이름이라 할지라도 위의 것들이 HTML 문서 안에서는 엘레멘트이지만
CSS 안에서는 그 엘레멘트를 지칭하는 셀렉터입니다.
예) body { background-color: #ffffff; }
위와 같이 하면 HTML <body></body> 사이의 문서 배경이 흰색이 됩니다.
3) ID 셀렉터
표시자: #
HTML 엘레멘트의 id 어트리뷰트에 지정한 특정 이름을 가리킵니다.
CSS 예) #menu { width: 100px; height: 100px; }
HTML)
<div id="menu"></div>
<div></div>
위와 같이 하면 menu라는 id 이름을 가진 첫번째 div의 가로 세로 크기가 각각 100px이 됩니다.
4) CLASS 셀렉터
표시자: .
엘레멘트의 class 어트리뷰트에 지정한 이름을 가리킵니다.
CSS 예) .menu { width: 100px; height: 100px; }
HTML)
<div></div>
<div class="menu"></div>
위와 같이 하면 menu라는 class 이름을 가진 두번째 div의 가로 세로 크기가 각각 100px이 됩니다.
* 참고*
*******************************************************************************
ID 셀렉터랑 CLASS 셀렉터랑 별반 다르지 않아 보이져?
하지만 이 두개는 각기 아주 다른 특성을 가지고 있습니다.
굉장히 중요한 특성임으로 다음 강좌에서 자세히 공부해 보도록 하겠습니다.
*******************************************************************************
5) SUB CLASS 셀렉터
타입 셀렉터와 class 셀렉터의 혼합형 입니다.
CSS 예) div.menu { width: 100px; height: 100px; }
HTML)
<div></div>
<div class="menu"></div>
<p class="menu"></p>
위와 같이 하면 div 들 중 menu라는 class 이름을 가진 가운데 div의 가로 세로 크기가 각각 100px이 됩니다.
p는 같은 class 이름을 가지고 있다 하더라도 해당되지 않습니다.
6) 디센던트(Descendant) 셀렉터
타입 셀렉터, id 셀렉터, class 셀렉터 들의 혼합형으로써 상속적입니다.
CSS 예) div span { color: red; }
HTML)
<span>구지성 *오~!!!</span>
<div><span>구지성 *오~!!!</span></div>
<div><p><span>구지성 *오~!!!</span></p></div>
<p><span>구지성 *오~!!!</span></p>
위와 같이 하면 둘째줄과 셋째줄 div 안에 들어있는 span 안에 있는 글씨들만 빨간색으로 표현됩니다.
상속적이란...
셋째줄 처럼... span이 div의 바로 한단계 안에 들어있지 않고
두단계 안쪽, 즉 p 안에 들어 있다하더라도....
div 아래 단계 안쪽에 있는 span... 이라는 CSS 조건에는 맞는 것임으로 CSS의 영향을 받게 된다는 뜻입니다.
따라서 셋째줄 span 안의 글씨도 빨간색이 되는 것입니다.
하지만 만약 div p span { color: red; } 이렇게 한다면...
둘째줄은 해당 사항이 없어지고 오직 셋째줄 span 안의 글씨만 빨간색이 됩니다.
이왕 하는 김에 하나 더 해볼까요?
CSS 예)
* { color: blue; }
#good span { color: red; }
HTML)
<span>구지성 *오~!!!</span>
<div><span>구지성 *오~!!!</span></div>
<div><p><span>구지성 *오~!!!</span></p></div>
<div id="good"><p><span>구지성 *오~!!!</span></p></div>
<p><span>구지성 *오~!!!</span></p>
위와 같이 하면 * (유니버설) 셀렉터에 의해 HTML 페이지의 모든 글자 색은 파란색이 되지만
넷째줄에 있는... good 이라는 id를 가진 div 안쪽에 위치한 span 안의 글자는 빨간색이 됩니다.
문제 나갑니다.
만약 #good span { color: red; } 를 #good p { color: red; } 로 바꾸면
넷째줄 span 안의 글씨 색깔은 무슨 색이 될까요?
7) 다이나믹 수도우(Dynamic Pseudo) 셀렉터 클래스
구분자: :
이미 다 알고 계신 것들입니다.
CSS 예)
a:link { color: black; }
a:visited { color: blue; }
a:hover { color: yellow; }
a:active { color: red; }
a:focus { color: orange; }
HTML)
<a href=http://www.guzisung.com>구지성 *오~!!!</a>
링크가 걸렸을때.. 방문했던 링크일 때... 마우스 오버를 할 때.... 마우스를 클릭했을 때... 포커스가 걸려 있을 때...
각기 다른 스타일을 지정해 줄 수가 있는 것이지요...
순서를 외우실 때는 단어 앞 글짜 하나씩을 따서
love hate으로 외우시면 편합니다.
link
o
visited
e
hover
active
t
e
근데 한가지 참고 하셔야 될 점이 있습니다.
이 다이나믹 수도우 클래스들은 <a> 엘레멘트에만 사용하는 것으로 알고 계신 분들이 많은데요.
사실은 모든 블락 레벨 엘레멘트(Block-Level Element)에 다 사용할 수 있습니다.
<div>, <p>와 같은 것들 말이죠.
CSS 예)
p.url:hover { color: yellow; }
p.url:active { color: red; }
p.url:focus { color: orange; }
HTML)
<p class="url">구지성 *오~!!!</p>
단, 위처럼 <p>의 경우 href 어트리뷰트가 없기 때문에 :link 나 :visited 는 사용할 수가 없겠죠.
다이나믹 수도우 클래스를 잘 활용하시면 마우스 오버 메뉴 같은 걸 만드실 때
복잡하게 자바 스크립트를 쓰지 않고서도 간단하게 구현 할 수 있습니다.
CSS의 background-image 프로퍼티 같은 것을 이용해서 근사하게 말이죠.....
사실 CSS 셀렉터들은 위의 일곱가지 외에도 더 있습니다만 본 강좌를 진행하기에는 위의 것만 가지고서도 충분하다고 생각합니다.
DIV 레이아웃 [4-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가지 단위 사이의 관계를 이해하시는데 도움이 되실 겁니다.
그리고 초급자 분들께서는 em 사이즈를 계산하는게 디게 복잡시럽다고 생각하실텐데요..
다음의 사이트를 방문하시면 공짜로 em 계산기를 사용하실 수 있습니다.
*******************************************************************************
그냥 여기서 끝내려고 했는데 맘이 영 찜찜해서
예제 몇개만 잠깐 살펴보구 끝내도록 하겠습니다.
<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 이 되는 것입니다.
( 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 이 되는 것입니다.
( 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>