티스토리 뷰
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>팀원 소개</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
body {
background-color: #01101f;
}
.snowflake {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: white;
position: absolute;
top: -8px;
}
@keyframes fall {
from {}
to {
transform: translateY(100vh);
opacity: 0;
}
}
.container {
margin: 2% auto;
}
.title {
width: 100%;
margin: auto auto 5% auto;
text-align: center;
}
.time {
position: absolute;
top: -8%;
right: 0%;
color: white;
font-size: 20px;
}
.contentBox {
width: 80%;
height: 60%;
margin: 0% auto;
padding: 2%;
position: relative;
border: 2px dashed rgba(255, 255, 255, 0.581);
}
.contentBox ul {
list-style: circle;
color: white;
font-size: 25px;
}
.imgBox {
display: flex;
flex-direction: row;
justify-content: space-around;
}
.imgBox>img {
margin-bottom: 3%;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
width: 48%;
}
</style>
</head>
<body>
<div class="container">
<div class="title">
<a href="inedx.html"> <img src="image/logo2.png"> </a>
</div>
<div class="contentBox">
<div class="time">
<p id="clock">현재 시간</p>
</div>
<div class="imgBox">
<img src="image/dog-foot.jpg" class="card-img" alt="...">
<img src="image/dog1.jpg" class="card-img" alt="...">
</div>
<ul>
<li>멍집사 입니다!</li>
</ul>
</div>
</div>
</body>
<script>
const body = document.querySelector("body");
const MIN_DURATION = 10;
function makeSnowflake() {
const snowflake = document.createElement("div");
const delay = Math.random() * 10;
const initialopacity = Math.random();
const duration = Math.random() * 20 + MIN_DURATION;
snowflake.classList.add("snowflake");
snowflake.style.left = `${Math.random() * window.screen.width}px`;
snowflake.style.animationDelay = `${delay}s`;
snowflake.style.opacity = initialopacity;
snowflake.style.animation = `fall ${duration}s linear`;
body.appendChild(snowflake);
setTimeout(() => {
body.removeChild(snowflake);
makeSnowflake();
}, (duration + delay) * 1000);
}
makeSnowflake();
for (let index = 0; index < 50; index++) {
setTimeout(makeSnowflake, 500 * index);
}
const clock = document.querySelector("#clock");
function getclock() {
let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let Second = now.getSeconds();
clock.innerText = `현재 시간 : ${hour}시 ${minute}분 ${Second}초`;
}
getclock();
setInterval(getclock, 1000);
</script>
</html>
콘텐츠 박스를 부모 포지션으로 잡고, 현재 시간을 나타내는 div에 자식포지션을 줘서 레이아웃을 잡으려 했지만 화면 배율이 변경될 때마다 위치가 어긋났었다.
Flex도 이용해 보고, top과 right값도 여러 번 변경해 봤지만 원하는 위치에 고정이 되질 않았다
결국 튜터님의 도움으로 제 자리를 찾아갈 수 있었다 튜터님이 주신 참고 사이트로 Flex를 다시 활용해 보자
- Flex 참고 사이트
https://studiomeal.com/archives/197
이번에야말로 CSS Flex를 익혀보자
이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누
studiomeal.com
1주 차 학습 종료
팀원들끼리 복습하고자 간단하게 미니 프로젝트를 진행했다,
각자 개인 페이지를 담당하였고 index는 조민기 님이 담당하시기로 하셨다
개인 페이지를 만들면서 웹 개발 종합을 어떻게 활용해야 할지 많은 고민을 했으나 잘 만들고 싶은 욕심만 너무 앞서
충분한 기획단계를 거치지 못한 것 같다 결국 몇 번이나 새로 다시 만들었지만, 만족스러운 결과물을 만들지 못했다.
Git 사용이 처음이다 보니, 혹시나 잘못될까 걱정과 두려움으로 적극적으로 활용하지 못한 거 같다
부족한 부분은 계속 기록하며 같은 실수를 반복하지 않도록 노력해야겠다
'TIL > Javascript' 카테고리의 다른 글
| [자바스크립트 JavaScript] 솔트(Sort) 배열 요소 정렬 (0) | 2024.01.05 |
|---|---|
| [자바스크립트 JavaScript] 맵(Map) , 셋 (Set) (0) | 2024.01.04 |
| [자바스크립트 JavaScript] 구조분해할당, 단축속성명, 전개구문 (0) | 2024.01.03 |
| [자바스크립트 JavaScript] 화살표 함수, 조건부 실행, 객체와 배열 메서드 (0) | 2024.01.02 |
| [자바스크립트 JavaScript] 문자열함수, 삼항 연산자 (0) | 2023.12.29 |