[css-study05.html] 머리글 css 및 아이콘

프로그래밍/HTML CSS 2011. 4. 26. 00:18
,
학습목표) 머리글에 쓰이는 스타일과 텍스트 왼쪽의 아이콘 표현 방법을 알아본다.


조금 입체적인 ...) 테두리선을 배경색보다 약간 짙은 색으로 넣어주어 입체적인 효과
배경이미지 사용 ..) repeat-x 를 사용하여 가로로 계속 반복. (repeat-y 지정시 세로로 반복)
아이콘 지정..) no-repeat 사용하여 한번만 출력. 왼쪽에서 0필셀, 위에서 50%의 위치에 아이콘 정렬 
============================================================================================================

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>h1</title>
<style type="text/css">
/* 주황색 바탕에 흰색 글씨
h1 {
font-family:Arial, sans-serif;
font-size: 24px;
color:#fff;
padding:4px;
background-color:#FFa500
}
*/
/* 조금 입체적인 ...
h1 {
font-family:Arial, sans-serif;
font-size: 24px;
color:#666;
padding:4px;
background: #ddd;
border-bottom:2px solid #ccc;
}
*/
/* 배경이미지 사용 ...
h1 {
font-family:Arial, sans-serif;
font-size: 24px;
color:#FFA500;
padding-bottom: 14px;
background:url(arrow.jpg) repeat-x bottom;
}
*/
/*아이콘 지정*/
h1 {
font-family:Arial, sans-serif;
font-size: 24px;
color:#FFA500;
padding-left: 30px;
background:url(arrow.jpg) no-repeat 0 50%;
}
</style>
</head>
<body>
<h1>아주 멋진 페이지 제목</h1>
</body>
</html>
 
저작자표시
posted by lazymong

티스토리툴바