컴퓨터/웹언어/팁
CSS 기초
Clark Joseph Kent
2010. 1. 19. 23:17
::::: CSS(CAscading Style Sheet) 란?
- CSS는 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해서 사용하는 language이다.
- CSS의 가장 큰 목적은 문서의 내용과 문서의 표현을 분리하는 것에 있다. 문서의 내용은 HTML로 작성하고 문서의 표현은 CSS를 이용해서 나타내는 것이다.
- CSS를 처음 접할때 CSS를 적용하는 것이 주 목적이 아니라 컨텐츠를 의미에 맞게 기술하기 위한 HTML 작성을 위해서 CSS를 사용한다는 것을 항상 염두에 두어야 한다.
::::: CSS 선언방법
1. 외부선언 (External css)
- 외부파일을 불러옴. 우선순위는 가장 낮다.
<link rel="stylesheet" type="text/css" href="style.css" />
- 문서 안에 포함 : <head>엘리먼트안에 <style>엘리먼트를 사용하여 정의.
<style type="text/css">
</style>
2. 엘리먼트에 직접 선언 (inline css)
<div style="padding: 10px; border: 1px solid #eee;">내용</div>
3. 사용자 정의 스타일 (user defined css)
- 가장 우선 순위가 높다. 웹사이트 이용자가 직접 스타일을 선언하는 방법
:::: CSS 기초문법
CSS의 문법은 selector, property, value의 세가지 요소로 구성됩니다.
selector {
property:value;
}
p { /* HTML 태그의 예 */
text-align:left;
}
.paragraph { /* class속성으로 쓸 경우의 예. 앞에 dot(.)가 붙음. */
text-align:right;
}
#main_contents { /* id속성으로 쓸 경우의 예. 앞에 #이 붙음. */
text-align:center;
}
::::: CSS 적용의 체크 포인트 4가지
1. XHTML이 표준 문법이어야 한다.
2. XHTML 문서가 의미와 구조적으로 구성되어야 한다.
3. CSS가 표준 문법이어야 한다.
- CSS의 주석 구문 표시 :
/* comment */ (html주석과 다른 언어들의 한줄 주석은 사용해서는 안된다.)
- 0을 제외한 모든 값들은 단위를 표기하여야 한다.
바른예 : <td style="padding: 15px 20px 10px 30px;"> 세미콜론으로 구문의 끝을 표시한다.
- 컬러값 사용
#rrggbb 방법 - color: #ff0000; (=color: #f00;)
rgb(r,g,b) 방법 - color: rgb(255,0,0); (=color: rgb(100%,0%,0%);)
- 잘못된 사용 - color: ff0000 이나 color=#ff0000
4. CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
- 표준준수 브라우저 : Firefox, Mozilla Suite, Opera, Safari
::::: CSS 레이아웃(Layout) 기초
** 테이블 레이아웃 사용에 대해서....
테이블은 비 시각적 미디어에서 랜더링시 문제가 있기 때문에 문서 내용의 레이아웃을 정하는 목적으로 사용하지 않는 편이 좋다. 그리고 테이블에 이미지를 사용한다면, 디자이너의 화면이 사용자의 화면보다 넓을 경우 사용자가 수평으로 스크롤을 해야하는 문제가 발생할 수도 있다. 이런 문제들을 최소화하기 위해서 레이아웃은 테이블보다 스타일쉬트를 사용하는 것이 바람직하다.
** CSS레이아웃이란 :
그리드(grid)가 아닌 구성요소의 집합.
웹페이지를 제작할 때에 가장 먼저 생각해야 하는 것은 화면의 분할이 아니라 웹페이지의 구성요소들과 이 구성요소들의 관계를 정립하는 것이다.
** 레이아웃에 사용되는 두 가지 속성 : position / float
position : 위치를 지정하여 원하는 위치에 엘리먼트를 배치하는 속성
- static : 기본값
- relative : static과 같지만 offset을 지정할 수 있고 하위 엘리먼트 offset의 기준점이 된다.
- absolute : 화면상에서 다른 컨테츠의 위치에 영향을 미치지 않고 위치 지정이 가능하다. 보통 레이어라고 불리는것.
float : 대상 엘리먼트를 띄워서 현재의 위치에서 좌측이나 우측에 배치하는 속성
- left : 엘리먼트를 좌측으로 배치함
- right: 엘리먼트를 우측으로 배치함
- none : float시키지 않음
- CSS는 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해서 사용하는 language이다.
- CSS의 가장 큰 목적은 문서의 내용과 문서의 표현을 분리하는 것에 있다. 문서의 내용은 HTML로 작성하고 문서의 표현은 CSS를 이용해서 나타내는 것이다.
- CSS를 처음 접할때 CSS를 적용하는 것이 주 목적이 아니라 컨텐츠를 의미에 맞게 기술하기 위한 HTML 작성을 위해서 CSS를 사용한다는 것을 항상 염두에 두어야 한다.
::::: CSS 선언방법
1. 외부선언 (External css)
- 외부파일을 불러옴. 우선순위는 가장 낮다.
<link rel="stylesheet" type="text/css" href="style.css" />
- 문서 안에 포함 : <head>엘리먼트안에 <style>엘리먼트를 사용하여 정의.
<style type="text/css">
</style>
2. 엘리먼트에 직접 선언 (inline css)
<div style="padding: 10px; border: 1px solid #eee;">내용</div>
3. 사용자 정의 스타일 (user defined css)
- 가장 우선 순위가 높다. 웹사이트 이용자가 직접 스타일을 선언하는 방법
:::: CSS 기초문법
CSS의 문법은 selector, property, value의 세가지 요소로 구성됩니다.
selector {
property:value;
}
p { /* HTML 태그의 예 */
text-align:left;
}
.paragraph { /* class속성으로 쓸 경우의 예. 앞에 dot(.)가 붙음. */
text-align:right;
}
#main_contents { /* id속성으로 쓸 경우의 예. 앞에 #이 붙음. */
text-align:center;
}
::::: CSS 적용의 체크 포인트 4가지
1. XHTML이 표준 문법이어야 한다.
2. XHTML 문서가 의미와 구조적으로 구성되어야 한다.
3. CSS가 표준 문법이어야 한다.
- CSS의 주석 구문 표시 :
/* comment */ (html주석과 다른 언어들의 한줄 주석은 사용해서는 안된다.)
- 0을 제외한 모든 값들은 단위를 표기하여야 한다.
바른예 : <td style="padding: 15px 20px 10px 30px;"> 세미콜론으로 구문의 끝을 표시한다.
- 컬러값 사용
#rrggbb 방법 - color: #ff0000; (=color: #f00;)
rgb(r,g,b) 방법 - color: rgb(255,0,0); (=color: rgb(100%,0%,0%);)
- 잘못된 사용 - color: ff0000 이나 color=#ff0000
4. CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
- 표준준수 브라우저 : Firefox, Mozilla Suite, Opera, Safari
::::: CSS 레이아웃(Layout) 기초
** 테이블 레이아웃 사용에 대해서....
테이블은 비 시각적 미디어에서 랜더링시 문제가 있기 때문에 문서 내용의 레이아웃을 정하는 목적으로 사용하지 않는 편이 좋다. 그리고 테이블에 이미지를 사용한다면, 디자이너의 화면이 사용자의 화면보다 넓을 경우 사용자가 수평으로 스크롤을 해야하는 문제가 발생할 수도 있다. 이런 문제들을 최소화하기 위해서 레이아웃은 테이블보다 스타일쉬트를 사용하는 것이 바람직하다.
** CSS레이아웃이란 :
그리드(grid)가 아닌 구성요소의 집합.
웹페이지를 제작할 때에 가장 먼저 생각해야 하는 것은 화면의 분할이 아니라 웹페이지의 구성요소들과 이 구성요소들의 관계를 정립하는 것이다.
** 레이아웃에 사용되는 두 가지 속성 : position / float
position : 위치를 지정하여 원하는 위치에 엘리먼트를 배치하는 속성
- static : 기본값
- relative : static과 같지만 offset을 지정할 수 있고 하위 엘리먼트 offset의 기준점이 된다.
- absolute : 화면상에서 다른 컨테츠의 위치에 영향을 미치지 않고 위치 지정이 가능하다. 보통 레이어라고 불리는것.
float : 대상 엘리먼트를 띄워서 현재의 위치에서 좌측이나 우측에 배치하는 속성
- left : 엘리먼트를 좌측으로 배치함
- right: 엘리먼트를 우측으로 배치함
- none : float시키지 않음