※ 스타일시트
▶ 사용방법
1. inline 방식 - <div>태그안에 style 바로 넣는 것 : 섞여있어서 별로 좋은코드가 아님
<태그 style = "스타일속석 : 값; 스타일속성 : 값;"?
<div style="color:blue;background-color:yellow">
2. <div>태그와 <style>스타일태그 분리 : 권장
<style type="text/css">
선택자{스타일속성:값} // ★
div{ //태그 선택자
color:red;
background-color: pink;
}
</style>
3. 선택자를 별도의 file로 분리해서 작성 후 링크로 연결 : 권장 (가장 많이 씀)
<head>
<link href="../css/myStyleTest.css" rel="stylesheet" type="text/css">
</head>
하나의 요소에 여러 스타일 규칙이 정의되어 있다면(1,2,3) 가까운 1번 내용이 적용됨 (제일 멀리 떨어진 3번 적용안됨)
▶ 스타일의 특징
▷ 스타일 상속
- 스타일시트에서는 부모 요소에 있는 속성들이 자식 요소로 전달되는데, 이 것을 상속이라고 함
- 부모스타일이 자식에게도 적용됨
- 상속안되는 것 : 배경색, 배경이미지
▷ 우선순위 : 하나의 요소에 여러 스타일 규칙이 정의되어 있다면 가장 나중에 정의된 스타일을 적용함
▷ css블럭
- 스타일 태그 내부에 입력함 ( = 스타일시트 = 스타일 )
ex ) 선택자를 사용해 h1 태그를 선택하고 color 스타일 속성에 red 키워드를 적용하는 예
h1 { color : red; }
※ 선택자
- 선택자를 사용해 특정한 HTML태그를 선택하면 해당 태그에 원하는 스타일 또는 기능을 적용할 수 있다
▶ * : 전체 선택자
- HTML 문서 안에 있는 모든 태그를 선택
<style>
* { color: red; }
</style>
▶ 태그선택자
- 특정한 태그를 선택함
<style> /* h1 태그의 color 속성에 red 키워드를 적용 */
h1 { color: red; }
</style><style>
body, p, h1, h2, h3, h4, h5, h6 { margin:0; padding:0 }
</style>- body 태그, p 태그, h1 태그, h2 태그, h3 태그, h4 태그, h5 태그, h6 태그의 margin 속성 과 padding 속성에 0을 적용
▶ # : ★아이디 선택자
- * id 속성으로 header를 가지고 있는 태그의 스타일을 지정
<body>
<div id="header">
<h1>Header</h1>
</div>
<div id="wrap">
<div id="aside">
<h1>Aside</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
</div>
</body><style>
#header {
width: 800px; margin: 0 auto;
background: red;
}
</style>
▶ .클래스 : ★클래스 선택자
<body>
<ul>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
<li class="select">Lorem ipsum</li>
<li>Lorem ipsum</li>
</ul>
</body>
<body>
<h1 class="item header">Lorem ipsum</h1>
</body> // class 속성은 공백으로 구분해서 여러 클래스를 사용할 수 있음<style>
.select { color: red; }
.item { color: red; }
</style>= > class 속성으로 select를 가지는 태그의 color 속성을 red 키워드로 적용
▶ 속성 선택자
- 특정 속성을 가진 HTML 태그를 선택할 수 있다
▷ 기본 속성 선택자
- 선택자[속성] : 특정한 속성이 있는 태그를 선택함
- 선택자[속성=값]
- type 속성에 따라 서로 다른 스타일이 적용됨
input[type=text] { background: red; }= > input 태그 중에서 type 속성을 text로 갖는 태그의 background 속성에 red 키워드를 적용
input[type=password] { background: blue; }= > input 태그 중에서 type 속성을 password로 갖는 태그의 background 속성에 blue 키워드를 적용
▷ 문자열 속성 선택자
- 태그가 가지고 있는 속성의 특정한 문자열을 확인함
- 선택자[속성~=값] : 특정값을 단어로 포함
- 선택자[속성^=값] : 특정 값으로 시작
- 선택자[속성$=값] : 특정 값으로 끝남
- 선택자[속성*=값] : 특정 값을 포함
img[src$=PNG] { border: 3px solid red; }=> img 태그 중에서 src 속성이 png로 끝나는 태그의 border 속성에 3px solid red를 적용
img[src$=jpg] { border: 3px solid green; }=> img 태그 중에서 src 속성이 jpg로 끝나는 태그의 border 속성에 3px solid green를 적용
img[src$=gif] { border: 3px solid blue; }=> img 태그 중에서 src 속성이 gif로 끝나는 태그의 border 속성에 3px solid blue를 적용
<body>
<body>
<img src="aloe.PNG" width="130" />
<img src="rosemary.jpg" width="130" />
<img src="roseoil.gif" width="130" />
</body>
▶ 후손선택자
- 특정한 태그 아래에 모든후손
- 선택자A 선택자B : 선택자A의 후손에 위치하는 선택자B를 선택함
#header h1 { color: red; } // #header 띄어쓰기 h1=> id 속성으로 header를 가지는 태그의 후손 위치에 있는 h1 태그의 color 속성을 red 키워드로 적용
#header h1, h2 { color: red; } // XX
#header h1, #header h2 { color: red; } //OO=> #header 태그의 후손에 위치하는 h1 태그와 #header 태그의 후손에 위치하는 h2 태그
▶ 자식선택자
- 특정한 태그 바로 아래에 있는 자식을 선택할 때 사용
- 선택자A >선택자B : 선택자A의 자식에 위치하는 선택자B를 선택함
#header > h1 { color: red; }=> id 속성으로 header를 가지는 태그의 자식 위치에 있는 h1 태그의 color 속성을 red로 적용
table > tr > th {
color: red;
} // XXXX table 태그에 tbody 태그가 자동으로 추가되기때문에 스타일 속성이 적용되지 않음
table>tbody>tr>th{
color: red;
} OOO=> table 태그 아래의 (tbody태그 아래의) tr 태그 아래의 th 태그의 color 속성에 red 키워드를 적용
▶ 동위선택자
▶ 반응선택자
▶ 상태선택자
= HTML2강 CSS pdf 확인
▶ 구조선택자
▷ 일반 구조 선택자
- 특정한 위치에 있는 태그를 선택하는 선택자
- :first-child 첫 번째에 위치하는 자식을 선택함
- :last-child 마지막에 위치하는 자식을 선택함
- :nth-child(수열) 앞에서 수열 번째에 있는 자식을 선택함
<style>
li {
list-style: none;
padding: 15px;
}
li:first-child { border:1px solid red; }
li:last-child { border:5px solid blue;}
li:nth-child(2n) { background-color: pink; }
li:nth-child(2n+1) { background-color:#66CCFF; }
</style>
▷ 형태 구조 선택자
- 일반 구조 선택자와 비슷하지만 태그 형태를 구분함
- :first-of-type : 형제 관계 중에서 첫 번째로 등장하는 특정 태그 를 선택
- :last-of-type : 형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택
- :nth-of-type(수열) : 형제 관계 중에서 앞에서 수열 번째로 등장하는 특정 태그를 선택
h1:first-of-type { color: red; }
h2:first-of-type { color: red; }
h3:first-of-type { color: red; }
19,20 p 매우중요
반응전까지만 필기
근데이제 구조선택자는 알아야함
'HTML' 카테고리의 다른 글
| [Thymeleaf] 프로젝트에 사용한 타임리프 문법 정리 (0) | 2022.08.19 |
|---|---|
| [HTML] CSS 스타일속성 2 (0) | 2022.04.20 |
| [HTML] CSS 스타일속성 1 (0) | 2022.04.20 |
| [HTML] 태그 (0) | 2022.04.19 |