CSS - style태그와 태그선택자, div와 class 선택자

728x90

CSS 내용은 반드시 style 태그 안에 작성해야한다.
디자인을 변경 하려면 우선적으로 디자인을 변경할 태그를 선택하여 적용할 수 있다.
이러한 태그 선택하는 방법을 '선택자'라고 한다.

태그선택자 : 해당 문서 안의 모든 동일 태그에 디자인 적용.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
/* 이런식으로 head의 title밑에 style을 만들어 사용한다. */
<style type="text/css">
h1{
    color: red;
    background-color: yellow;
    border: 5px solid black; 
}
h3{
    color: blue;
    border: 1px dotted red;
}
</style>
 
</head>
<body>
 
<h1>Hello~ CSS</h1>
<h1>Hello~ CSS</h1>
<h3>Hello~ HTML</h3>
</body>
</html>
Colored by Color Scripter
cs

style은 반드시 html의 <head> </head>안에서 사용해야하며, title밑에 작성해야한다.

h1{ } 이라는 태그를 이용하여 body에서 사용했던 h1의 텍스트를 꾸며줄 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<style type="text/css">
/* id 선택자 */
/* id 속성값이 first인 태그를 선택.*/
#first{
    color: red;
}
/* class 선택자 */
.blueDiv{
    color: blue;
}
</style>
</head>
 
<body>
<div id ="first">첫번째 div</div>
<div class="blueDiv">두번째 div</div>
<div class="blueDiv">세번째 div</div>
</body>
</html>
cs

<div id = "first"> 로 사용된 곳을 꾸며주고 싶다면 style로 들어가 CSS를 적용시켜줄 수 있다.

문법은 id선택자는 #을 이용한다. #frist{ } 와 같이 사용이 가능하며,

class선택자는 . 을 이용할 수 있다. .blueDiv{ } 와 같이 사용이 가능하다.

HTML과 CSS는 계산하는 과정이 없어 비교적 쉽지만 너무나 많은 기능들이 있어서 모두 외우기는 사실상 불가능하다.

중요한 div나 table, 선택자, 그리고 많이 쓰는 기능들 몇개만 알아두고,

필요한게 있을 때마다 그때그때 찾아쓰면 편리할듯싶다.

저작자표시 비영리 변경금지

'✨ Front-end > CSS' 카테고리의 다른 글

CSS - div를 가운데 정렬 (inline-block) (0)	2023.03.07
CSS - div를 가운데 정렬 (float과 overflow) (0)	2023.03.07
CSS - 로그인, 게시판, 회원가입 폼 만들어보기 (0)	2023.02.09
CSS - 자식과 자손 선택자 ( > ) (0)	2023.02.09