🎱 CSS 선택자
- 대표 CSS 선택자 3가지 : tag 선택자, id 선택자, class 선택자
< 선택자 사용 방법>
선택자 {속성: 속성값};
1. tag 선택자
-
tag 그대로를 선택자로 활용
-
강제, 자동 적용
⭐ 입력
<head>
<style type="text/css">
h1 {
color: pink;
<!--글자색을 분홍색으로 설정-->
font-family : "고딕";
<!--글꼴을 고딕체로 설정-->
line-height: 4.0;
<!--줄 높이를 4.0으로 설정
숫자가 커질수록 글자간 줄 간격 벌어짐-->
}
</style>
</head>
<body>
<h1>tag 선택자 테스트1111</h1>
<h1>tag 선택자 테스트2222</h1>
</body>📌 출력
2. id 선택자
-
tag에 id를 추가하고
#id형태로 활용 -
id 값은 중복 적용이 불가능하므로 구조적인 목적에 사용
⭐ 입력
<head>
<style type="text/css">
#int {color: green;}
<!--글자색을 초록색으로 설정-->
</style>
</head>
<body>
<h1><span id="int">id 선택자 테스트</span></h1>
</body>📌 출력
3. class 선택자
-
tag에 class 를 추가하고
.class형태로 활용 -
class 값은 중복 적용, 조합 가능
-> 주로 디자인적인 목적에 사용
⭐ 입력
<head>
<style type="text/css">
.bg-ol {background-color: olive;}
<!--배경색을 올리브색으로 설정-->
.cl-wh {color: white;}
<!--글자색을 흰색으로 설정-->
</style>
</head>
<body>
<h1><span class="bg-ol cl-wh">class 선택자 테스트</span></h1>
<!--클래스 선택자의 경우 중복 사용이 가능하므로
bl-ol클래스와 cl-wh클래스를 같이 사용했음
클래스 값 두 개를 사용하고 싶을 때는 큰따옴표 안에서 띄어쓰기로 클래스를 구분함-->
</body>📌 출력
🎱 CSS 적용법
- External 방식, Internal 방식, Inline 방식 세 가지가 있음
1. External CSS
-
외부파일 방식
-
스타일소스를 별도의 파일로 독립해 작성 후 웹문서와 연결하여 적용
-
통일성 있는 구성 가능
-
유지보수 유리
<head> <link href="*.css" rel="stylesheet"> </head>
⭐ 입력(html 파일)
<head>
<link href="basic.css" rel="stylesheet">
<!--스타일 태그 위에 링크 태그 걸어서 css파일 연결
링크 태그 옆에 rel="stylesheet 꼭 적어줘야 함-->
<style type="text/css"></style>
</head>
<body>
<h1><span id="ext">External CSS 테스트</span></h1>
</body>⭐ 입력(css 파일)
#ext {color: skyblue;}
/* 글자색을 스카이블루로 변경 */📌 출력
2. Internal CSS
-
내장 방식
-
스타일소스를 웹문서의 head 영역에 작성
-
해당 웹문서에만 적용됨
<head> <style type="text/css"> 선택자 {속성:속성값;} </style> </head>
3. Inline CSS
-
인라인 방식
-
스타일소스를 해당 태그 뒤에 바로 작성
-
CSS의 장점이 없으나 세 가지 방식 중 적용 우선 순위가 가장 높음
-
부분만 수정 가능한 상황에서 활용
<body> <tag style="속성:속성값;"> </body>
⭐ 예시
<h1 style="color:red;">Inline CSS</h1>
<!--글자색 빨간색으로 변경-->
개발자가 되었어요⭐️