웹개발/덕질 사이트 만들기

[덕질하는 웹개발자] 츠카사 사이트 만들기 2일차 | 반응형 웹사이트

KwonYongHyeon 2021. 1. 1. 13:46

 

 

그때 1일차에서 사이트를 만들고(coderyh.tistory.com/9), 폰으로 사이트에 들어가 보았는데, 화면 비율 때문인지 모든 것이 깨져 보였다.

불-편해진 나는 일어나자마자 반응형 사이트를 만들었다.

 

대충 소스 코드 공개

 

index.html

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>由崎 司</title>
	<link rel="shortcut icon" type="image⁄x-icon" href="top.png">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div id='header'>
		<div id='logo'>
			<p class='logo_style'>由崎 司 _ fansite</p>
		</div>
		<div id='music'>
			<center><p class='lang'>[BGM] Yunomi - <span class = 'song'>⽉と星空</span></p></center>
			<br>
			<center>
				<audio autoplay controls>
					<source src="bgmusic.mp3" type="audio/mp3" allow="autoplay" id="audio">
				</audio>
			</center>
		</div>
		<br>
		<div id='lang'>
			<p class='lang'>Language</p>
			<ul>
				<li><a href = 'index.html' style="color: black;">English</a></li>
			</ul>
			<br>
			<p class='lang'>Developers</p>
			<ul>
				<li>Developed by <a href = 'https://www.youtube.com/channel/UCWPAzWIIMC50Afpk5ZRCwUA/featured' target="_blank" style="color: black;">권용현</a></li>
				<li>Designed by <a href = 'https://www.youtube.com/channel/UCWPAzWIIMC50Afpk5ZRCwUA/featured' target="_blank" style="color: black;">권용현</a></li>
				<li>Music by <a href = 'https://www.youtube.com/c/Yunomichannel/featured' target="_blank" style="color: black;">Yunomi</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/kitoakari_1016' target="_blank" style="color: black;">鬼頭 明里</a></li>
				<li>Special Thanks to <a href = 'https://twitter.com/hatakenjiro' target = "-blank" style="color: black;">畑 健二郎</a></li>
				<li>Special Thanks to <a href = 'https://www.youtube.com/channel/UC-3q6G9q5GsOY2VpC5_LoRQ?app=desktop' target="_blank" style="color: black;">amous</a></li>
			</ul>
		</div>
	</div>
	<div id='contents'>
		<div id='image'>
			<center><img id="cim" src="top.png"></img></center>
			<center><img id="mim" src="mobile.jpg"></center>
		</div>
		<div id='in'>
			<p class='in'>Name: 由崎 司(Yuzaki Tsukasa)</p>
			<p class='in'>Spouse: 由崎 星空(Yuzaki Nasa)</p>
			<p class='in'>Age: 16</p>
			<p class='in'>Birthday: April 3rd</p>
			<p class='in'>Country: Japan</p>
			<p class='in'>Height: 154cm / 5.05249ft</p>
			<p class='in'>Weight: 41kg / 90.3895lbs</p>
			<p class='in'>Bloodtype: O</p>
			<p class='in'>Hobby: watching movies / playing games</p>
		</div>
	</div>
	<div id="footer">
		<p class="copyright">Copyright ⓒ 2020. All Rights Reserved.</p>
	</div>
</body>
</html>

 

 

 

style.css

@import url('https://fonts.googleapis.com/css2?family=Kosugi&family=Noto+Sans+JP:wght@300&family=Noto+Serif+JP:wght@600&display=swap');

#header {
	width: 400px;
	height: 1000px;
	float: left;
	background-color: #edacb1;
	margin: 5px;
	border: 3px solid black;
}

#logo {
	width: 90%;
	height: 10%;
	background-color: #edacb1;
	float: left;
	margin: 30px;
}

#music {
	width: 90%;
	height: 20%;
	background-color: #edacb1;
	float: left;
	margin: 5px;
}

#lang {
	width: 90%;
	height: 50%;
	background-color: #edacb1;
	float: left;
	margin: 5px;
}

#contents {
	width: 1070px;
	height: 1000px;
	float: left;
	background-color: #edacb1;
	margin: 5px;
	border: 3px solid black;
}

#image {
	width: 1024px;
	height: 500px;
	float: center;
	margin: 28px;
	background-color: white;
}

#in {
	width: 1020px;
	height: 400px;
	float: center;
	margin: 50px;
	background-color: #edacb1;
}

#footer {
	width: 1487px;
	height: 60px;
	margin: 5px;
	background-color: #edacb1;
	float: left;
	border: 3px solid black;
}

#cim {
	display: block;
}

#mim {
	display: none;
}

.logo_style {
	font-family: 'Noto Serif JP', serif;
	color: black;
	font-size: 30px;
}

.song {
	color: black;
	font-family: 'Kosugi', sans-serif;
	text-align: center;
}

.lang {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
}

.in {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: left;
}

.copyright {
	color: black;
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
}

ul {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
  font-family: 'Noto Sans JP', sans-serif;
}

a { 
	text-decoration:none 
}

img {
	display: inline-block;
	width: 1024px;
	height: 500px;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	#header {
		width: 96%;
		height: 91%;
	}

	#logo {
		width: 80%;
	}

	#lang {
		margin: 7px;
	}

	#cim {
		display: none;
	}

	#mim {
		display: block;
	}

	#image {
		width: 370px;
		height: 537px;
		float: center;
		margin: 5px;
		background-color: white;
	}

	#contents {
		width: 96%;
	}

	#in {
		width: 60%;
	}

	#footer {
		width: 96%;
	}

	.logo_style {
		text-align: center;
	}

	img {
		display: inline-block;
		width: 370px;
		height: 537px;
	}
}

 

대충 display를 이용하여 폰으로 들어갔을 때와 컴으로 들어갔을때 사진을 다르게 하였고(컴으로 들어간 사진 너무 예뻐서 그냥 다 그걸로 하고 싶었는데 비율때문에 어쩔수가 없었다), 반응형은 그냥 무-난하게 만들었다.

 

컴으로 들어갔을 때

 

 

폰으로 들어갔을 때

 

오른쪽 사진이 맨 처음 들어갔을 때, 왼쪽 사진이 밑으로 내렸을 때 사진이다.

 

딱히 훌륭하게 잘하지는 않았지만, 가독성도 괜찮고 무난하게 만든 것 같다.

적어도 이제는 폰으로 들어갔다고 깨져 보이지는 않으니 만족한다.

 

 

저작자표시

'웹개발 > 덕질 사이트 만들기' 카테고리의 다른 글

[덕질하는 웹개발자] 츠카사 사이트 만들기 4일차 | 애니메이션  (0) 2021.01.20
[덕질하는 웹개발자] 츠카사 사이트 만들기 3일차 | 메뉴바, 광고 넣기  (0) 2021.01.16
[덕질하는 웹개발자] 츠카사 사이트 만들기 1일차 | html, css  (0) 2020.12.30

'웹개발/덕질 사이트 만들기'의 다른글

  • 현재글[덕질하는 웹개발자] 츠카사 사이트 만들기 2일차 | 반응형 웹사이트

관련글

댓글

티스토리툴바