7-4. CSS 배경 이미지 연습문제 1,2,3

7-4. CSS 배경 이미지 연습문제 1,2,3

2021. 10. 14. 00:14ㆍHTML + CSS + JS

728x90

* 연습문제 1

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>연습문제 1</title>
  <style>      
	  h1 {
      margin-top:50px;
		  font-size: 20px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}

		body {
			color: white;
			background : url('/09/images/bg1.jpg') repeat-x left bottom fixed;
			background-color : gray;
		}
  </style>
</head>
 <body>
	<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
	<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>					
 </body>
</html>

* 연습문제 2

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UFT-8">
  <title>연습문제 2</title>
  <style>
		.container {
			width:500px;
			padding:10px;
			border:1px solid #ccc;
		}
		h1 {
			font-size: 17px;
		}
		p {
			font-size: 16px;
			line-height: 25px;
		}

		.container {
			background-color: black;
			color: white;
		}
  </style>
</head>
 <body>
	<div class="container">
		<h1>웹 디자인 트렌드를 따라잡는 비법 대공개!</h1>
		<p>그래픽 프로그램으로 웹 디자인 요소를 일일이 만들어 웹사이트를 제작하는 시대는 지났다. 이제 모바일, 태블릿, PC 등 멀티 디바이스에 한 번에 적용할 수 있는 웹 디자인 방법을 알아야 한다. 바로 <b>코딩을 이용한 웹 디자인</b>이다. </p>		
	</div>
</body>
</html>

* 연습문제 3

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">    
  <title>연습문제 3</title>
  <style>   

	 body {
		background-color: #02233b;
	 }
		#container{
			margin:0 auto;	
			width:600px;
			height:700px;
			border:1px dotted gray;
			padding:20px;
			background-color: white;
			background-image: url('/09/images/mic.png') ;
			background-repeat: no-repeat;
			background-position: right bottom;
	
		}
		img {	
			margin:30px 10px 30px 180px;
		}
		h1 {
			text-align:center;
			padding:20px;
			background-color: #004344;
			color: white;
		}
		h2 {
			text-align:center;
			font-style:italic;
			margin-bottom:50px;
		}
		h3 {
			color:#cf3b00;
		}
		ul{
			margin:20px;
      list-style-type:none;
		}	      
		li {
			line-height:30px;
		}
  </style>
</head>
<body>
  <div id="container">
    <h1>대학언론사 수습기자 모집</h1>
    <h2>신입생 여러분을 기다립니다</h2>
    <article>
      <h3>모집분야</h3>
      <ul>
        <li>아나운서(0명) : 학내 소식을 라디오 방송으로 보도</li>
        <li>오프닝쇼프로듀서(0명) : 라디오 방송 기획, 제작</li>
        <li>엔지니어(0명) : 라디오 방송 녹음 및 편집 </li>
      </ul>
      <h3>혜택</h3>
      <ul>
        <li>수습기자 활동 중 소정의 활동비 지급</li>
        <li>정기자로 진급하면 장학금 지급</li>
      </ul>
    </article>
  </div>
</body>
</html>

728x90

'HTML + CSS + JS' 카테고리의 다른 글

8-2. CSS 속성 선택자 (0)	2021.10.14
8-1. CSS 연결 선택자 (하위 선택자, 자식 선택자, 인접 형제 선택자, 형제 선택자) (0)	2021.10.14
7-3. CSS 그라데이션 효과로 배경 꾸미기 (linear-gradient, radial-gradient) (0)	2021.10.14
7-2. CSS 배경 이미지 지정( background-image, background-repeat, background-position, background-origin, background-attachment 등 ) (0)	2021.10.13
7-1. CSS 배경색과 배경 범위 지정(background-color, background-clip) (0)	2021.10.13

💖💗

💖💗

태그

최근글

댓글

공지사항

아카이브

'HTML + CSS + JS' 카테고리의 다른 글

관련글

티스토리툴바