ksw_devlog
TIL 4일차 본문
미니 프로젝트 메인 페이지 코드를 보면서 css 태그에 대해 찾아보면서 공부하였다.
생활코딩 CSS 강의를 들으면서 메인 페이지 코드를 따라 쳐보면서 웹페이지를 만들어 보았다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>개인페이지</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,200;0,400;0,500;0,600;0,800;0,900;1,200;1,400;1,500;1,600;1,800;1,900&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
</head>
<body>
<div class="frame">
<h3 class="site-name">송1김4</h3>
<div class="dashboard">
<h1 class="Greetings">Hello I am <a class="name">SW</a> <br>
</h1>
<p class="in">한 번 마음먹으면 끝까지 하는 사람.</p>
</div>
<div class="main">
<div class="Information">
<img class="info-img" id="my-img" src="cat-modified.png">
<div class="Information-info">
<h3 class="Information-name" id="name1">MBTI-ISFP</h3>
<p class="Information-comment" id="commnet1">모험가 ( ISFP) 는 내성적 , 관찰 적 , 감정적 , 미래 지향적 성격을 가진 사람입니다 .
그들은 열린 마음, 접근하는 삶, 새로운 경험, 따뜻한 사람을 갖고 있는 경향이 있습니다.
순간에 머무르는 능력은 흥미로운 잠재력을 발견하는 데 도움이 됩니다.
</p>
</div>
</div>
<div class="Information">
<div class=" Information-info">
<h3 class="Information-name" id="name2-1">객관적으로 살펴본 내 장점</h3>
<p class="Information-comment" id="comment2">꾸준하고 멘탈이 좋은 편이다. 문제가 생겼을 때 차분하게 해결하는 편이다.</p>
<h3 class="Information-name" id="name2-2">협업을 하는 과정에서의 자신의 스타일</h3>
<p class="Information-comment" id="comment2">보통 팀에 방향에 따르고 자기 할 일을 맡아서 하는 스타일이다.
역량에 따라 프로젝트에서 주도적인 역할을 수행하는 편이다.</p>
</div>
</div>
</div>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet" />
</head>
<body>
<div class="mypost">
<form action="http://localhost:5000/login" method="post">
<div class="form-floating mb-3">
<input id="name" type="text" class="form-control" placeholder="닉네임을 입력해주세요" />
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea id="comment" class="form-control" placeholder="코멘트를 남겨주세요" style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
</form>
<div class="mybtns">
<button onclick="posting()" type="button" class="btn btn-dark">
제출하기
</button>
</div>
</div>
</div>
</body>
</html>
<footer class="footer">
<h3 class="Another">
Another</h3>
<div class="links">
<a class="blog" href="https://kkssww.tistory.com/">Blog</a>
<a class="team-page" href="https://www.instagram.com/a_i_siteru/">Team page</a>
</div>
</footer>[css]
body {
/* background-color: rgb(73, 185, 222); */
background-color: black;
}
.frame {
margin: 30px 150px;
display: flex;
flex-direction: column;
}
/*navigator*/
.site-name {
margin: 0;
font-family: "Montserrat", sans-serif;
font-size: 24px;
color: white;
}
a {
color: white;
text-decoration: none;
}
a:hover {
color: rgb(73, 185, 222);
transition: 0.3s;
}
/*dashboard*/
.dashboard {
display: flex;
flex-direction: column;
margin-top: 100px;
margin-bottom: 70px;
}
.Greetings {
font-family: "Noto Sans KR", sans-serif;
font-weight: 500;
font-size: 80px;
}
.name {
background-color: #00b992;
-webkit-text-stroke: 1px black;
}
.name:hover {
background-color: transparent;
color: white;
-webkit-text-stroke: 1px black;
transition: none;
}
/*footer*/
.footer {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 200px;
}
.Another {
font-family: "Montserrat", sans-serif;
font-size: 50px;
font-weight: 700;
color: black;
margin-bottom: 40px;
border-bottom: 2px solid black;
}
.links > a {
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 400;
margin-left: 15px;
}
#my-img {
width: 300px;
}
/* RECENT WORKS */
.main {
display: flex;
flex-direction: column;
}
.Information {
display: flex;
flex-direction: row;
margin-bottom: 120px;
align-items: center;
}
.Information-info {
margin: 0px 20px;
}
.Information-name {
font-family: "Noto Sans KR", sans-serif;
font-size: 50px;
margin-top: 0px;
margin-bottom: 5px;
}
.Information-name:hover {
color: #ffc9e2;
-webkit-text-stroke: 1px black;
transition: 0.3s;
}
.Information-comment {
font-family: "Noto Sans KR", sans-serif;
font-size: 22px;
font-weight: 100;
margin-left: 5rem;
}
#comment1 {
font-family: "Noto Sans KR", sans-serif;
font-size: 50px;
margin-top: 0px;
margin-bottom: 30px;
margin-left: 8rem;
}
#name1 {
position: relative;
right: 70px;
margin-left: 9rem;
}
#name1:hover {
color: #ceb3ff;
}
#name2-1 {
max-width: 600px;
margin-left: 1rem;
text-align: right;
position: relative;
margin-bottom: 0px;
}
#name2-2 {
text-align: right;
position: relative;
margin-left: 5rem;
}
.mypost {
background-color: azure;
width: 95%;
margin: 200px auto 0px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtns > button {
margin-right: 10px;
}
웹개발 서버 부분 강의를 다시 들으면서 복습하였다.
GET 요청, POST 요청 부분을 복습하면서 버킷리스트 남기고 지우는 기능을 다시 해봤다.
'TIL' Related Articles
more
