*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
- 종속선택자 : 대표 선택자로는 인식이 안될때
- 형제선택자
- 자식선택자 : 구분을 세밀하게 해줄때 사용
그 사용법은 다음 시간에 알아볼 것이다.
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [2주][4일][1~2교시] CSS: 레이아웃 만들기, 영역 나누기. (0) | 2013.07.25 |
|---|---|
| [2주][4일][1~2교시] CSS: 가상선택자. 롤오버효과, 하이퍼링크 등 (0) | 2013.07.25 |
| [2주][3일] 웹표준: css선택자의 3가지 종류. {아이디/클래스/태그} 선택자 (0) | 2013.07.24 |
| [2주][2일차]웹표준 (0) | 2013.07.23 |
| [2주][1일차] 웹표준: 프레임셋 만들기 (0) | 2013.07.22 |