TIL_07_html 과 css 007

JIEUN·2021년 1월 13일
1
post-thumbnail


Jieun's site

첫 번째로 주어진 개인과제.
이렇게 하고 이렇게 하면 되겠지? 하고 코드를 짠 뒤의 결과는 내 생각만큼 따라주질 않았다. 이미지를 배열하는 것이 이렇게 힘든 것일 줄이야.
가운데에 정렬하여 3개의 이미지를 배열하고 적당한 칸을 띄우는 것. 이걸 코딩의 언어로 다시 설명하기란 쉬운게 아니었다. 차라리 포토샵으로 이미지 만들어서 그냥 첨부할까도 심히 고민했다. (이미지 배열만으로도 너무 에너지를 쏟아서 이번 과제는 심플하게 마무리 하기로..)
내가 구현한 것.
1. Navigation bar를 스크롤 시에도 고정하여 같이 내려오기.
2. Navigation bar 메뉴 클릭 시 hover 효과를 통해 색깔 바뀌기 와 관련된 링크로 전환되기.
3. 9개의 이미지를 가운데에 정렬하여 3개씩 나열하기.

<!DOCTYPE html>
<html>
<head>
	<title>Jieun's site</title>
    <link href="https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Damion&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header class="container">
		<div class="row">
			<h1 class="col-sm-4">Jieun Yang</h1>
			<nav class="col-sm-8 text right">
			<p><a class="pagelink" href="https://velog.io/@poohv7">Velog</a></p>
			<p><a class="pagelink" href="https://www.instagram.com/yang_ji_eun/">Instagram</a></p>
		</nav>
	</div>
</header>

<main>
<br><br><br><br><br><br><br>
<div class="dot-wrapper">
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/be1b1e79-b823-4aae-9cfb-096281eda8e4/1.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/56bb327c-82cf-4cf7-bf09-5aec12fa6543/2.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/7b383dd3-39d4-40b3-8cbe-c6f5578a586c/3.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/e7db9e6a-70b7-4386-aa78-419afbe6c31a/4.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/9cc4f642-c810-4471-87b1-ba624c2a0b2b/5.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/e280def2-b242-4155-a1d9-d08910df335b/6.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/97a1dbe7-fc5d-483a-a7c8-5c1e9f7ba5ad/7.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/7cbf7289-6eac-4280-8546-64744909be31/8.jpg"></div>
	<div class="dot"><img src="https://media.vlpt.us/images/poohv7/post/8566f91c-2d9f-4d0d-8801-328966827e61/9.jpg"></div>
</main>

	<footer>
		<div class="caption">
      <p>Contact me! poohv7@gmail.com </p>
  </div>
    </footer>
</body>
</html>
body {
	font-family: 'Roboto', sans-serif;
    font-weight: 300;
    color: black;
}
header {
  font-family: 'Oleo Script', cursive;
  font-size: 35px;
  line-height: 0.8;
  background-color: white;
  color: OrangeRed;
  position: fixed;
  top: 0;
  width: 100%;
  height: 120px;
  padding: 10px 0;
  font-weight: 900;
}

header .row
footer .row {
  display: flex;
  align-items: center;
}

header h1 {
  font-weight: 900;
  margin: 10px 10px;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  padding: 0 20px;
  margin: 0;
}

a:hover {
  background-color: #98FB98;
  
}

.dot-wrapper {
	padding: 30px 0;
	width: 1267px;
	height: 1400px;
	margin: 0 auto;
	
}
.dot img {
	width: 400px;
	height: 400px;
	text-align: center;
	float: left;
	margin: 10px 10px;
	border: 1px solid black;
}

.caption {
  display: relative;
  font-family: 'Damion', cursive;
  font-size: 30px;
  color: black;
  text-align: center;
}

-참고사이트 링크텍스트


Second

이전 웹사이트는 사이트를 축소할 경우, 이미지의 배열이 달라진다는 피드백을 받고 flex 태그를 사용하여, 확대와 축소에도 이미지의 변형이 없도록 수정하였다. 그리고 이미지의 내용을 덧붙이고자 figcaption 태그를 통하여 간단히 캡션을 붙였고, figure 태그를 지정해주어, 캡션의 폰트와 크기를 수정할 수 있었다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Jieun's site</title>
    <link href="https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Damion&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header class="banner">
		<div class="row">
			<h1 class="col-sm-4">Jieun Yang</h1>
			<nav class="col-sm-8 text right">
			<p><a class="pagelink" href="https://velog.io/@poohv7">Velog</a></p>
			<p><a class="pagelink" href="https://www.instagram.com/yang_ji_eun/">Instagram</a></p>
		</nav>
	</div>
</header>

<main>
	<br><br><br><br><br><br><br><br><br><br>
<div class="container">
	<div class="item item1"><img src="https://media.vlpt.us/images/poohv7/post/be1b1e79-b823-4aae-9cfb-096281eda8e4/1.jpg" alt='missing' /><figure><figcaption>#A quokka selfie in Rottnest Island</figcaption></figure></div>
	<div class="item item2"><img src="https://media.vlpt.us/images/poohv7/post/56bb327c-82cf-4cf7-bf09-5aec12fa6543/2.jpg" alt='missing' /><figure><figcaption>#The summer beach in Tasmania</figcaption></figure></div>
	<div class="item item3"><img src="https://media.vlpt.us/images/poohv7/post/7b383dd3-39d4-40b3-8cbe-c6f5578a586c/3.jpg" alt='missing' /><figure><figcaption>#The beautiful sunset</figcaption></figure></div>
	<div class="item item4"><img src="https://media.vlpt.us/images/poohv7/post/e7db9e6a-70b7-4386-aa78-419afbe6c31a/4.jpg" alt='missing' /><figure><figcaption>#Unforgettable Cradle Mountain in Tasmania</figcaption></figure></div>
	<div class="item item5"><img src="https://media.vlpt.us/images/poohv7/post/9cc4f642-c810-4471-87b1-ba624c2a0b2b/5.jpg" alt='missing' /><figure><figcaption>#'Stranger Things' One of my favorite show</figcaption></figure></div>
	<div class="item item6"><img src="https://media.vlpt.us/images/poohv7/post/e280def2-b242-4155-a1d9-d08910df335b/6.jpg" alt='missing' /><figure><figcaption>#One night Two days Hiking & Camping trip</figcaption></figure></div>
	<div class="item item7"><img src="https://media.vlpt.us/images/poohv7/post/97a1dbe7-fc5d-483a-a7c8-5c1e9f7ba5ad/7.jpg" alt='missing' /><figure><figcaption>#'Wombat' My favorite Australian animal</figcaption></figure></div>
	<div class="item item8"><img src="https://media.vlpt.us/images/poohv7/post/7cbf7289-6eac-4280-8546-64744909be31/8.jpg" alt='missing' /><figure><figcaption>#With my pet</figcaption></figure></div>
	<div class="item item9"><img src="https://media.vlpt.us/images/poohv7/post/8566f91c-2d9f-4d0d-8801-328966827e61/9.jpg" alt='missing' /><figure><figcaption>#'Pink sweat$' My favorite singer these days</figcaption></figure></div>
</div>
</main>

	<footer>
		<center>
		<div class="caption">
      <p>Contact me! poohv7@gmail.com </p>
  </div>
    </footer>
</body>
</html>
body {
	font-family: 'Roboto', sans-serif;
  font-weight: 300;
  color: black;
  margin: 0;
  background-color: #f5f5f5;
}

header {
  font-family: 'Oleo Script', cursive;
  font-size: 30px;
  line-height: 0.8;
  background-color: #ffffff;
  color: OrangeRed;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100px;
  padding: 10px 0;
  font-weight: 900;
}

header .row
footer .row {
  display: flex;
  align-items: center;
}

header h1 {
  font-weight: 900;
  margin: 10px 10px;
}

header nav {
  display: flex;
  justify-content: flex-end;
}

header p {
  padding: 0 20px;
  margin: 0;
}

a:hover {
  background-color: #98FB98;
  
}

.container {
  display: flex;
  width: 1050px;
  height: 1350px;
  margin: 0 auto;
  flex-flow: row wrap;
  justify-content: space-between;
}

.item img {
	width: 300px;
	height: 300px;
	border: 2px solid OrangeRed;
  text-align: center;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  margin: 0 auto;
}

figure {
  font-family: 'Acme', sans-serif;
  font-size: 13px;
  text-align: center;
}

.caption {
  display: relative;
  font-family: 'Damion', cursive;
  font-size: 20px;
  color: black;
  text-align: center;
}

참고사이트
참고사이트

0개의 댓글