CSS란 무엇인가?
Cascading Style Sheets(CSS)는 HTML이나 XML로 작성된 문서의 표시 방법(스타일)을 기술하기 위한 스타일 시트 언어이다.
CSS는 요소(element)가 화면, 종이, 음성 등 다른 매체 상에 어떻게 렌더링되는지 지정한다.(색상, 크기, 모양 등)
간단히 말해 웹페이지를 꾸미기 위해 작성하는 코드이다.
HTML과 유사하게 CSS는 프로그래밍 언어가 아니다. 하지만 HTML과 같은 마크업 언어(markup)도 아니다. CSS는 Style sheet 언어인데 HTML 문서 내에 있는 요소들에 선택적으로 스타일을 적용할 수 있다는 뜻이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title> 실습 </title>
<style>
h1
{
color:yellowgreen
}
</style>
</head>
<body>
<h1 color:red>subprofessor</h1>
</body>
</html>
결과화면
subprofessor
위와 같이 적용하는 것을 내부 스타일 시트라 부른다.
CSS3를 HTML5에 적용하는 방법
CSS3를 HTML5에 적용하는 방법은 크게 3가지가 있다.
1. 인라인(inline) 스타일 시트 : HTML 문서 내의 각 Tag 요소에 직접 스타일 시트를 정의한다.
2. 내부(Internal) 스타일 시트 : HTML 문서의 <head> 부분에 스타일 시트를 정의한다. 위에서는 내부 스타일 시트 방식을 사용하였음
3. 외부(external) 스타일 시트 : 스타일 시트를 별도의 파일(확장자 .css)로 저장하여 다른 HTML문서에서도 같은 스타일 시트를 사용할 수 있도록 한다.
적용할 스타일 시트가 간단할 경우 인라인 시트를 사용하며 통상적으로 외부 스타일 시트를 이용해 웹페이지를 디자인한다.
1. 인라인 스타일 시트의 예시
: 각 Tag 내에 style 속성(attribute)으로 고유한 스타일을 적용한다. 적용범위는 style 속성이 작성된 Tag 내부이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title> 실습 </title>
</head>
<body>
<h1 style="font-family : 굴림; font-style : italic;">subprofessor</h1>
<p style="font-size:20pt; text-align:center; color:aquamarine;">Inline style sheet</p>
</body>
</html>
결과화면
subprofessor
Inline style sheet
2. 내부 스타일 시트의 예시
: <head> Tag 내에 <style> Tag 로 고유한 스타일을 적용한다. 적용범위는 하나의 HTML 문서 전체이다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<style>
h1
{
font-family : 굴림;
font-style : italic;
}
p
{
font-size:20pt;
text-align:center;
}
</style>
</head>
<body>
<h1>subprofessor</h1>
<p>Internal style sheet</p>
</body>
</html>
결과화면
subprofessor
Internal style sheet
3. 외부 스타일 시트의 예시
: 스타일 시트를 별도 파일로 저장 후 파일명을 (파일명.css)로 지정한다. 적용범위는 전체 웹 페이지에 각 HTML 문서에 적용한다.(가장 넓은 범위)
각각의 HTML문서의 <head> Tag 내에서 <link> Tag 를 이용하여 선언한다.
※ <link> Tag 에 관한 내용은 아래 게시글 참조
<link rel="stlesheet" type="text/css" href="css 파일명">
정확히는 href 이후 css파일의 위치가 등장해야 하는데 통상 HTML 문서와 동일한 폴더에 존재하니 .css 확장자를 포함하여 파일명을 적어주어도 잘 기능한다.
html문서를 다음과 같이 작성하고
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>실습</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>subprofessor</h1>
<p>External style sheet</p>
</body>
</html>css문서에 아래 코드를 작성한 후 html 문서를 열어보면
p
{
color: red;
}
style이 적용되어 있다.
위 예시코드에서는 속성의 순서가 href -> rel -> type 인데 속성의 순서는 달라도 크게 상관이 없다.
하지만 속성에는 통상적인 순서체계가 존재한다.
CSS의 전체 구조를 rule set이라 부른다.(종종 줄여서 "rule"이라 부름)
rule set 에는 다음과 같은 부분적인 요소들이 존재한다.
● selector(선택자)
● declaration(선언)
● properties(속성)
● property value(속성값)
구문에서의 규칙도 있다.
● 각각의 rule set(선택자로 구분한다)은 반드시 { } 로 감싸져야 한다.
● 각각의 선언 안에, 각 속성을 해당 값과 구분하기 위해 콜론 : 을 사용해야만 한다.
● 각각의 rule set 안에, 각 선언을 그 다음 선언으로부터 구분하기 위해 세미콜론 ; 을 사용해야만 한다. (마지막일 경우에도 ; 사용)
예시코드는 다음과 같다.
p {
color: red;
width: 500px;
border: 1px solid black;
}
여러 요소들에 대해 스타일을 일괄적으로 적용하고 싶을 때는 단순히 brace({ }) 앞에 여러 개의 요소를 지정해주면 된다.
p,li,h1 {
color: red;
}
선택자의 여러 가지 종류는 다음과 같다.
|
선택자 이름
|
선택하는 것
|
예시
|
|
요소 선택자 (때때로 태그 또는 타입 선택자라 불림)
|
특정 타입의 모든 HTML 요소.
|
p <p> 를 선택
|
|
아이디 선택자
|
특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다).
|
#my-id <p id="my-id"> 또는 <a id="my-id"> 를 선택
|
|
클래스 선택자
|
특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다).
|
.my-class <p class="my-class"> 와 <a class="my-class"> 를 선택
|
|
속성 선택자
|
특정 속성을 갖는 페이지의 요소.
|
img[src] <img src="myimage.png"> 를 선택하지만 <img> 는 선택 안함
|
|
수도(Pseudo) 클래스 선택자
|
특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때.
|
a:hover <a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함
|
'개발 > 웹개발' 카테고리의 다른 글
| [CSS] 선택자 응용 20가지 : 여러 가지 요소, 요소 내부의 요소 등등 . . (0) | 2022.09.05 |
|---|---|
| [CSS] 선택자란?, 선택자가 적용되는 우선순위(Selectors) (0) | 2022.09.03 |
| [HTML] 항목, 리스트 만들기 : <ul>, <li>, <ol> (0) | 2022.08.28 |
| [HTML] HTML 기본구조, 기본태그 (0) | 2022.08.26 |
| [HTML] 웹 페이지에 이미지와 링크삽입하기 / 문서 내 하이퍼링크 달기 : <img>, <a> (1) | 2022.08.23 |