47472 Members __ Online

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

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

posted by 라부
date : , update :
hit : 32766, scrab : 1 , recommended : 18

오늘은 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 기본 문법에 대해 살펴 보았습니다.

사실 CSS 셀렉터들은 위의 일곱가지 외에도 더 있습니다만

본 강좌를 진행하기에는 위의 것만 가지고서도 충분하다고 생각합니다.

 

(기회가 되면 여기서 다루지 않은 셀렉터들에 대해 별도로 정리해 보는 시간을 갖도록 하겠습니다.)

 

다음 시간에는 위 문법을 기초로 하여,

아주 아주 중요한...! 몇가지 CSS 실전 사용 팁에 대해 공부해 보도록 하겠습니다.

 

궁금한게 있으신 분들은 댓글 남겨 주세요.

 

 

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

 

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

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

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









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

DIV 레이아웃 [4-3] : CSS 실전 사용팁
DIV 레이아웃 [4-1] : 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