heenam
4. CSS3 스타일 시트 기초 본문
CSS의 개념
우리는 앞에서 HTML 요소를 이용해서 HTML 문서를 작성해 보았다. 하지만 무엇인가 빠져있다는 것을 느꼈을 것이다.
문서의 구조는 HTML로 정의할 수 있었지만 문서가 화면에 표시되는 스타일은 주정할 수 없었다. 즉 색상, 폰트, 크기와
같은 스타일은 지정하지 않았다. 스타일이 지정되지 않으면 아주 밋밋한 웹 페이지가 된다.
우리는 CSS를 이용해서 문서의 스타일을 지정한다. 즉 HTML 요소의 크기, 폰트, 색상 등을 결정한다.
CSS의 필요성
웹 페이지의 스타일을 HTML 태그로 적어주는 것보다 CSS로 분리하는 것이 어떤 장점이 있는지를 고찰해 보자.
많은 페이지로 이루어진 사이트의 텍스트를 폰트를 바꾸려면 HTML 페이지 안에 스타일 정보를 태그한 것은 일일이
모든 페이지의 내용을 다 바꿔줘야 하지만 CSS로 스타일 정보를 입력했다면 한번에 모든 페이지가 변경 된다.
CSS 문법
CSS는 HTML 요소를 페이지 위에 어떻게 그리느냐를 지시하는 명령어의 집합이다.
1. 스타일을 변경하고 싶은 HTML 요소를 선택한다. 이것을 선택자라고 한다.
2. 선택자 뒤에 중괄호를 붙이고 이 중괄호 안에는 이들 요소를 어떻게 그리는지 기술한다.이 부분을 선언이라고 한다.
속성은 "이름: 값"의 형식으로 기술한다.
예를 들어 <p>요소의 배경색을 노란색으로 설정하는 CSS선언을 살펴보자.
p { background-color: yellow; }p = 선택자
background-color = 속성
yellow; = 값
위에 선언에서 선택자는 "p"이다. 이건은 단락을 나타내는 <p>요소를 의미한다. 중괄호 안에들어 있는 것이 선언이다.
"brackground-colo"는 속성의 이름이고 "yellow"는 속성의 값이다.
앞의 선언은 <p> 요소의 배경색이 노란색임을 기술하고 있다. 각각의 CSS 선언은 항상 ;으로 끝나야 한다.
만약 CSS선언에 속성을 추가하고 싶다면 다음과 같이 추가한다.
p {
background-color: yellow;
border: 2px solid red;
}CSS의 위치
그렇다면 CSS는 어디에 있어야 하는가? 기본적으로 CSS는 HTML의 <head>요소 내에서 <style>...</style> 안에
적어주면 된다.
선택자
CSS에서 가장 중요한 부분이 선택자이다. 선택자란 용어 그대로 HTML 요소를 선택하는 부분이다.
선택자는 우리가 원하는 요소를 선택할 수 있어야 하기 때문에 필요하다. 일반적으로는 모든 요소에 동일한 스타일을
적용하는 일은 드문다. 특정한 요소를 선택한 후에 여기다가 우리가 원하는 스타일을 적용하게 된다.
CSS 선택자는 jQuery에서도 사용된다. 따라서 완벽하게 이해하고 넘어가야 한다. CSS에서 선택자 문법은 상당이
복잡하지만 실제 작업에서 가장 많이 가용되는 것은 6가지 정도이다.
+ 타입 선택자
+ 전체 선택자
+ 클래스 선택자
+ 아이디 선택자
+ 속성 선택자
+ 의사 선택자
타입 선택자
가장 기본적인 선택자는 HTML요소 이름을 사용하는 것이다. 예를 들어 <p>요소를 선택하려면 다음과 같이 P라고
적어주면 된다. 이것을 타입 선택자 라고 한다.
h1 { color: green; }
전체 선택자
전체 선택자는 *기호로 표시되며 페이지 안 모든 요소를 선택할 때 사용된다. 주로 모든 요소에 공동적으로 속성을
지정할때, 사용된다
* { color: green; }
아이디 선택자
아이디 선택자를 사용하면 특정한 요소를 쉽게 선택할 수 있다. 아마 가장 많이 사용되는 선택자일 것이다.
#special { color: green; }
아이디 선택자를 사용하려면 먼저 HTML 요소를 정의할 때, id를 부여해야 한다.
< p id="special"> id가 special인 단락입니다. </p>
CSS에서는 요소의 id앞에 #를 붙이면 된다.
<!DOCTYPE html>
<html>
<head>
<title>CSS id Example</title>
<style>
#special {
background-color: yellow;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="special"> id가 special인 단락입니다. </p>
<p>정상적인 단락 입니다.</p>
</body>
</html>
클래스 선택자
클래스 선택자는 .을 이용해서 정의된다. 요소를 정의할 때 클레스 이름을 부여할 수 있다.
.target { color: green; }
클래스 선택자는 몇 개의 요소를 하나의 클래스로 묶어서 스타일을 지정하려고 할때 사용된다.
id 선택자는 하나의 요소만 선택할 수 있는 반면에 클래스 선택자는 여러 개의 요소를 한꺼면에 선택할 수 있다.
선택자 그룹
만약 선택자를 콤마(,)로 분리하여 나열한다면, 이것은 각 선택자에 의하여 선택된 요소의 합을 의미한다.
이것을 선택자 그룹이라고 한다.
h1 {font-family: sans-serif;}
h2 {font-family: sans-serif;}
h3 {font-family: sans-serif;}
위의 선언은 아래의 선언과 동일하다.
h1, h2, h3 {font-family: sans-serif;}자손, 자식, 형제 결합자
이들은 모두 선택자를 결합해서 특정한 요소를 선택한다. 특정한 요소의 후손을 선택할 수도 있고 자식 요소만을
선택할 수도 있다.
| 선택자 | 설명 |
| s1 s2 | s1 요소에 포함된 s2요소를 선택한다. (후손 관계) |
| s1 > s2 | s1요소의 직계 자식 요소인 s2를 선택한다. (자식 관계) |
후손과 자식이 혼돈될 수도 있다. HTML에서는 모든 요소를 가계도 형태로 그릴 수 있다.
후손이란 손자, 손녀도 포함과는 관계이고 자식이란 아들, 딸만 포함된다고 생각하면 된다.
의사 클래스
의사 클래스는 콜론(:)을 사용하여 표기한다. 의사 클래스는 용어 그대로 클래스가 정의된 것처럼 간주한다는 의미이다.
의사 클래스는 문서 트리의 외부에 있는 정보에 기반을 두어서 요소를 선택할 때, 사용된다.
a:link {color: blue;} /* 아직 방문되지 않은 링크는 색상을 파란색으로 한다. */속성 선택자
특정한 속성을 가지는 요소를 선택한다. 예를 들어 다음은 title속성을 가지고 있는 h1요소를 선택한다.
h1[title] {color: blue;} title /*속성을 가지고 있는 h1요소를 선택한다 */
p[class = "ecample"] {color: blue;} /*class 속성이 "example"인 p요소를 선택한다.CSS를 삽입하는 방법
스타일 시트를 문서에 삽입하는 3가지 방법이 있다.
+ 외부 스타일 시트
+ 내부 스타일 시트
+ 인라인 스타일 시트
외부 스타일 시트
외부 스타일 시트는 말 그대로 스타일 시트를 외부에 파일로 저장하는 것이다. 외부 스타일 파일은 많은 페이지에
동일한 스타일을 적용하려고 할 때 좋은 방법이다. 외부 스타일 파일을 사용하면 전체 웹 페이지의 스타일을 하나의
스타일 파일로 변경할 수 있다.
각 HTML페이지는 <link>태그를 이용해서 스타일 파일에 연결해야 한다. <link> 태그는 헤드 부분에 있어야 한다.
h1 {color: red;}<!DOCTYPE html>
<html>
<head>
<link type="test/css" rel="stylesheet" href="test.css">
</head>
<body>
<h1>This is a headline.</h1>
</body>
</html>
일단 CSS파일이 작성되면 다른 HTML파일에서도 이 CSS파일을 불러들여서 사용할 수 있다.
내부 스타일 시트
내부 스타일 시트는 HTML 안에 CSS를 정의하는 것이다. <style> 태그를 이용하여 스타일을 정의하여 <head>요소
안에 넣으면 된다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color: red;}
</style>
</head>
<body>
<h1>This is a headline!</h1>
</body>
</html>
인라인 스타일 시트
인라인 스타일 시트는 용어 그래도 각각의 요소마다 스타일을 지정하는 것이다. 사실 이 방법을 사용하면 스타일
시트의 장점을 잃게 된다. 하지만 간편하게 요소에 스타일을 자정할 수 있다는 장점도 있다. 따라서 꼭 필요한
경우에만 사용하도록 하자.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style = "color: red"> This is a headline.<h1>
</body>
</html>색상
컴퓨터에서 색상은 빛의 3원색인 빨간색, 녹색, 청색을 혼합하여 만들어진다. CSS에서 색상을 표현하는 몇 가지의
방법이 있다. 이름으로 표현할 수도 있고 16진수, 10진수, 퍼센트로도 표현할 수 있다.
| 방법 | 설명 |
| 이름으로 표현 | "red" |
| 16진수로 표현 | #FF0000 |
| 10진수로 표현 | rgb(255, 0, 0) |
| 퍼센트로 표현 | rgb(100%, 0, 0) |
폰트
웹 페이지에서도 텍스트를 통하여 많은 정보를 전달하게 된다. 따라서 텍스트의 스타일은 무척이나 중요하다.
특히 폰트는 페이지의 디자인에 절대적인 영향을 준다. CSS font 속성을 이용하면 폰트의 종류, 색상, 장식, 크기 등을
지정할 수 있다.
폰트가 선택되는 과정
body{
font-family: '원하는 폰트', Times, serif;
}'원하는 폰트': 이 폰트가 사용자의 컴퓨터에 설치되어 있는지 체크한다. 설치되어 있으면 이 폰트가 선택된다.
Times: '원하는 폰트'가 없으면 Times 폰트를 조사한다.
serif; : Times 폰트도 없으면 브라우저가 serif로 간주하는 폰트가 선택된다.
폰트 크기 설정
font-size 속성은 텍스트의 크기를 설정한다. 텍스트의 크기를 조절하는 것은 웹디자인에 있어서 아주 중요하다.
하지만 문단의 크기를 조절해서 제목처럼 보이게 하면 안된다. 제목에는 <h1>~<h6>를 사용하고 문단에는 <p>를
사용하는 것이 좋다.
body {
font-size: 20pt;
}폰트의 크기는 절대 크기와 상대 크기로 설정될 수 있다. 절대 크기는 텍스트를 지정된 크기로 설정하며 모든 브라우저
에서만 사용자가 변경할 수 없게 한다. 절대 크기는 출력의 물리적인 크기가 알려져 있는 경우에만 유용하다.
상대 크기는 주위 요소의 크기에 비례하여 상대적으로 폰트 크기를 설정한다. 사용자가 텍스트의 크기를 변경할 수
있도록 허용한다.
px 단위로 설정하기
px는 픽셀을 의미한다. 폰트의 크기도 픽셀 단위로 지정할 수 있다. 지정된 숫자는 폰트의 높이가 된다.
body {
font-size: 12px; /* 폰트의 높이가 12픽셀이라는 것을 의미한다.*/
}%단위로 설정하기
폰트 크기를 퍼센트로 설정할 수 있다. 퍼센트는 기준 폰트의 크기에 비하여 어느 정도인지를 나타낸다. 그런데 어떤
폰트가 기준이 될까? 바로 부모 요소의 폰트 크기가 기준이 된다.
body {
font-size: 12px; /* 폰트의 높이가 12픽셀이라는 것을 의미한다.*/
}
h2 {
font-size: 200%; /* 부모 요소인 <body>의 200%이므로 24px이 된다.
}em단위로 설정하기
em 크기 단위 W3C에서 권장하는 단위로서 배수를 의미한다. em도 %와 마찬가지로 상대적인 크기이다.
1em은 부모 요소의 폰트 크기와 같다. 역시 기준은 부모 요소의 폰트 크기이다.
body {
font-size: 12px; /* 폰트의 높이가 12픽셀이라는 것을 의미한다.*/
}
h2 {
font-size: 2.0em; /* 부모 요소인 <body>의 2배이므로 24px이 된다.
}키워드로 설정하기
옷의 사이즈와 비슷하게 xx-small, x-small, small, medium, large, x-large, xx-large와 같은 키워드를 사용해 폰트의
크기를 지정할 수 있다.
body {
font-size: small; /* 대부분 브라우저에서 이것은 12px에 해당한다.*/
}font-weight 속성
font-weight는 폰트를 볼드체로 할 것인지를 지정한다. 볼드체가 되면 글자의 무게가 증가하므로 font-weight라는
이름을 붙였따. font-weight는 bold나 normal 중에 하나로 설정할 수 있다.
h1#s1 { font-weight: normal;}
h1#h2 { font-weight: bold; } /*볼드체로 설정*/font-style 속성
font-style은 이탤릭 텍스트로 설정할 것인지를 지정한다. normal, italic, oblique 중에서 하나로 설정하면 된다.
italic과 oblique는 아주 흡사한데, italic은 미리 만들어진 폰트가 존재하는 경우고 oblique는 정상적인 폰트를 그리는
과정에서 기울인 폰트이다. 그냥 똑같다고 생각해도 된다.
h1#s1 { font-weight: normal;}
h1#h2 { font-weight: italic; } /*이탈릭체로 설정*/텍스트 스타일 설정
CSS에서는 다채로운 텍스트 장식 기능을 제공한다. 텍스트 정렬, 텍스트 색상, 텍스트 변환 등이 가능하다.
텍스트 스타일과 관련해서는 다음과 같은 속성을 사용할 수 있다.
텍스트 색상과 텍스트 정렬
color 속성을 사용해 텍스트의 색상을 설정할 수 있다.
body {color: blue; }텍스트 정렬도 지정할 수 있는데 왼쪽 정렬, 중앙 정렬, 오른쪽 정렬, 양쪽 정렬로 지정될 수 있다.
양쪽 정렬이란 양쪽을 가지런하게 맞춰 주는 정렬 방식으로 가장 널리 쓰이는 정렬 방식이다.
h1 { text-alian: center; color:red; }
p.date { text-alian: right; color; indito; }
p.poet {text-alian: justify; color; blue; }
텍스트 장식
텍스트 장식은 설정되거나 삭제될 수 있다. 텍스트 장식은 링크에 붙는 밑줄을 삭제할 때 사용된다.
h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
/*텍스트 장식 지정*/텍스트 변환
텍스트 변환은 텍스트 안에서 소문자나 대문자를 지정할 때 사용된다. 모든 문자를 소문자 대문자로 변환하거나
아니면 각 단어의 첫 글자를 대문자로 변환할 때 사용된다.
p.upper { text-transform: uppercase; }
p.lower { text-transform: lowercase; }
p.capit {{ text-transform: capitalize; }텍스트 그림자
CSS에서는 text-shadow속성을 지정하면 텍스트에 그림자를 설정할 수 있다.
h1 {
text-shadow: 3px 5px 10px #000;
}3px: x방향 이동 거리
5px: y방향 이동거리
10px: 흐림 정도
#000: 텍스트 그림자 색상
Word Wrapping
word wrap 속성은 하나의 단어가 너무 길어서 영역 안에 들어가지 않는 경우에 자도응로 단어를 잘라서 다음줄로
넘기는 기능이다
word-wrap: break-word;다중 컬럼
CSS3를 사용하면, 신문처럼 텍스트를 배치하는 데 다중 컬럼을 생성할 수 있다. 다중 컬럼은 다음과 같은 속성을
이용한다.
+ column-count: 컬럼의 개수
+ column-gap: 컬럼과 컬럼사이의 간격
+ column-rule: 컬럼과 컬럼 사이의 선 스타일
<style>
.poet{
column count: 2; /*2개의 컬럼으로 나눌 것을 지정*/
column-gap: 50px; /*컬럼과 컬럼 사이의 공백=50 픽셀*/
column-rule: 4px outest red; /*컬럼과 컬럼 사이의 구분선은 두께 4픽셀,
outest 스타일 선, 빨간색으로 지정*/
}
</style>
'Wep Programming > CSS3' 카테고리의 다른 글
| 부트 스트랩이란? (0) | 2020.06.12 |
|---|---|
| 7. HTML과 CSS로 웹 사이트 만들기 (0) | 2020.06.10 |
| 6. CSS3 레이아웃과 애니메이션 (0) | 2020.06.05 |
| 5. CSS3 박스 모델과 응용 (0) | 2020.06.05 |