[HTML] css background

51090 단어 CSShtmlCSS

background-color : 배경 색상
background-image : 배경 그림
background-repeat : 배경 반복
background-position : 배경 위치
background-attachment : 고정 / 스크롤

  • Ex_ background-repeat
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	body{font:12px "굴림", Gulim;}
	h1{background:url("images/bg_bul.gif") no-repeat 0 50%;
	   padding-left:20px;}
	p{width:400px; padding:25px;
	  background:#fef url("images/bg_line.gif") repeat-x bottom;}
  </style>
 </head>
 <body>
  <h1>아침 식사와 저녁 식사</h1>
  <p>하루일과를 잘 시작하여 성공적인 업무를 마치려면 아침 식사는 거르지 않는 것이 좋을 것 이다.
	 낮에 취침하고 밤에 일하는 생활 유형을 가진 사람이라면 그 사람은 저녁 시사를 거르지 않도록
	 하는 것이 더욱 중요할 것 같다.
  </p>

  <h1>간식과 야참</h1>
  <p>가공식품으로 구성된 간식이면 먹지 않는 것보다 더 좋지 않다. 몸 안의 좋은 성분과 나쁜 성분의
     구분할 수 없게 된다. 건강을 생각하여 과일 등의 자연식품으로 차린 야참은 과식만 하지 않는다면
	 먹어도 좋다.
  </p>
  <h1>보양식과 약</h1>
  <p>보양식은 일반식사나 간식을 면밀히 검토해야 할 경우가 덜하지만 약을 복용중이라면  평소 식사나 간식에 주의해야 한다.	   음식도 궁합이 있는데 약의 작용은 더욱 심하기 때문이다.
  </p>
 </body>
</html>
  • Ex_ pading
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	body{font:12px "굴림", Gulim; background:url("images/bg_grid.gif");}
	p{background:pink;}
	.snd{width:300px; height:50px; padding:7px;}
  </style>
 </head>
 <body>
  <p>언어란 무엇인가? 음성으로 의사를 표현하여 의지를 관철시키려는 의도가 있는 것.</p>
  <p class = "snd">의지를 관철시키려는 의도가 있건 없건 음성으로 의사를 표현하기만 하면 그것이 언어일까?
  </p>
 </body>
</html>
  • Ex_ pading2
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	body{font:12px "굴림", Gulim; background:url("images/bg_grid.gif");}
	.captain{width:500px; text-align:justify; background:#ccf;
			 padding:15px 0;}
  </style>
 </head>
 <body>
  <p>철수가 영희에게 퍼블리셔란 무슨 일을 하는 직업이니? 하고 물었습니다.</p>
  <p class="captain">그러자 영희는 철수에게 응~ 그건 다 함께 잘 살기 위해 인터넷 선장이 되는 일이야 라고 말했습니다.</p>
 </body>
</html>
  • Ex_ margin
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	body{font:12px "굴림", Gulim;
		 background:url("images/bg_grid.gif");}
	p{width:500px; background:#abc; padding:10px; margin:20px 0;}
	#center{width:200px; margin:0 auto;}
  </style>
 </head>
 <body>
  <p>오늘은 비가 옵니다.</p>
  <p>오늘은 눈이 옵니다.</p>
  <p id="center">오늘은 해가 납니다.</p>
  <p class="cloud">오늘은 흐립니다.</p>
 </body>
</html>
  • Ex_ margin2
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
	fieldset{width:600px; margin:0 auto;}
  </style>
 </head>
 <body>
  <fieldset>
	<legend>회원등록</legend>
	<table width="600px"; border=1; align="center";>
		<col width="20%"; />
		<col width="80%"; />
		<tr>
			<td>1</td><td>2</td>
		</tr>
		<tr>
			<td>3</td><td>4</td>
		</tr>
		<tr>
			<td colspan=2>5</td>
		</tr>
	</table>
  </fieldset>
 </body>
</html>
  • Ex_ border
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>border</title>
  <style type="text/css">
	body{font:12px "굴림", Gulim;
		 background:url("images/bg_grid.gif");}
	.p1{width:500px; padding:10px 20px;
		border-top:4px solid brown;
		border-bottom:4px dashed brown;}
	.p2{width:500px; padding:10px 20px;
		border-top:4px double brown;
		border-bottom:4px dotted brown;}
	.p3{width:500px; border:5px dotted #123456;}
	.p4{width:500px; border:5px dashed #abcdef;}
	.p5{width:500px; border:5px groove #abcdef;}
	.p6{width:500px; border:5px ridge #abcdef;}
	.p7{width:500px; border:5px inset #abcdef;}
	.p8{width:500px; border:5px outset #abcdef;}
	.p9{width:500px; border:5px none #abcdef;}
  </style>
 </head>
 <body>
  <p class="p1">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p2">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p3">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p4">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p5">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p6">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p7">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p8">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
  <p class="p9">나는 css가 너무 재미있고 이쁘게 만들고 싶어요.</p>
 </body>
</html>

solid : 실선
dashed : 긴 점선
dotted : 점선
double : 이중선
none : 없음
groove.ridge.inset.outset : 액자

  • Ex_ test
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  	*{margin:0; padding:0;}
	body{font:12px "굴림", Gulim;}
	ul li{list-style:none;}
	.box{width:550px; border:3px #123456 double;}
	#subject{background:#abcedf;
			 color:#123456;
			 text-align:center;
			 font-size:18px;
			 letter-spacing:15px;
			 padding:15px;
			 border-bottom:5px #123456 solid;
			 }
	li{padding:10px;}
	li.line{border-bottom:1px #123456 dotted;}
  </style>
 </head>
 <body>
	<ul class="box">
		<li id="subject">속담풀이</li>
		<li class="line">
			<h2>말 한마디에 천냥 빚진다.</h2>
			<p>생각해보지 않고 나오는 대로 말하다가 실수하면 상대의 마음에 아픔을 남기게 된다.</p>
		</li>
		<li>
			<h2>웃는 얼굴에 침 못 뱉는다.</h2>
			<p>호의적인 의사소통 방법은 자기 말만 하는 것보다 좋은 결과로 이어진다.</p>
		</li>
	</ul>
 </body>
</html>
OpenAM의 대시보드에 AWS 관리 콘솔을 표시하는 방법
JUnit5 단위 테스트, 테스트 이벤트가 수신되지 않았습니다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage