1. CSS란
CSS란 html에서 디자인 효과만 따로 떨어져 나온 기능이다. CSS는 독자적인 양식을 갖는다.
2. CSS 예제를 통한 CSS의 기본구조 보기
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<style>
h1 {
color:red;
font-size:20px;
}
h2 {
color:yellow;
text-decoration: underline;
}
header h1{
border:1px solid red;
color:green;
text-decoration: underline;
}
.class {
border:1px solid red;
color:green;
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>
css study
</h1>
</header>
<h1>css</h1>
<h2>javascript</h2>
<h3>html</h3>
</body>
</html>
ⅰ.<style> 태그
CSS는 <style>안에 위치하게 된다. <style>태그 자체는 html이지만, <style>안에 들어오는 내용은 CSS로써 받아들여지게 된다.
ⅱ. CSS기본구조 : 선택자와 서술자
css는 선택자와 서술자로 구성된다.
① 선택자
-h1부분을 선택자라고 부르는데, 선택자의 자리에는 html 태그가 위치한다. 즉, 선택자에 적힌 html 태그에 css가 적용되는 것이다.
-h1{color:red}라고하면 h1부분의 폰트만 빨간색이 되며, body{color:red}라고하면 body전체의 폰트가 빨간색이 된다. 선택자는 html의 태그가 들어가게 된다.
②서술자
-세미콜론으로 엮인 부분을 서술자라고 부른다.
-h1{color:red; font-size:10px;}과 같은 css가 존재할 때, {color:red; font-size:10px;}전체는 서술자라고 부르지만 서술자를 구성하는 color:red; font-size:10px;의 각각의 부분은 속성property이라고 한다.
-각각의 속성은 세미콜론으로 구분된다.
ⅲ. 다중 선택자
다중선택자란 html태그를 넓은 범위부터 적은 범위 순으로 두 개기술 하는 것이다. 만약 위의 예에서 <header>전체가 아닌 <header>내부의 <h1>만 css를 적용하고 싶다고 한다면, header h1{color:red; font-size:10px;}같은 방법으로 적어준다.
ⅳ. 클래스의 선택
클래스는 .class 의 문법으로 기재한다.
ⅴ. html내에서 CSS의 위치
css는 기본적으로 <head>태그에 들어오게 된다.
'Front-end > HTML,CSS Basic' 카테고리의 다른 글
| 당신은 모를 수도 있는 CSS의 7가지 단위(rem,vh,vw,vmin,vmax,ex,ch) (1) | 2018.01.25 |
|---|---|
| [HTML]Class 속성 구체적으로 알아보기 (0) | 2018.01.25 |
| meta 태그 구체적으로 알아보기 (0) | 2018.01.25 |
| [HTML] DIV 태그와 SPAN 태그의 차이점/인라인엘리먼트, 블록엘리먼트의 종류 (0) | 2018.01.25 |
| HTML의 구성요소 태그(Tag), 요소(Element), 속성(Attribute), 변수(Arguments) (0) | 2018.01.25 |