인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)

[HTML/CSS][모각코][04] HTML, CSS 개념 복습하기!

뉼👩🏻‍💻 2022. 2. 9. 02:02
728x90
반응형
SMALL

- br 오류

-margin, padding , position 

form태그 사용하기

<p> 이해 

[제출본]

https://codemate.kr/@yuuulya/day04-HTML-CSS-개념-복습하기

 

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Html/CSS study with codemate</title>
	<link rel="stylesheet" href="./style_03.css" />
</head>

<body>
<h1>&nbsp;내가 가장 좋아하는 동물은? 🧐 </h1>
<h2>&nbsp;동물....좋아하시나요? 어떤 동물을 가장 좋아하는지 궁금해요! </h2>
<div class = "title" >
<div class ="tithome"><a href="https://www.naver.com">홈</a></div>
<div class ="titcomu"><a href="https://cafe.naver.com/codeuniv/">코뮤니티</a></div>
<div class ="titmate"><a href="https://codemate.kr/explore/projects">코드메이트</a></div>
</div>
<hr class="hr1"/>
<br>

<div>
	<img src="https://media.istockphoto.com/vectors/vector-flat-style-big-set-of-animals-isolated-vector-id1204507203" alt ="animals">
	<br>
	<h3> 그런데 동물은 정확하게 어떤 생물을 말하는 걸까요?</h3>
	<h4> 📍 동물이란? </h4>
		<p class="whatanimal">동물은 세균과 같은 원핵생물, 단세포의 원생생물, 버섯 등의 균계, 그리고 식물을 제외한 생물들을 말해요.<br>
		더 자세한 정의는 <a href="http://encykorea.aks.ac.kr/Contents/Index?contents_id=E0016473">여기</a>를 눌러 확인해보세요!</p>
</div>

<div>
	<h4> 📍 동물의 종류 </h4>
	<p class="whatanimal">동물 중 척추동물은 크게 다음과 같이 나뉘어요</p>
	<ul class = "kinds">
		<li>포유류 : 태반을 가지고 있어서 새끼가 태어날 때까지 영양분을 공급해 주며 새끼가 태어나면 젖을 먹여서 키운다</li><br>
		<li>파충류 : 비늘로 덮여 있으며 환경의 온도에 민감하여 따뜻한 지역에 집중해서 산다. </li>
		<br>
		<li>양서류 : 폐와 피부로 호흡을 할 수 있으며 생활주기는 다양하지만 번식은 반드시 물에서 한다.</li>
		<br>
		<li>어류 : 아가미로 물에서 호흡을 하고 알을 통해 체외수정을 하는 특징을 가진다.</li>
		<br>
		<li>조류 : 털로 덮인 외피를 가지고 있으며 깃털은 비행과 구애 동작, 단연 효과 등을 한다. </li>
	</ul>
</div>
<br>

<div>
	<h3>세상엔 정말 다양한 생물들이 있어요.</h3>
	<h2><span class ="animalput">오늘은 동물의 종류 중 가장 좋아하는 포유류 동물을 알려주세요! </span></h2>
	<input type="text" name="animalname" size 100 maxlengh=15 value="동물 종류를 입력해주세요.">
	<input type="button" value="입력">
	<br><br><br>
</div>
</body>
</html>

 

.hr1{
	border:0;
	height : 3px;
	background:#ccc;
}
h4{
	font-size:24px;
	color:#A43B3F;
	background-color:#f2ebfa;
}
img{
	width: 10%;
	height: 10%;
}
.title{
	background-color:#f7f7f7;
}
.tithome{
	display: inline-block;
	font-size:120%;
	padding: 15px;
	margin: 2px;
}
.titcomu{
	display: inline-block;
	font-size:120%;
	padding: 15px;
}.titmate{
	display: inline-block;
	font-size:120%;
	margin: 15px;
}
.animalput{
	background-color:#fad9dc;
}
.whatanimal {
	font-size:140%;
}
.kinds {
	font-size:120%;
}

 

728x90
반응형