반응형
● CSS3
★ CSS는 HTML 문서의 스타일을 지정하는데 사용하는 언어입니다.
★ Cascading Style Sheets
★ 문법(구문)
Selector {Property:Value;
Property:Value;
...
}
★ Selector(선택자, 선택기) : html 문서의 요소 선택.
★ Property : 요소에 적용할 스타일 속성.
★ Value : 해당 속성의 값.
★ CSS 작성 위치
☆ 태그의 style 속성에 작성.(인라인 스타일)
☆ <head> 요소의 하위 요소인 <style> 요소에 작성.(내부 스타일)
☆ XXX.css 파일을 만들어서 CSS만 따로 작성.(외부 스타일)
※ 예)
<h1> 요소에 글자색상 파랑, 글자크기 12px로 지정한다. ->
h1 { color: blue; font-size: 12px; }
★ CSS 적용 우선순위
☆ 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 기본 스타일
(link 태그와 style 태그의 순서에 따라 내부, 외부 스타일의 우선 순위는 바뀔 수 있음.)
★ !important
☆우선 순위와 상관없이 반드시 지정되도록 하기 위한 키워드(강제!)
★ css_apply.html ★
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS 적용</title>
<!-- 외부 스타일시트 연결( <link> ) -->
<link type="text/css" rel="stylesheet" href="external.css">
<style type="text/css">
p2 {
color: blue;
font-size: 30px;
background: yellow;
}
</style>
</head>
<body>ㅉ저
<!-- ☆ p2 p3 라는 태그는 없습니다.!!
이렇게 만들어도 스타일 시트 적용 되는걸 보여줄려고 합니다.
☆ 중첩되서 사용된다면 위쪽 style시트가 먼저 적용되고 그다음
밑에 style시트가 실행되어 덮혀버린다. -->
<p1 style="color: red;">인라인 스타일 시트 적용</p1>
<br>
<p2>내부 스타일 시트 적용</p2>
<br>
<p3>외부 스타일 시트 적용</p3>
<br>
</body>
</html>☆ external.css ☆
@charset "UTF-8";
/* 브라우저 전체 영역 사용 */
* {
padding: 0;
margin: 0;
}
p3 {
color: green;
background-color: purple;
font-size: 20px;
}
p2 {
background: pink!important;
}반응형
'Front-end > Css' 카테고리의 다른 글
| CSS 가상 선택자4(::first-line, ::first-letter, ::before, ::after) (0) | 2023.05.16 |
|---|---|
| CSS 가상 선택자3(:disabled, :checked) (0) | 2023.05.16 |
| CSS 가상 선택자2(:first-child, :last-child, :nth-child(2n+1)) (0) | 2023.05.16 |
| CSS 가상 선택자1(:link, :visited, :hover, :active, :focus) (0) | 2023.05.16 |
| CSS 기본 선택자('*', '태그', '.', '#', '[속성]') (0) | 2023.05.04 |
