★ 용어 정리
헤드
input[type=text]{} type="text" 인 텍스트상자에 속성 적용 [속성선택자]
input:checked{} input에 체크된 상태로 적용
border: 50px solid #00f; 테두리 표시, 선 모양과 색깔 함께 적용
background-repeat: no-repeat; 이미지 하나만 들어감
background-repeat: repeat-x; 이미지 x축으로 다 들어감
background-repeat: repeat-y; 이미지 y축으로 다 들어감
background-attachment:scroll; 배경이미지가 스크롤 따라 움직임
background-attachment:fixed; 배경이미지 고정
background-position:bottom; fixed랑 같이 쓸 때, 이미지가 밑으로 확대됨
background-size: 500px 400px; 배경 사이즈를 조정해줌
☆ 실습(1) : !important 활용하기
헤더
<link href="print.css" type="text/css" rel="stylesheet">
(1) print.html
header{
background: #f00;
border: 5px solid #00f;
width: 300px;
height: 400px;
}
(2) print.css
header{
background: #fff !important;
border: 5px solid #0ff !important;
width: 300px !important;
height: 400px !important;
}
결과
(1)번보다 (2)번의 내용이 더 멀기 때문에 (1)번 스타일이 우선적용된다.
그런데 (2)번 파일에서 !important를 적용해주면 (2)번 스타일이 최우선으로 적용된다.
그런데 만약 여기서 media="print"를 적용하면,
익스플로러에서는 (1)번 스타일이 우선적용되지만 프린트할 때는 (2)번 스타일이 출력된다.
<link href="print.css" type="text/css" rel="stylesheet" media="print">
☆ 실습(2) : 우선순위 확인하기
헤드
<style type="text/css">
#aa{
background-color: #f00;
}
.bb{
background-color: #ff0;
}
</style>
바디
<body id="aa" class="bb">
<p>
평가는 간단한 단답식문제 20문제정도 오픈북과 인터넷 검색으로 답 적으시면 됨
실습은 주어진 파일과 완성본 jpeg시안을 가지고 html코드와 css제작
</p>
</body>
결과
빨간 배경이 적용되는 것으로 보아, id선택자가 class선택자보다 우선순위가 높은 것을 알 수 있다.
실습(3) : 이미지 고정시키기
body{
font-family: "맑은 고딕";
background-image: url("images2/back_image2.jpg");
background-size: 50px;
background-attachment:fixed;
background-position:bottom;
}
이렇게 같이 설정해주면, 창이 커질 때마다 이미지가 확대된다.
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [5주차][1일][1~2th] HTML/CSS: 드래그할 때 배경과 색깔을 바꾸고 싶다면? (0) | 2013.08.12 |
|---|---|
| [4주][5일][5~8th] Mysql: Mysql 설치. SQL문 실습 (0) | 2013.08.09 |
| [4주][4일][1~2th] HTML/CSS: (0) | 2013.08.08 |
| [4주][3일][1~2th] HTML/CSS: CSS용어정리 및 실습 (0) | 2013.08.07 |
| [4주][2일][1~2th] HTML/CSS: 외장CSS, 속성선택자 (0) | 2013.08.06 |