반응형
더보기
목차
- CSS란?
- CSS 선택자 - 기본
- CSS 선택자 사용법 - 단순 선택자
- CSS 선택자 사용법 - 복합 선택자
- 가상 클래스 선택자
1. CSS란?
html이 웹개발의 기본 뼈대를 담당했다면 CSS는 그 뼈대를 꾸며주는 꾸미기 요소라고 할 수 있다. CSS의 경우에는 <head>태그 안에 <style>태그를 만들어 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS가 들어가는 공간 */
</style>
</head>
<body>
</body>
</html>2. CSS 선택자 - 기본
html파일에 있는 각각의 태그에 서로 다른 꾸미기를 적용해야할텐데 이 때, 어떤 요소에 스타일을 적용할지 알려주는 것이 CSS선택자라고 할 수 있다.
<h1>css 선택자 연습입니다</h1>
<p>css 스타일 적용하기</p><style>
h1 {
color: red;
background-color: aliceblue;
}
p {
color: aqua;
background-color: black;
}
</style>각각을 살펴보면 h1 태그와 p태그에 css를 주기 위해 h1과 p 선택자를 사용했다. 이렇게 h1이나 p라는 태그를 사용하게 될 경우 html 내에 있는 모든 h1과 p태그에 css 속성값이 적용된다.
3. CSS 선택자 사용법 - 단순 선택자
위처럼 기본적인 태그 선택자를 사용하는 방법을 제외하고도 선택자의 종류는 많다. 그 중에서 먼저 단순 선택자에 대해서 알아보려고 한다.
- 전체 선택자
- 전체 선택자는 * 를 사용한다.
- html의 모든 태그에 적용하는 선택자이다.
- 타입 선택자
- 타입 선택자는 h1, p 등과 같은 태그의 이름을 사용하는 선택자이다.
- 클래스 선택자
- 클래스 선택자는 .클래스이름을 사용하는 선택자이다.
- 태그에 class를 부여하여 클래스 이름과 같은 태그에 적용한다.
- ID 선택자
- ID 선택자는 #아이디이름을 사용하는 선택자이다.
- 태그에 ID를 부여하여 ID 이름과 같은 태그에 적용한다.
<style>
/* 전체 선택자 */
* {
color: red;
}
/* 타입 선택자 */
h1 {
color: red;
background-color: aliceblue;
}
p {
color: aqua;
background-color: black;
}
/* 클래스 선택자 */
.classname {
color: beige;
}
/* ID 선택자 */
#IDname {
font-size: 10px;
}
</style>4. CSS 선택자 사용법 - 복합 선택자
다음은 단순 선택자가 아닌 복합 선택자를 사용하는 방법을 알아보려고 한다.
- 자식 선택자
- 자식 선택자는 선택자 div의 모든 자식 중 선택자 p와 일치하는 요소를 선택한다.
- 선택자 두개를 사용하며 중간에 > 를 사용한다.
- 후손 선택자
- 후손 선택자는 선택자 div의 모든 자손 중 선택자 p와 일치하는 요소를 선택한다.
- 선택자 두개 사이에 공백을 준다.
<style>
/* 자식 선택자 */
div > p {
color: red;
background-color: aliceblue;
}
/* 자손 선택자 */
div p {
color: brown;
}
</style>* 자식과 자손의 차이 : 자식은 부모 바로 밑 요소들을 말하며, 자손은 좀 더 포괄적인 개념으로 부모 밑의 모든 요소들을 말한다.
5. 가상 클래스 선택자
선택자 뒤에 :가상이벤트를 추가하면 특정 이벤트에 스타일을 추가할 수 있다. 일반적인 클래스와 달리 가상클래스는 직접 정의할 수 없고 실제 HTML에서도 보이지 않는다는 특징을 가진다.
- :link = 방문한 적이 없는 링크
- :visited = 방문한 적이 있는 링크
- :hover = 마우스를 올렸을 때
- :focus = 포커스 되었을 때(input 태그)
- :active = 마우스로 클릭했을 때
- :first = 첫번째 요소
- :last = 마지막 요소
- :first-child = 첫번째 자식
- :last-child = 마지막 자식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.hello {
background-color: beige;
}
button {
color: black;
}
button:hover {
color: red;
}
a:hover {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div class="hello">
<h1>안녕하세요.</h1>
<a href="https://www.naver.com">네이버로 이동하기</a>
<a href="https://www.daum.net">다음으로 이동하기</a>
<button>버튼입니다</button>
</div>
</body>
</html>반응형
