6-7. CSS 기초 μ—°μŠ΅λ¬Έμ œ 1,2,3

2021. 10. 12. 23:41ㆍHTML + CSS + JS

728x90

* μ—°μŠ΅λ¬Έμ œ 1

μ—°μŠ΅λ¬Έμ œ 1

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>μ—°μŠ΅λ¬Έμ œ 1</title>
	<style>	
		#container {
			width:350px;
			margin:30px auto;
		}
		img {
			border: 1px solid #ccc;
			border-radius: 50%;
			box-shadow: 5px 5px 30px 2px #000;
		}
	</style>
</head>
<body>
<div id="container">
	<img src="images/bear.jpg" alt="κ³°μΈν˜• 사진">
</div>
</body>
</html>

 

 

* μ—°μŠ΅λ¬Έμ œ 2

μ—°μŠ΅λ¬Έμ œ 2

 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<title>μ—°μŠ΅λ¬Έμ œ 2</title>
  <style>
	  section{
			width:800px;
			margin: 0 auto;	
		}
		h2{
			font-size:1.5em;
		}
		h3 {
			font-size:1.0em;
		}
		p {
			line-height:20px;
			font-size:12px;
		}
		footer {
			width:100%;
			height:50px;
			background-color:#222;
			clear: left;
		}
		footer > p {
			color:#fff;
			font-size:0.9em;
			text-align: center;
			line-height:50px;
		}
		article {
			float: left;
			width: 350px;
			height: 200px;
			margin: 10px;
			padding: 10px;
			border: 1px solid #ccc;
		}
</style>
</head>
<body>
<section>
  <h2>강아지 μš©ν’ˆ μ€€λΉ„ν•˜κΈ°</h2>
  <article class="at1">  
    <h3>강아지 집 </h3>
    <p>강아지가 편히 쉴 수 μžˆλŠ” ν¬κ·Όν•œ 집이 ν•„μš”ν•©λ‹ˆλ‹€. κ°•μ•„μ§€μ˜ 집은 강아지가 λ‹€ 큰 후에도 계속 μ“Έ 수 μžˆλŠ” μ§‘μœΌλ‘œ κ΅¬μž…ν•˜μ„Έμš”.집을 κ΅¬μž…ν•˜μ‹€ λ•ŒλŠ” λ°•μŒμ§ˆμ΄ 잘 λ˜μ–΄ μžˆλŠ”μ§€, 세탁이 κ°„νŽΈν•œ μ œν’ˆμΈμ§€ κΌ­ ν™•μΈν•˜μ‹œκ³  κ³ λ₯΄μ‹œλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.</p>
  </article>
  <article class="at2"> 
    <h3>강아지 먹이 </h3>
    <p>κ°•μ•„μ§€μ˜ λ¨Ήμ΄λŠ” κΌ­ μ–΄λ¦° κ°•μ•„μ§€μš©μœΌλ‘œ λ‚˜μ™€μžˆλŠ” μ‚¬λ£Œλ₯Ό μ„ νƒν•˜μ„Έμš”. 강아지듀은 μ‚¬λžŒμ— λΉ„ν•΄ μ„±μž₯속도가 8배정도 λΉ λ₯΄λ‹΅λ‹ˆλ‹€. λ”°λΌμ„œ κ°•μ•„μ§€μ—κ²ŒλŠ” μ„±μž₯속도에 λ§žλŠ” μ‚¬λ£Œλ₯Ό κΈ‰μ—¬ν•˜μ…”μ•Ό ν•©λ‹ˆλ‹€. μ‚¬λžŒμ΄ λ¨ΉλŠ” μŒμ‹μ„ 먹게 되면 양념과 ν–₯μ‹ λ£Œμ— μž…λ§›μ΄ μ΅μˆ™ν•΄μ§€κ³ , λΉ„λ§Œμ΄ 될 κ°€λŠ₯성이 맀우 λ†’μ•„μ§‘λ‹ˆλ‹€. κ°•μ•„μ§€μš© μ‚¬λ£ŒλŠ” 생후 12κ°œμ›”κΉŒμ§€ κΈ‰μ—¬ν•˜μ…”μ•Ό ν•©λ‹ˆλ‹€.</p>
  </article>
  <article class="at3"> 
    <h3>λ°₯그릇, 물병 </h3>
    <p>λ°₯그릇은 μ‰½κ²Œ λ„˜μ–΄μ§€μ§€ μ•Šλ„λ‘ λ°”λ‹₯이 넓은 것이 μ’‹μŠ΅λ‹ˆλ‹€.물병은 λŒ€λ‘±μ΄ 달린 κ²ƒμœΌλ‘œ μ„ νƒν•˜μ„Έμš”. λ°₯그릇에 물을 주게 되면 μž… 주변에 털이 λͺ¨λ‘ μ –κΈ° λ•Œλ¬Έμ— λΉ„μœ„μƒμ μ΄λ―€λ‘œ λŒ€λ‘±μ„ ν†΅ν•΄μ„œ 물을 먹을 수 μžˆλŠ” 물병을 λ§ˆλ ¨ν•˜μ‹œλŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.</p>
  </article>
  <article class="at4"> 
    <h3>μ΄λ¦„ν‘œ, λͺ©μ€„</h3> 
    <p>강아지λ₯Ό μžƒμ–΄λ²„λ¦΄ μ—Όλ €κ°€ μžˆμœΌλ‹ˆ μ‚°μ±…ν•  무렡이 되면 μ΄λ¦„ν‘œλ₯Ό κΌ­ λͺ©μ— 걸어주도둝 ν•˜μ„Έμš”. 그리고 방울이 달린 λͺ©κ±Έμ΄λ₯Ό ν•˜κ³ μž ν•˜μ‹€ λ•ŒλŠ” μ‹ μ€‘ν•˜μ…”μ•Ό ν•©λ‹ˆλ‹€. 움직일 λ•Œλ§ˆλ‹€ 방울이 λ”Έλž‘ 거리면 신경이 μ˜ˆλ―Όν•œ κ°•μ•„μ§€λ“€μ—κ²ŒλŠ” 쒋지 μ•Šμ€ 영ν–₯을 끼칠 수 있기 λ•Œλ¬Έμž…λ‹ˆλ‹€.</p>
  </article>
  <footer>
		<p>boxmodel μ—°μŠ΅ν•˜κΈ°</p>
	</footer>
 </section>
</div>
</body>
</html>

 

 

* μ—°μŠ΅λ¬Έμ œ 3

μ—°μŠ΅λ¬Έμ œ 3

<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8">
		<title>μ—°μŠ΅λ¬Έμ œ 3</title>
		<style>
			a:link, a:visited {
				color:black;
				text-decoration: none;
			}
			a:hover {
				background-color:#000;
				color:#fff;
			}
			ul {
				list-style: none;
			}

			li {
				float: left;
			}
			a {
				display: block;
				padding: 10px 20px;
				background-color: #ccc;
			}
		</style>
	</head>
	<body>
		<nav>
			<ul>
				<li><a href="#">메뉴1</a></li>
				<li><a href="#">메뉴2</a></li>
				<li><a href="#">메뉴3</a></li>
				<li><a href="#">메뉴4</a></li>
			</ul>
		</nav>
	</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

728x90

'HTML + CSS + JS' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

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
6-6. μ›Ή μš”μ†Œ μœ„μΉ˜ μ •ν•˜λŠ” 방법- position(static, relative, absolute, fixed)  (0) 2021.10.12
6-5. CSS 3단 λ ˆμ΄μ•„μ›ƒ λ§Œλ“€κΈ°_μ—°μŠ΅λ¬Έμ œ 1,2  (0) 2021.10.12
6-4. CSS λ ˆμ΄μ•„μ›ƒ λ§Œλ“€κΈ°, display, float ⭐⭐  (0) 2021.10.12

κ΄€λ ¨κΈ€

λŒ“κΈ€ 0

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”