![[CSS]-1. 적용방법 및 선택자](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbDGPpK%2FbtrzGgB37LQ%2FAAAAAAAAAAAAAAAAAAAAAKU8Jk2rGeeyFAxEPBRk1cQWBfJbTcGbvMW0KkyNVc6x%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1753973999%26allow_ip%3D%26allow_referer%3D%26signature%3Dt8bdlu2sJJxwZ6BW1lWb%252Be9Kh04%253D)
반응형
오늘부터 CSS를 배우기 시작했습니다. html과 마찬가지로 학원에서 배우는 내용을 중점으로 정리해보겠습니다!!
오늘은 적용방법과 선택자에 대해 간단히 알아보겠습니다 :)
<CSS 적용방법>
- HTML 요소에 'style' 속성으로 적용
- HEAD 요소 안에 <style> 태그를 이용해서 적용
- HEAD 요소 안에 <link> 태그를 이용해서 외부 css 파일을 적용
1번과 2번은 'Inline-Style'이고, 보안상 취약함으로 사용되지 않음.
<선택자>
- 요소 선택자(Element Selector) : 태그의 이름으로 선택한다. (그냥 요소 이름 적음)
- 클래스 선택자(Class Selector) : 태그의 class 속성(Attribute)으로 선택한다. (클래스 이름 앞에 마침표(.)를 붙임)
- 아이디 선택자(ID Selector) : 태그의 id 속성(Attribute)으로 선택한다. (아이디 이름 앞에 샾(#)을 붙임)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS-1</title>
<style>
/*
요소 선택자 (Element Selector) : 태그의 이름으로 선택한다. (그냥 요소 이름 적음)
클래스 선택자 (Class Selector) : 태그의 class 속성(Attribute)로 선택한다.
(클래스 이름 앞에 마침표(.)를 붙인다.)
아이디 선택자 (ID Selector) : 태그의 id 속성(Attribute)로 선택한다. (아이디 이름 앞에 샾(#)을 붙인다.) < 사용하지 않음.
*/
/* a{
color: blue;
} */
a{
font-size: large;
}
.color-blue {
color: blue;
}
.text-big{
font-size: 15pt;
}
#color-red {
color: red;
}
</style>
</head>
<body>
<!-- <a style="color: red;">I'm red.</a> -->
<a>청춘 고양이</a> <!--1번 방법-->
<br>
<a class="color-blue">I'm blue.</a> <!--2번 방법-->
<br>
<a class="color-blue text-big">I'm blue and big.</a> <!--2번 방법-->
<br>
<a class="text-big">I'm black and big.</a> <!--2번 방법-->
<br>
<a id="color-red">I'm Red</a> <!--3번 방법-->
</body>
</html>
<복합 선택자>
- 자식 선택자 : 계층 구조에서 바로 아래 오는 자식 요소만을 선택 {부모 선택자} > {자식 선택자}
- 후손 선택자 : 계층 구조에서 하위에 오는 모든 후손들을 선택 {부모 선택자} {자식 선택자}
- 인접 형제 선택자 : {선택자1} + {선택자2} : 선택자 1에 의해 선택된 요소 바로 뒤에 붙어서 나오는 선택자 2에 해당하는 요소
- 형제 선택자 : {선택자1} ~ {선택자2} : 선택자 1에 의해 선택된 요소 뒤에 나오는 선택자 2에 해당하는 요소
ㅣ<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS-2</title>
</head>
<style>
span {
color: red;
}
/* 자식 선택자 : {부모 선택자} > {자식 선택자} */
body > span {
text-decoration: underline;
}
/* 후손 선택자 : {부모 선택자} {자식 선택자} */
body> div > span{
font-style: italic;
}
/* 인접 형제 선택자 : {선택자 1} + {선택자 2} : 선택자1에 의해 선택된 요소 바로 뒤에 붙어서 나오는 선택자2에 해당하는 요소. */
body > div > div > span.three + a {
color: blue;
}
/* 형제 선택자 : {선택자 1} ~ {선택자 2} : 선택자1에 의해 선택된 요소 뒤에 나오는 선택자2에 해당하는 요소. 같은 부모를 가져야 한다. */
body > div > div > span.three ~ a {
color: blue;
}
</style>
<body>
<span>One</span>
<div>
<span>Two</span>
<div>
<span class="three">Three</span>
<span>Four</span>
<span>Five</span>
<a>Six</a>
</div>
</div>
</body>
</html>
<속성 선택자>
클래스 속성이나 ID 속성과 같이 대표적인 속성이 아닌 태그 안의 특정 속성을 가지고 스타일을 지정하는 방법
<!DOCTYPE html>
<html lang="en">
<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>
body>label>input[type=checkbox]{
display: none;
}
</style>
</head>
<body>
<label>
<input type="checkbox">
<span>청춘 고양이</span>
</label>
</body>
</html>
<가상 선택자>
선택자 뒤에 : 를 붙이면 특정 상황마다 적용할 스타일을 설정. 각 선택자 뒤에 클론(:)을 적고 명시
몇 가지의 가상 선택자를 알아봅시다.
| 가상 선택자 | |
| :link | 방문한 적이 없는 링크 선택 |
| :visited | 방문한 적이 있는 링크 선택 |
| :hover | 마우스를 가져다 (롤오버) 둘때 발생 |
| :active | 마우스를 클릭했을 때 발생 |
| :focus | 포커스 되었을 때 (보통 사용자가 요소를 클릭 하거나 키보드로 Tab키를 누를때) 발생 |
| :first | 첫번째 요소선택 |
| :last | 마지막 요소선택 |
| :first-child | 첫번째 자식선택 |
| :last-child | 마지막 자식선택 |
| :nth-child() | 괄호안에 있는 자식 (괄호 안이 even이면 짝수 자식들 선택, odd면 홀수 자식들 선택) |
| :not(가상 선택자) | 부정을 뜻함 즉, 인수로 받는 선택자의 반대를 선택 |
nth child 경우 시작점은 해당 요소의 자식들의 첫 요소로부터 시작한다.
<!DOCTYPE html>
<html lang="en">
<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>
body>label>input[type=checkbox]{
display: none;
}
body > div > a:first-child {
color: blue;
}
body > div > a:nth-child(5) {
color: orange;
}
body > div > a:last-child {
color: red;
}
</style>
</head>
<body>
<body>
<label class="agree">
<input type="checkbox">
<span>위 약관을 읽어보았고 동의합니다.</span>
<br>
<span class="warning">위 약관을 읽고 동의해주세요.</span>
</label>
<div>
<a>Hello?</a>
<br>
<a>Hello?</a>
<br>
<a>Hello?</a>
<br>
<a>Hello?</a>
<br>
<a>Hello?</a>
</div>
</body>
</html>
여기서 시작점은 <a>요소 이며 <br>도 그 순번에 들어가게 된다. body > div > a:nth-child(5)인 경우를 한번 보자
즉 시작점은 해당 요소의 자식들의 첫 요소인 <a>부터 시작되면 5번째는 아래와 같이 표시가 된다.
여기서 우리는 주의를 해야 되는데 만약 body > div > a:nth-child(4) 면 어떻게 될까?
4번째는 <br>의 요소를 가르키기 때문에 값이 나오지 않게 된다.
따라서 요소의 시작점으로 부터시작점으로부터 해당 요소가 시작점으로부터 얼마나 떨어져 있는지를 확인하고 그 위치에 해당 요소가 있는지를 확인해야 된다.
오늘의 포스팅을 마무리하겠습니다. 오늘은 CSS 적용방법과 선택자에 대해 알아보았습니다. 다들 내일도 파이팅!
반응형
'HTML&CSS' 카테고리의 다른 글
| [CSS]-3. GRID와 FLEX (1) | 2022.04.24 |
|---|---|
| [CSS]-2. POSITION (0) | 2022.04.20 |
| 구획, 입력, 폼 HTML (0) | 2022.04.17 |
| 제목, 목록, 표 HTML (0) | 2022.04.16 |
| HTML (0) | 2022.04.14 |