옥수수와 식빵 그리고 코딩

자기소개 홈페이지 만들기 - 템플릿 없이 본문

HTML/TCP - HTML

자기소개 홈페이지 만들기 - 템플릿 없이

옥식 2021. 11. 12. 13:15

이런 형태로 만드는게 목표!

 

메뉴나 바 같은것도 넣고 싶었는데 채울 내용이 마땅히 없어서 간단하게 그렸다.

 

두시간의 결과물....

설명란을 <pre>태그를 썼더니 저런 회색 박스가 생겼다. 왜그런지 참 알 수 없어서 <div>태그로 변경함.

 

sns링크 버튼 만드는걸로 또 끙끙 앓았다.

구굴링과 전에 만들었던 템플릿을 뜯어보고 이것 저것 조합 한 결과 버튼이란걸 만들었음!!!

 

대충 어찌어찌 목표했던 그림에 비슷하게는 왔음!

여기서 이걸 가운데로 옮겨야 하는게 굉장한 난관이였다.

 

사진은 없지만 display:flex 를 넣어서 어찌어찌 가운데로 옮겼더니 버튼들이 죄다 세로정렬 되는 바람에 아주...아주...아주대...

 

사실 이걸 세로로두 가운데에 넣고 싶었지만 현실과 타협했다.

지금 생각 해 보니 위에 박스를 하나 넣으면 될 것 같음

어찌어찌 완성!

 

<!DOCTYPE html>
<html lang="ko">

<head>
	<meta charset="UTF-8">
	<title>title</title>
    <link rel="stylesheet" href="css/bootstrap.css">
	<style>
		body{background-color: #b2f3f3ef;}
		.box{
			width: 200px;
			height: 200px;
			border-radius: 70%;
			border: 2px solid;
			overflow: hidden;
		
		}
		.profile{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		.explan{
			width: 300px;
			
			
		}
		.icon{
			height: 3.5rem;
			width: 3.5rem;
			display: inline-flex;
  			align-items: center;
  			justify-content: center;
			background-color: hsl(59, 74%, 70%);
			font-size: 1.5rem;
 			margin-right: 1.5rem;
			border-radius: 30%;
			border: 2px solid;
			margin: 20px 10px;
		}
		#flex{
			
			width: 500px;
		
			display: flex;
			flex-direction: column;
			margin: auto;
			align-items: center;
		}
		.item-center{align-self: space-around}
		
	</style>
</head>

<body>

	<div id="flex">
		<h1>ABOUT 다람</h1>

		<div class="box position">
			<img src="data:image/png; ...중략" alt="다람다람">
		</div>
		<div class="item-center">
			<a class="icon" href="https://ko-kr.facebook.com/jessoochipmunk/" target="_blank">fa</a>
			<a class="icon" href="http://daramdaram.com/#1" target="_blank">ddc</a>
			<a class="icon" href="https://twitter.com/jessoochipmunk" target="_blank">Tw</a>
			<a class="icon" href="https://smartstore.naver.com/betalayer/" target="_blank">st</a>
		</div>
		<div class="explan position">
		대충...설명하는...글...뭐라뭐라...<br>
		엄...다람이...귀여워...아메리카노는...맛없어<br>
		가나다라마바사...<br>
		뽀로로를 불러 봐요 뽀로로롱뽀로로롱뽀로뽀로뽀로뽀로뽀로뽀로뽀로뽀로뽀뽀로로</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>	
</body>

</html>
저작자표시

'HTML > TCP - HTML' 카테고리의 다른 글

자기소개 홈페이지 만들기  (0) 2021.10.25
Q.<p>와 <span>의 차이  (0) 2021.10.22
1. HTML 시작 ~ 3. 기본요소  (0) 2021.10.21
'HTML/TCP - HTML' Related Articles more
Comments