CSS
CSS란 “Cascading Style Sheet”로 HTML 등의 마크업 언어로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어이다. 쉽게 말하면 웹페이지를 꾸며주는 언어이다.
CSS를 학습할 때 아래 사이트를 참고하면 매우 좋다.
https://www.w3schools.com/css/
HTML tags
HTML에서는 아래와 같은 태그들로 CSS를 적용시킬 수 있다.
<span>
<span>은 텍스트의 일부나 문서의 일부에 style을 적용시키기 위한 태그이다.
1
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
My mother has blue eyes.
<span>이라는 tag를 이용해서 부분별로 style 속성을 지정 할 수 있지만 각 부분별로 일일이 style 속성을 지정하면 비효율적이면서 관리하기가 힘들다. 그렇기에 보통은 style 관련 부분은 따로 빼서 <style>이라는 태그에서 관리하거나 css파일을 만들어서 관리한다.
<style>
<style>은 CSS 부분을 정의하기 위한 태그이다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<style>
h4 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h4>A heading</h4>
<p>A paragraph.</p>
</body>
</html>
A heading
A paragraph.
해당 웹페이지에 적용될 CSS부분을 따로 정의 및 관리할 수 있다.
CSS 파일로 따로 빼서 관리한다면 다른 웹페이지에서도 적용시킬 수 있다.
CSS Syntax(문법)
출처:CSS Syntax
CSS 문법은 기본적으로 위 형태로 동일하다. Selector부분은 style을 지정할 요소를 말한다. 중괄호안에는 “속성:값;” 형태로 style을 지정해준다. 쉽게 말하자면 CSS 문법은 누구(Selector)한테 무엇(Property)을 어떻게(Value) 적용할 것인가를 표현한 것이다.
CSS Selectors
CSS 문법은 위가 다지만 Selector를 지정하는 방법이 여러가지가 있다.
element Selector
HTML 요소(tag)에다 style을 적용시킬 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
</body>
</html>
Every paragraph will be affected by the style.
id Selector
HTML 요소(tag)의 id 속성을 사용하여 하나의 고유한 요소에 style을 적용시킬 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Hello World!
This paragraph is not affected by the style.
class Selector
특정 class 속성을 가진 HTML 요소(tag)들에 style을 적용시킬 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h4 class="center">Red and center-aligned heading</h4>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Red and center-aligned heading
Red and center-aligned paragraph.
Grouping Selector
Style 정의가 동일한 요소들은 그룹화하여 적용시킬 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Hello World!
Smaller heading!
This is a paragraph.