CSS 이야기(2)
컨텐츠 정보
- 18,519 조회
- 3 추천
- 목록
본문
0. 들어가며
회사일이 한가한 것도 아닌데 이렇게 놀고(?) 있으니 큰일입니다. ^_^;
다음 글부터는 실제적인 예시가 함께 나와야 하니 적절한 예를 찾거나 직접 만들어야하는 관계로 글 올라가는 간격이 며칠 될 것 같습니다. 다행히 여기까지는 원론적인 이야기라 말로 땜빵할 수 있어서 한번에 씁니다.
1. CSS?
CSS란 Cascading Style Sheets의 약자입니다. HTML 4.0 이후부터 Style을 사용하므로써 HTML 문서와 디자인을 분리시키는 것이 가능해졌습니다. Style이란 HTML 요소들이 어떻게 디스플레이될 것인가에 대한 정의를 말합니다.
원래 HTML은 문서의 구조와 내용을 나타내기 위해 만들어진 규약입니다만, 브라우저가 발달하면서 점차 디자인에 이용되는 태그들이 많아졌습니다. 그러다보니 이제는 주종이 바뀌어서, 내용이나 구조는 어찌 되었건간에 디자인과 관련된 분량이 더 많아졌습니다. 이러한 문제점을 해결하기 위해 HTML 4.0에서부터 적용되기 시작한 것이 CSS입니다.
CSS의 등장으로 인해 HTML에서 디자인적인 요소가 분리될 수 있음으로써 얻는 이득은 매우 많습니다. 우선 작업시간이 단축됩니다. 문서가 간결해지며 기계나 프로그램으로 문서해독이 용이합니다. 수정시간도 단축되며 제대로 구조화된 HTML문서와 결합된 CSS를 사용함으로써 문서의 구조와 내용의 변경이 아니라면 원본 문서를 건드리지 않고 디자인 부분은 얼마든지 자유자재로 변경이나 적용이 가능합니다.
실제로 우리는 현장에서 일할 때 이런 요구를 많이 받습니다.
"음... 아무리 봐도 본문에 글씨 색이 마음에 안들어. 검은색 대신 회색으로 바꿔보는 게 어떨까?"
자, 이러면 난리가 납니다. 한 두페이지로 이루어진 사이트라면 모를까, 몇 백 페이지로 된 사이트... CSS를 전혀 쓰지 않았다면 <font color="black">으로 된 부분을 모두 찾아서 <font color="gray">로 바꿔줘야 합니다.
다행히(?) 요즘 기초적인 CSS는 디자이너나 개발자들도 조금은 알고 있어서 CSS 변경으로 한큐에 일괄 변경하는 꼼수 정도는 다들 알고 계실 겁니다.
그러나 CSS로 이런 것도 가능할까요?
"음.. 아무래도 상단 배너 이미지는 빼버리는 게 낫겠군. 그리고 지금 오른쪽에 있는 메인 메뉴들은 상단으로 올려서, 3단으로 구성된 페이지를 2단으로 만들어보는 건 어떨까? 로그인 박스는 메뉴밑에 한줄로 표현하고..."
결론부터 말하자면 가능합니다. 단, TABLE로 페이지 레이아웃을 잡은 경우라면 대략 난감. TABLE은 "표"를 표현하라고 있는 거지, 사이트 디자인하기 위해 레이아웃잡으라고 있는 태그는 아닙니다. 만약 TABLE을 써서 디자인을 했다면 위와 같은 요구를 받는다면 골치아파지죠.
다시 강조하지만, 문서의 구조와 내용을 바꾸는 경우가 아니라면, 디자인은 얼마든지 CSS만으로 구성이 가능합니다. 전제 조건은 하나. 문서가 잘 구조화되어있을 것.(그래서 CSS 이야기를 하기전에 XHTML에 관해 먼저 썰을 풀었던 거지요.)
2. 문서의 구조? 내용?
하나의 HTML문서를 이루는 성분으로는 구조, 내용, 디자인이 있습니다.
구조란 이 문서의 형식, 구성요소들을 말합니다. 메인메뉴가 있고, 서브메뉴가 있고, 네비게이션영역이 있고, 로그인박스가 있고, 헤드라인이 있고, 컨텐츠가 있고... 하는 것들이 문서의 구조를 가리킵니다.
내용이란 이 구조를 통해 실제로 전달하고자 하는 데이터라고 생각하시면 됩니다.
그리고 디자인이란 이러한 구조와 내용을 가진 문서가 실제로 브라우저 등을 통해 어떻게 보여지느냐에 관한 것입니다.
예를 들어, 어떤 문서에 박스기사를 삽입하는 것은 문서의 구조를 변경시키는 것입니다.
이 박스기사에 올림픽에 관한 글이 들어가야한다면 그것은 문서 내용에 관한 영역이됩니다.
이 박스기사가 브라우저 출력시에 어느 위치에 어떤 식으로 보일 것인가를 결정하는 것이 디자인입니다.
CSS가 만능은 아닙니다. 구조와 내용에 대해서는 건드릴 수 없습니다. 하지만 그것이 어떻게 표현될 것인가 하는 부분은 CSS의 전문 영역입니다. (역시 꼼수를 써서 구조와 내용조차도 "눈속임"을 통해 건드릴 수 있기도 합니다. ^_^;;)
3. Cascading
Style은 알겠는데 Cascading?
Cascading은 사전적 의미로는 "다단화하기" 쯤으로 번역됩니다. 한글로는 적절히 한단어로 표현하기 어렵네요. 폭포가 계단처럼 연결되어서 차례로 내려오는 것을 가리키는 말입니다.
좀더 풀어 설명하자면, Cascading Style Sheets란, Style Sheets들이 단계적으로 중첩되어 적용됨을 뜻합니다. OO적 개념에 익숙하신 분이라면 "상속"이라는 개념으로 받아들이셔도 됩니다.
Style은 크게 4가지 층위로 Cascading됩니다.
1. 브라우저 디폴트
2. External Style Sheet (<head>안에 <link> 태그로 외부에서 링크됩니다.)
3. Internal Style Sheet(<style>이라는 태그를 써서 문서안에서 정의됩니다.)
4. Inline Style (각 태그에 style=""이라는 속성을 이용해 정의됩니다.)
숫자가 클 수록 우선권이 높습니다. 따라서 <table style="border:none">일 경우 Inline Style인 border:none이 브라우저에서 디폴트값으로 정해진 것에 우선해서 적용되는 것입니다. 실제로 문서에 적용될 때는 위의 네가지 층위의 Style이 모두 합쳐져서 한개의 "Virtual Style"로 적용되어 문서내에서 사용됩니다. 그러므로 Inline Style로 border:none이 적용되었지만 다른 부분은 다른 층위에서 적용된 스타일을 따르게 됩니다.
가끔 include를 써서 외부 html문서를 현재 문서안에 불러왔을 때 디자인이 바뀐다는 질문을 종종 받는데 그 이유는 이러한 이유에서입니다. 특별한 경우가 아니라면 External Style Sheet만을 이용하는 것을 권장합니다.
4. CSS 기초문법
CSS의 문법은 selector, property, value의 세가지 요소로 구성됩니다.
selector {
property:value;
}
selector는 CSS의 스타일을 지정하는 이름입니다. selector는 일반적으로 HTML태그, class 이름, id 이름 등이 올 수 있습니다.
p { /* HTML 태그의 예 */
text-align:left;
}
.paragraph { /* class속성으로 쓸 경우의 예. 앞에 dot(.)가 붙음. */
text-align:right;
}
#main_contents { /* id속성으로 쓸 경우의 예. 앞에 #이 붙음. */
text-align:center;
}
실제 HTML에서 사용할 때는 다음 처럼...
<p>
Test
</p>
<p class="paragraph">
Test2
</p>
<p id="main_contents">
Test3
</p>
원래 class selector는 앞에 적용되는 HTML 태그를 붙여 표현하는게 맞지만 생략해도 됩니다. 위의 .paragraph는 p.paragraph에서 p태그가 생략된 예입니다. 왜 생략을 하냐하면 이 스타일이 반드시 <p>에서만 쓰이지 않을 수도 있기 때문입니다. 그러므로 <div class="paragraph">처럼 써도 통용되도록 하기 위해 일반적으로 HTML 태그는 생략하여 정의합니다. 반대로 HTML태그를 붙여서 정의한다면 각각의 HTML 태그별로 같은 class 이름이지만 다른 형태의 스타일을 지정할 수 있습니다.
id selector도 역시 앞에 HTML태그를 붙여야 하지만 생략가능합니다. class와의 차이라면, id로 정의된 스타일은 오직 한 엘리먼트에서만 사용될 수 있습니다. 예를 들어
<div id="main_contents">
어쩌구저쩌구..
</div>
...
<div id="main_contents">
궁시렁 궁시렁...
</div>
처럼 쓰면 안됩니다. (div#main_contents 처럼 써봤자 안통합니다. 이런 경우라면 class를 써야겠지요?)
만약 여러개의 selector에 동일한 스타일을 부여하고 싶다면 (,)를 사용해서 표현할 수 있습니다.
h1, h2, h3, h4, h5, p.title, #subject { /* 여러개의 style을 한꺼번에 정의할 경우의 예. */
text-decoration:underline;
}
property와 value는 항상 쌍으로 쓰이며, 각 쌍간의 구분은 세미콜론(;)로 구분합니다. 하나의 property에 value값은 여러개가 올 수 있으며 value값간의 구분은 컴마(,)로 구분합니다. 또 value값이 두개 이상의 단어로 이루어졌다면 겹따옴표(")로 묶어줘야 합니다.
body {
font-size:10px;
font-family:tahoma, 굴림, "sans serif";
line-height:150%;
}
하위 selector에 대한 스타일 정의시에는 공백(빈칸)으로 나열합니다.
.main p { /* .main이라는 클래스 안쪽에서 쓰인 <p> 의 경우라는 뜻입니다. */
font-color:red;
}
이 경우에..
<div class="main">
<p>
여기에 쓰인 글은 붉은 색으로 나올테지만...
</p>
</div>
<p>
main클래스 밖에 쓰인 이곳은 붉은 색이 아니랍니다. ^_^;
</p>
이미 눈치채셨겠지만 주석은 /* ~ */로 처리합니다.
일단 여기까지가 기본적인 CSS에 대한 이야기입니다. 시간이 많다면 각 property와 허용되는 value값, 그에 따른 효과등을 일일이 설명해야겠지만 거듭 밝히듯이 강좌가 아닌 관계로 이 정도만 정리합니다. w3c.org 등에서 좀 더 자세한 CSS 규칙을 보실 수 있습니다.
며칠 후에 쓸 세번째 꼭지서부터는 실제 CSS를 이용하여 디자인하기 위해 필요한 기술 및 레이아웃 잡는 법. 재밌는 CSS 활용 팁 등에 대해 다루게 될 겁니다.
회사일이 한가한 것도 아닌데 이렇게 놀고(?) 있으니 큰일입니다. ^_^;
다음 글부터는 실제적인 예시가 함께 나와야 하니 적절한 예를 찾거나 직접 만들어야하는 관계로 글 올라가는 간격이 며칠 될 것 같습니다. 다행히 여기까지는 원론적인 이야기라 말로 땜빵할 수 있어서 한번에 씁니다.
1. CSS?
CSS란 Cascading Style Sheets의 약자입니다. HTML 4.0 이후부터 Style을 사용하므로써 HTML 문서와 디자인을 분리시키는 것이 가능해졌습니다. Style이란 HTML 요소들이 어떻게 디스플레이될 것인가에 대한 정의를 말합니다.
원래 HTML은 문서의 구조와 내용을 나타내기 위해 만들어진 규약입니다만, 브라우저가 발달하면서 점차 디자인에 이용되는 태그들이 많아졌습니다. 그러다보니 이제는 주종이 바뀌어서, 내용이나 구조는 어찌 되었건간에 디자인과 관련된 분량이 더 많아졌습니다. 이러한 문제점을 해결하기 위해 HTML 4.0에서부터 적용되기 시작한 것이 CSS입니다.
CSS의 등장으로 인해 HTML에서 디자인적인 요소가 분리될 수 있음으로써 얻는 이득은 매우 많습니다. 우선 작업시간이 단축됩니다. 문서가 간결해지며 기계나 프로그램으로 문서해독이 용이합니다. 수정시간도 단축되며 제대로 구조화된 HTML문서와 결합된 CSS를 사용함으로써 문서의 구조와 내용의 변경이 아니라면 원본 문서를 건드리지 않고 디자인 부분은 얼마든지 자유자재로 변경이나 적용이 가능합니다.
실제로 우리는 현장에서 일할 때 이런 요구를 많이 받습니다.
"음... 아무리 봐도 본문에 글씨 색이 마음에 안들어. 검은색 대신 회색으로 바꿔보는 게 어떨까?"
자, 이러면 난리가 납니다. 한 두페이지로 이루어진 사이트라면 모를까, 몇 백 페이지로 된 사이트... CSS를 전혀 쓰지 않았다면 <font color="black">으로 된 부분을 모두 찾아서 <font color="gray">로 바꿔줘야 합니다.
다행히(?) 요즘 기초적인 CSS는 디자이너나 개발자들도 조금은 알고 있어서 CSS 변경으로 한큐에 일괄 변경하는 꼼수 정도는 다들 알고 계실 겁니다.
그러나 CSS로 이런 것도 가능할까요?
"음.. 아무래도 상단 배너 이미지는 빼버리는 게 낫겠군. 그리고 지금 오른쪽에 있는 메인 메뉴들은 상단으로 올려서, 3단으로 구성된 페이지를 2단으로 만들어보는 건 어떨까? 로그인 박스는 메뉴밑에 한줄로 표현하고..."
결론부터 말하자면 가능합니다. 단, TABLE로 페이지 레이아웃을 잡은 경우라면 대략 난감. TABLE은 "표"를 표현하라고 있는 거지, 사이트 디자인하기 위해 레이아웃잡으라고 있는 태그는 아닙니다. 만약 TABLE을 써서 디자인을 했다면 위와 같은 요구를 받는다면 골치아파지죠.
다시 강조하지만, 문서의 구조와 내용을 바꾸는 경우가 아니라면, 디자인은 얼마든지 CSS만으로 구성이 가능합니다. 전제 조건은 하나. 문서가 잘 구조화되어있을 것.(그래서 CSS 이야기를 하기전에 XHTML에 관해 먼저 썰을 풀었던 거지요.)
2. 문서의 구조? 내용?
하나의 HTML문서를 이루는 성분으로는 구조, 내용, 디자인이 있습니다.
구조란 이 문서의 형식, 구성요소들을 말합니다. 메인메뉴가 있고, 서브메뉴가 있고, 네비게이션영역이 있고, 로그인박스가 있고, 헤드라인이 있고, 컨텐츠가 있고... 하는 것들이 문서의 구조를 가리킵니다.
내용이란 이 구조를 통해 실제로 전달하고자 하는 데이터라고 생각하시면 됩니다.
그리고 디자인이란 이러한 구조와 내용을 가진 문서가 실제로 브라우저 등을 통해 어떻게 보여지느냐에 관한 것입니다.
예를 들어, 어떤 문서에 박스기사를 삽입하는 것은 문서의 구조를 변경시키는 것입니다.
이 박스기사에 올림픽에 관한 글이 들어가야한다면 그것은 문서 내용에 관한 영역이됩니다.
이 박스기사가 브라우저 출력시에 어느 위치에 어떤 식으로 보일 것인가를 결정하는 것이 디자인입니다.
CSS가 만능은 아닙니다. 구조와 내용에 대해서는 건드릴 수 없습니다. 하지만 그것이 어떻게 표현될 것인가 하는 부분은 CSS의 전문 영역입니다. (역시 꼼수를 써서 구조와 내용조차도 "눈속임"을 통해 건드릴 수 있기도 합니다. ^_^;;)
3. Cascading
Style은 알겠는데 Cascading?
Cascading은 사전적 의미로는 "다단화하기" 쯤으로 번역됩니다. 한글로는 적절히 한단어로 표현하기 어렵네요. 폭포가 계단처럼 연결되어서 차례로 내려오는 것을 가리키는 말입니다.
좀더 풀어 설명하자면, Cascading Style Sheets란, Style Sheets들이 단계적으로 중첩되어 적용됨을 뜻합니다. OO적 개념에 익숙하신 분이라면 "상속"이라는 개념으로 받아들이셔도 됩니다.
Style은 크게 4가지 층위로 Cascading됩니다.
1. 브라우저 디폴트
2. External Style Sheet (<head>안에 <link> 태그로 외부에서 링크됩니다.)
3. Internal Style Sheet(<style>이라는 태그를 써서 문서안에서 정의됩니다.)
4. Inline Style (각 태그에 style=""이라는 속성을 이용해 정의됩니다.)
숫자가 클 수록 우선권이 높습니다. 따라서 <table style="border:none">일 경우 Inline Style인 border:none이 브라우저에서 디폴트값으로 정해진 것에 우선해서 적용되는 것입니다. 실제로 문서에 적용될 때는 위의 네가지 층위의 Style이 모두 합쳐져서 한개의 "Virtual Style"로 적용되어 문서내에서 사용됩니다. 그러므로 Inline Style로 border:none이 적용되었지만 다른 부분은 다른 층위에서 적용된 스타일을 따르게 됩니다.
가끔 include를 써서 외부 html문서를 현재 문서안에 불러왔을 때 디자인이 바뀐다는 질문을 종종 받는데 그 이유는 이러한 이유에서입니다. 특별한 경우가 아니라면 External Style Sheet만을 이용하는 것을 권장합니다.
4. CSS 기초문법
CSS의 문법은 selector, property, value의 세가지 요소로 구성됩니다.
selector {
property:value;
}
selector는 CSS의 스타일을 지정하는 이름입니다. selector는 일반적으로 HTML태그, class 이름, id 이름 등이 올 수 있습니다.
p { /* HTML 태그의 예 */
text-align:left;
}
.paragraph { /* class속성으로 쓸 경우의 예. 앞에 dot(.)가 붙음. */
text-align:right;
}
#main_contents { /* id속성으로 쓸 경우의 예. 앞에 #이 붙음. */
text-align:center;
}
실제 HTML에서 사용할 때는 다음 처럼...
<p>
Test
</p>
<p class="paragraph">
Test2
</p>
<p id="main_contents">
Test3
</p>
원래 class selector는 앞에 적용되는 HTML 태그를 붙여 표현하는게 맞지만 생략해도 됩니다. 위의 .paragraph는 p.paragraph에서 p태그가 생략된 예입니다. 왜 생략을 하냐하면 이 스타일이 반드시 <p>에서만 쓰이지 않을 수도 있기 때문입니다. 그러므로 <div class="paragraph">처럼 써도 통용되도록 하기 위해 일반적으로 HTML 태그는 생략하여 정의합니다. 반대로 HTML태그를 붙여서 정의한다면 각각의 HTML 태그별로 같은 class 이름이지만 다른 형태의 스타일을 지정할 수 있습니다.
id selector도 역시 앞에 HTML태그를 붙여야 하지만 생략가능합니다. class와의 차이라면, id로 정의된 스타일은 오직 한 엘리먼트에서만 사용될 수 있습니다. 예를 들어
<div id="main_contents">
어쩌구저쩌구..
</div>
...
<div id="main_contents">
궁시렁 궁시렁...
</div>
처럼 쓰면 안됩니다. (div#main_contents 처럼 써봤자 안통합니다. 이런 경우라면 class를 써야겠지요?)
만약 여러개의 selector에 동일한 스타일을 부여하고 싶다면 (,)를 사용해서 표현할 수 있습니다.
h1, h2, h3, h4, h5, p.title, #subject { /* 여러개의 style을 한꺼번에 정의할 경우의 예. */
text-decoration:underline;
}
property와 value는 항상 쌍으로 쓰이며, 각 쌍간의 구분은 세미콜론(;)로 구분합니다. 하나의 property에 value값은 여러개가 올 수 있으며 value값간의 구분은 컴마(,)로 구분합니다. 또 value값이 두개 이상의 단어로 이루어졌다면 겹따옴표(")로 묶어줘야 합니다.
body {
font-size:10px;
font-family:tahoma, 굴림, "sans serif";
line-height:150%;
}
하위 selector에 대한 스타일 정의시에는 공백(빈칸)으로 나열합니다.
.main p { /* .main이라는 클래스 안쪽에서 쓰인 <p> 의 경우라는 뜻입니다. */
font-color:red;
}
이 경우에..
<div class="main">
<p>
여기에 쓰인 글은 붉은 색으로 나올테지만...
</p>
</div>
<p>
main클래스 밖에 쓰인 이곳은 붉은 색이 아니랍니다. ^_^;
</p>
이미 눈치채셨겠지만 주석은 /* ~ */로 처리합니다.
일단 여기까지가 기본적인 CSS에 대한 이야기입니다. 시간이 많다면 각 property와 허용되는 value값, 그에 따른 효과등을 일일이 설명해야겠지만 거듭 밝히듯이 강좌가 아닌 관계로 이 정도만 정리합니다. w3c.org 등에서 좀 더 자세한 CSS 규칙을 보실 수 있습니다.
며칠 후에 쓸 세번째 꼭지서부터는 실제 CSS를 이용하여 디자인하기 위해 필요한 기술 및 레이아웃 잡는 법. 재밌는 CSS 활용 팁 등에 대해 다루게 될 겁니다.
관련자료
-
링크
댓글 0
등록된 댓글이 없습니다.
