1. 인라인 스타일 - inline css
style="____"
속성명:속성값;속성명:속성값;
ex) <h1 style="background-color:blue;">
2. 내부 스타일 - <style> tag
.classname{
속성명:속성값;
속성명:속성값;
}
ex) <style>
div {
background-color: blueviolet;
width: 100px;
height: 100px;
}
</style>
3 외부 스타일 클래스 선택자 예시
3.1)
[css 파일]
.title {
color: green;
}
[html 파일]
<h1 class="title> // class로 사용
3-2)
[css 파일]
#header {
color: blue;
}
[html 파일]
<h1 id="header"> // id로 사용
3-3)
[css 파일]
h3{
color:slateblue;
} // 모든 h3에 적용
내부 태그 사용 예)
h1:hover{
border: 1px solid magenta;
font-size: 72px;
}
폼태그 사용 예)
input[type="text"] {
border: 1px solid blue;
}
input[type="password"] {
border: 1px solid red;
}
정렬 예)
<table style="font-size: 10px;" border="1" >
<thead>
<tr>
<th>번호1</th>
<th>번호2</th>
<th>번호3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; vertical-align: top;">1</td>
<td style="text-align: center; vertical-align: middle;">2</td>
<td style="text-align: right; vertical-align: bottom;">3</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: top;">4</td>
<td style="text-align: center; vertical-align: middle;">5</td>
<td style="text-align: right; vertical-align: bottom;">6</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: top;">7</td>
<td style="text-align: center; vertical-align: middle;">8</td>
<td style="text-align: right; vertical-align: bottom;">9</td>
</tr>
</tbody>
</table>
배경 이미지 예)
<style>
section{
width:200px; height:200px;
border:1px solid #000;
background-image: url("../img/pattern.png");
background-repeat: repeat-x;
}
</style>
| 분류 | 태그 | 특징 |
| 블록 태그 | h1~h6,p,ol,ul,dt,div,header,footer,section,article,aside,nav | 1.줄을 자동으로 바꿈. 2.너비와 높이 지정 가능 3.너비 지정 안할 시 부모 요소 너비값 상속 4.블록 요소, 인라인 요소 묶을 수 있음 |
| 인라인 태그 | strong, em, a, span | 1.자동 줄바꿈 되지 않음. 옆으로 나열 2. 너비와 높이 지정 불가 3. 인라인 태그를 사용한 텍스트 크기가 해당 요소 크기가 됌 4. 인라인 요소만 묶을 수 있음 |
웹 이미지 고정 예)
@charset "utf-8";
section {
width: 90vw;
height: 90vh;
margin: 4vh auto;
border: 1px solid #000;
}
section article {
width: 100%;
height: 50%;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
section article:nth-of-type(1) {
background-image: url("../img/car1.jpg");
}
section article:nth-of-type(2) {
background-image: url("../img/car2.jpg");
}
//backgrond-attachment:fixed; 추가시 이미지가 고정되어 합쳐진것처럼 보이게 됌