티스토리 뷰

HTML

HTML - 자기소개 페이지

안론머스크 2022. 4. 14. 15:56
728x90

자기소개 페이지를 구성하고 있는 HTML 코드이다.

 

<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>Ahn Seoung Ju</title>
	<link rel="stylesheet" href="mypagecss.css">
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Dosis&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300&family=Poor+Story&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
</head>

<body>
	<div class="navbar">
		<p>Ahn Seoung Ju</p>
		<ul>
			<li><a href="#one">About Me</a></li>
			<li><a href="#two">Want To Be</a></li>
			<li><a href="#three">Contact</a></li>
		</ul>
	</div>

	<div class="main_contents" id="one">
		<div class="main_text">
			<p id="main_title">About Me</p>
			<img src="https://i.imgur.com/ku9NgaX.jpg" height="430px" width="430px">
			<div class="main_introduce_container">
				<p class="main_introduce">안녕하세요! 안성주입니다.</p>
				<p class="main_introduce">나이는 27살, 본가는 김해에 있지만 개발 공부를 위하여 현재 서울에 거주 중 입니다.</p>
				<p class="main_introduce">여행가는 것을 좋아하며 시끄러운 장소를 좋아하지 않습니다.</p>
				<p class="main_introduce">항상 초심을 잃지 않는 열정적인 개발자가 되고 싶습니다.</p>
				
			</div>
		</div>
	</div>

	<div class="second_contents" id="two">
		<p>What I Want To Be</p>
		<div class="values" id="values_one">
			<img src="https://images.unsplash.com/photo-1434030216411-0b793f4b4173?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fHJlc3BvbnNpYmlsaXR5fGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" height="350" width="350">
			<div class="second_contents_text">Responsibility</div>
		</div>

		<div class="values" id="values_two">
			<img src="https://images.unsplash.com/photo-1543269865-cbf427effbad?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzh8fGNvb3BlcmF0aW9ufGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" height="350" width="350">
			<div class="second_contents_text">Cooperatino</div>
		</div>

		<div class="values" id="values_three">
			<img src="https://images.unsplash.com/photo-1507034589631-9433cc6bc453?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2hhbGxlbmdlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" height="350" width="350">
			<div class="second_contents_text">Challenge</div>
		</div>
	</div>

	<div class="contact" id="three">
		<p id="contact_title">To Contact with me</p>
		<a href="https://github.com/wkddb1359" target="_blank"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcStJ661_VwO4iG6mzSlGKrrM3SD7L8iPCl7Zg&usqp=CAU" height="50" width="50" class="contact_img"></a>
		<a href="#"><img src="https://cdn.pixabay.com/photo/2021/06/15/12/14/instagram-6338393_960_720.png" height="50" width="50" class="contact_img"></a>
		<a href="#"><img src="https://campaign.naver.com/2021blog/img/ani_logo.png" height="50" width="50" class=contact_img></a>

	</div>
</body>

<footer>
	<div class="bottom">
		<p class="bottom_text">2022.3.24</p>
		<a href="#" class="bottom_text">Go to Top</a>
	</div>
</footer>
</html>
  • 큰 섹션 구역을 div 태그를 통하여 구분하고 제작하였다.

 

728x90
댓글
01-29 23:35
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
글 보관함
250x250