728x90
반응형
 |
 |
 |
첫번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/998F6C33599CDFCE33
두번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9939DC33599CDFCE24
세번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99710833599CDFCE0B
네번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99074433599CDFCE22
사진 파일 4개는 링크를 클릭하여 [이미지를 다른 이름으로 저장]하세요.
첫번째 사진명: beach.png
두번째 사진명: bg.png
세번째 사진명: bg2.png
네번쨰 사진명: station.jpg
CSS 강의에 앞서 파일 4개를 다운받아주세요.
그 후 WebContent아래 css, html, img 폴더 생성 후
파일은 img폴더에 html > html폴더에 css > css폴더에 생성하여 코딩해주세요.
01_rgba.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>투명도와 함께 색상 표현하기</title>
<style>
@import "../css/01_rgba.css";
</style>
</head>
<body>
<h1>색상 표현하기</h1>
<h3>rgb와rgba</h3>
<div class="box1">
<p>rgb(0,0,255);</p>
</div>
<div class="box2">
<p>rgba(0,0,255,0.5)</p>
</div>
</body>
</html>
01_rgba.css
@CHARSET "UTF-8";
div{
width: 300px;
height: 50px;
}
p{
font-weight: bold;
color:white;
}
.box1{
background: rgb(0,0,255,0.5);
}
.box2{
background: rgba(0,0,255,0.5);
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch03-03. bgcolor (0) | 2017.08.23 |
|---|---|
| [CSS] ch03-02. opacity (0) | 2017.08.23 |
| [CSS] ch02-09. list 2 (0) | 2017.08.23 |
| [CSS] ch02-08. list (0) | 2017.08.23 |
| [CSS] ch02-07. spacing (0) | 2017.08.23 |