CSS
HTML이 웹사이트의 몸체를 담당한다면 CSS는 옷과 액세서리 같은 꾸미는 역할을 담당한다고 할 수 있습니다.
스타일 표기법
태그이름 { color같은 것:설정 값;} 이렇게 됩니다.
주석
/**/로 /*주석*/과 같이 사용할 수 있습니다.
스타일과 스타일 시트
내부
<style></style>안에서 설정값을 지정해 넣습니다.
외부
<link href="css파일.css" rel="stylesheet" type="text/css">
위와같이 써서 적용하고 href는 경로 rel은 무엇과 관계있는지 type는 종류를 말하는 것입니다.
그리고 css파일에서 style태그를 사용합니다.
인라인 스타일
<p style="color:red;"></p>이런 것을 말합니다.
태그와 같이 사용됩니다.
전체선택자(*)
* { 설정값} 이렇게 하면 모든 것이라는 의미가 됩니다.
태그선택자
태그를 지정해 사용하는 것 입니다.
p, h2, ul같은 데에 사용됩니다.
p { 설정 값 }
h1, h2 {설정 값}<-두개가 지정됩니다.
클래스 선택자
.이름 { 설정 값} 이렇게 사용하여 태그에서 class="이름" 이런식으로 지정하여 사용합니다.
.red { color:red;} <p class="red">~~</p>와같이 쓰입니다.
만약 h2.이름 이런식으로 태그를 지정하면 그 태그에 쓰이지 않으면 효과가 없습니다.
h2.red { color:red;} <p class="red"><-이런식으로 해도 의미가 없음
영역으로 스타일 지정
<span>태그를 이용하여 <span (class/style)>과같이 사용할 수 있습니다.
id선택자
#이름으로 만들어 사용할 수 있고 일회용 입니다.
#red { ~~} <p id="red">~~</p>
위와같이 사용할 수 있습니다.
!important
예를 들어 태그 선택자에서 같은 설정값이 나왔다면 우선하기 위해 사용합니다.
p{ color:red !important;}<-우선시됨
p{ color:blue;}
스타일 상속
어떤 태그를 포함하는 태그의 스타일을 포함되는 태그도 적용받는 것을 말합니다.
ul같은경우 적용하면 li태그도 스타일이 ul과 같이 적용됩니다.
코드예시↓
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>html문서</title> </head> <body> <link href="StyleSheet.css" rel="stylesheet" type="text/css"> <style> * { background-color:gray; } p { color: lightskyblue !important; font-size: x-large; } p { color: blue; font-size: initial; } ul { color: blueviolet; } /* css에서의 주석입니다. */ .yellow{ color:yellow; } .h4.bgblack{ background-color:black; } #bgorange{ background-color:orange; } </style> <p>CSS</p> <h2>CSS</h2> <h1 style="color:green">CSS</h1> <h3 class="yellow">CSS</h3> <h4 class="bgblack">CSS</h4> <h5 class="bgblack">CSS</h5> <p>--<span class="yellow">노란글자</span>--</p> <h6 id="bgorange">주황색</h6> <ul> <li>css상속</li> </ul> </body> </html> | cs |
1 2 3 | h2{ color:red } | cs |
여기까지 포스팅을 마치도록 하겠습니다.