[2주][3일] 웹표준: market.html에 css 스타일 적용하기
*market.html을 css스타일로 적용해보기
--> style은 <head>안에 적용되는 것임!
전체소스
(1) table 스타일 적용
<style type="text/css">
table{
padding:5px;
font-family:"맑은 고딕";
font-size:12px;
color:#444;
}
</style>
결과
(2) h3에 스타일 적용
<style type="text/css">
h3{
font-size:15px;
color:#f00;
table{
padding:5px;
font-family:"맑은 고딕";
font-size:12px;
color:#444;
}
</style>
결과
(3) img에 스타일 적용
<style type="text/css">
img{
margin-right:30px; <!오른쪽 여백만>
margin-bottom:15px; <!아래쪽 여백>
h3{
font-size:15px;
color:#f00;
table{
padding:5px;
font-family:"맑은 고딕";
font-size:12px;
color:#444;
}
</style>
결과
*layout.html 만들기
전체 소스
선택자는 앞서 언급한 3가지 말고도 다양한 종류의 선택자가 있다.
그 종류는 다음과 같다.
- 가상선택자(수도선택자) : 롤오버, 첫글자,
첫번째 오브젝트, nth째 object
- 종속선택자 : 대표 선택자로는 인식이 안될때
- 형제선택자
- 자식선택자 : 구분을 세밀하게 해줄때 사용
그 사용법은 다음 시간에 알아볼 것이다.