CSS에대해서 본격적으로 배워보도록 하겠습니다.
앞서 설명해드렸던 선택자는 HTML 요소를 선택하는 것이라고 말씀드렸어요~
JQuery에서도 많이 사용하니까 잘 알아두세요.
대표적으로 6가지를 알려드릴게요
- 타입 선택자
- 전체 선택자
- 클래스 선택자
- 아이디 선택자
- 속성 선택자
- 의사 선택자
이렇게 있습니다.
1. 타입 선택자
HTML 요소 이름을 사용합니다.
예를 들어서 h1{ color: green;}
h1의 모든 요소를 선택하여 초록색으로 변경시킵니다.
2. 전체 선택자
페이지 안에 있는 모든 요소를 선택하여 속성을 변경시킵니다.
* { color: green; }
3. 아이디 선택자
특정한 요소만 변경시키고 싶을 때 아이디 선택자를 사용합니다. 요소 id앞에 #을 붙이면 됩니다.
#target { color: red; }
<p id=“target">Hello World!</p>
id가 target인 요소를 빨간색으로 바꿉니다.
4. 클래스 선택자
클래스가 부여된 요소를 선택합니다.
.을 이용하여 표현합니다.
몇 개의 요소를 모아서 스타일을 지정할때 많이 사용합니다.
.target { color: red; }
<p class=“target">Hello World!</p>
클래스가 target인 요소를 빨간색으로 변경시킵니다.
- 선택자 그룹은 각 선택자에 의해 선택된 요소들의 합을 의미합니다. ,로 분리하여 작성합니다.
h1, h2, h3 { font-family: sans-serif; }
- 자손 자식 형제 결합자
선택자가 s1 s2일 경우 : s1 요소에 포함된 s2요소를 선택합니다.(후손)
선택자가 s1>s2일 경우: s1 요소의 직계 자식 요소 s2를 선택합니다.(자식)
- body em { color:red; } /* body 안의 em 요소 */
- body > h1 { color:blue; } /* body 안의 h1 요소 */
5.의사 클래스
의사 클래스는 클래스가 정의 된 것처럼 간주합니다.
:를 표시하여 사용합니다.
동적으로 스타일을 적용할 수 있습니다.
a:link일 경우 <a>요소 link선언 가정하고 선택자를 만듭니다.
• a:link { color: blue; } /*아직 방문되지 않을 경우 */
• a:visited { color: green; } /* 방문된 링크 */
• a:hover { color: red; } /* 사용자가 링크 위에 있을 때 */
• a:artive { color:orange; } /* 활성화 되었을 때 */
6. 속성 선택자
특정 속성을 가지는 요소를 선택합니다.
- h1[title] { color: blue; } /* title 속성을 갖고 있는 h1 요소 */
- p[class=“example”] { color: blue; } /* class 속성이 example인 p 요소 */
이렇게 해서 총 6개의 선택자에 대해 배워보았습니다.
자!! CSS를 적용시키기위해서는 어디다 작성해야하냐구요 ??
외부에 작성할 수 도 있고 내부에 작성 할 수 도 있습니다.
즉 외부 스타일 시트와 내부 스타일 시트가 있습니다.
외부 스타일 시트는 .css 확장자로 파일을 생성하여 작성하고
html문서에서 <link type="text/css" rel="stylesheet" href="mystyle.css"> 와 같이 하면 됩니다.
이는 많은 페이지를 적용할때 유용해서 되도록 이방법을 사용하세요 ㅎㅎ
내부 스타일 시트는
<style> 태그를 이용하여 작성하시면 됩니다.
<head>
<style>
~~~
</style>
</head>
이런식입니다.
다음으로는 색상에 대해서 설명드리도록 할게요
'웹 > HTML과 CSS' 카테고리의 다른 글
| CSS 본격 들어가기(2) (0) | 2018.08.17 |
|---|---|
| HTML 본격 들어가기(2) (0) | 2018.08.11 |
| HTML 본격 들어가기(1) (0) | 2018.08.08 |
| CSS란? (0) | 2018.08.04 |
| HTML이란? (0) | 2018.08.03 |
