728x90
반응형
 |
 |
 |
 |
 |
첫번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99F06333599D19D41D
두번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/992B1133599D19D423
세번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99527D33599D19D42E
네번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/99EA2533599D19D404
다섯번째 사진 링크: https://t1.daumcdn.net/cfile/tistory/9986B633599D19D406
사진 파일 5개는 링크를 클릭하여 [이미지를 다른 이름으로 저장]하세요.
첫번째 사진명: 1.jpg
두번째 사진명: 2.jgp
세번째 사진명: 3.jgp
네번쨰 사진명: bg.jpg
다섯번째 사진명: room.jpg
CSS 강의에 앞서 파일 5개를 다운받아주세요.
그 후 WebContent아래 css, html, img 폴더 생성 후
파일은 img폴더에 html > html폴더에 css > css폴더에 생성하여 코딩해주세요.
01_width.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>테두리</title>
<link href="../css/01_width.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>아메리카노</h3>
<p>에스프레소의 향은 그대로 느끼면서 뜨거운 물을 부어 1:2 정도의 비율로 연하게 먹는 커피다.</p>
<p class="size1">에스프레소의 향은 그대로 느끼면서 뜨거운 물을 부어 1:2 정도의 비율로 연하게 먹는
커피다.</p>
<p class="size2">에스프레소의 향은 그대로 느끼면서 뜨거운 물을 부어 1:2 정도의 비율로 연하게 먹는
커피다.</p>
</body>
</html>
01_width.css
@CHARSET "UTF-8";
P{
padding: 10px;
margin: 15px 5px;
border: 2px dotted blue;/*점선*/
}
p.size1{
width:400px;
height: 50px;
}
p.size2{
width:50%;
height:50px;
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch04-03. border (0) | 2017.08.23 |
|---|---|
| [CSS] ch04-02. margin (0) | 2017.08.23 |
| [CSS] ch03-10. grad (0) | 2017.08.23 |
| [CSS] ch03-09. bgorigin (0) | 2017.08.23 |
| [CSS] ch03-08. bgsize (0) | 2017.08.23 |