CSS #1
시작하기 앞서 CSS 기능에 대해서는 다음 사이트를 이용하는 것이 좋다.
https://www.w3schools.com/css/default.asp
CSS Tutorial
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
1. CSS를 사용하는 이유
글자색을 바꾸는 경우 HTML태그만으로도 색상을 표현할 수 있다.
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
만약에 웹 사이트내의 모든 파란색을 하늘색으로 바꾸고 싶다고 했을 때 우리는 모든 파란색을 찾아서 일일이 하늘색으로 바꿔줘야하는 번거로움이 있다.
하지만 CSS를 이용하면 이러한 노가다 작업들을 한결 수월하게 관리 할 수 있기 때문에 CSS를 사용한다.
2. head 영역 안에 포함하기
CSS는 head영역 안에 선언되어 <style> ... </style>형식으로 사용된다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:red;}
p {color:blue;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3. CSS 기본문법
Selector는 설정할 영역을 선택하고, Property는 색상, 크기 등의 정보를 명시한다.
그리고 Value안에는 Property의 실제 값을 설정하는 부분이다.
4. Selector
다음은 CSS 셀렉터의 가장 기본적인 활용이다
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
html의 p영역에 해당되는 모든 내용들에 대해서 CSS스타일을 적용시킨다
위의 예제에서는 가운데 정렬과 글자색에 빨간색을 적용하였다.
여러개의 영역에 한꺼번에 적용하고 싶으면 아래와 같이 사용할 수도 있다.
h1, h2, p {
text-align: center;
color: red;
}
그리고 id를 활용하여 selector를 이용할 수 있다.
<!DOCTYPE html>
<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>
p 영역 안에서도 일부만 적용시키고 싶을 때 id를 활용할 수 있다.
class를 이용하여 영역을 선택할 수도 있다.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
사실 id와 class의 차이점은 딱히 모르겠다..
*을 활용하여 모든 영역에 다 적용하는 방법도 있다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>