스크림을 하며 부트캠프를 시작하였다.
어제 봤을 때는(지금은 또 괜찮아보임) 괜찮아보이던 폰트의 크기들이 너무 큰 것 같아 줄여야하나 싶은 생각도 들지만, 나중에 같이 완성본을 보면서 수정하는 게 좋아보인다.
오늘은 개인페이지의 디자인을 진행하였다. 음... 코드나 진행 과정에 대해 설명을 해보려고 했으나, 이전에 진행하였던 요소들의 반복이라 설명할 것이 없었다.
오늘 알아낸 것은 사진에 radius를 주는데 적용이 되질 않아, 확인해보니 padding을 넣어서 그랬던 것이었다. 나중에 padding과 radius, margin과의 관계를 알아보는 것이 좋을 것 같다는 생각이 들었다.
다음 시간에는 못들었던 강의들을 들어야겠다.
결과물
CSS
더보기
@font-face {
font-family: "SDGothic";
src: url("THE_HongChawangjanemo.ttf") format("truetype");
font-weight: normal;
}
@font-face {
font-family: 'LeeSeoyun';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'UhBeeSe_hyun';
src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_five@.2.0/UhBeeSe_hyun.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
background-image: url("https://cdn.discordapp.com/attachments/1254426162470584321/1262620893373530182/-001_6.png?ex=669742d7&is=6695f157&hm=1db4da07657fef1108e6415b312b9e0373dec87f45cc8b2218a1b07d3fbe0808&");
background-position: center;
background-size: cover;
}
/* 다이어리 왼쪽 */
.diary1_img {
display: flex;
}
.diary1_img img {
width: 50%;
height: auto;
margin: 30px;
align-items: left;
border-radius: 20px !important;
}
.diary1_img2 {
margin: 0 30px 30px 0;
display: flex;
justify-content: right;
}
.diary1_img2 img {
width: 25%;
height: auto;
border-radius: 20px !important;
}
.diary1_text {
text-align: left;
padding: 15px;
font-family: 'UhBeeSe_hyun';
font-size: 1.8vh;
}
.diary1_text p,
.diary1_text2 p {
color: #377037;
}
.diary1_text span {
font-family: 'LeeSeoyun' !important;
font-size: 2.5vh;
color: #000000;
}
.diary1_text a {
text-decoration: none;
color: #000000;
}
.diary1_text div img {
width: 15%;
height: auto;
}
.diary1_text div {
margin-top: 13%;
}
.diary1_text2 {
text-align: left;
margin-left: 8%;
font-family: 'UhBeeSe_hyun';
font-size: 1.8vh;
}
.diary1_text2 span {
font-family: 'LeeSeoyun' !important;
font-size: 2.5vh;
color: #000000;
}
/* 다이어리 오른쪽 */
.diary2 p {
font-family: 'UhBeeSe_hyun';
font-size: 3vh;
}
.diary2_qa {
padding: 0 5% 0 5%;
font-family: 'LeeSeoyun';
text-align: left;
}
.diary2_q {
color: #00aa1a;
font-size: 2.5vh !important;
}
.diary2_qa span {
font-family: 'LeeSeoyun' !important;
color: #000000;
}
#open {
animation: open 0.5s ease forwards;
}
@keyframes open {
from {
transform: scaleX(0%);
visibility: visible;
transition-timing-function: ease-out;
}
to {
transform: scaleX(100%);
}
}HTML
더보기
<!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="../style.css" />
<link rel="stylesheet" href="hyunji_.css" />
<style>
#hyunji {
background-color: #00aa1a;
color: white;
}
</style>
</head>
<body>
<body class="scroll">
<div class="main" id="open">
<div class="diary1">
<div class="diary1_img">
<img src="https://pbs.twimg.com/media/F2G0vg1aAAAcOxn?format=jpg&name=medium" />
<div class="diary1_text">
<br />
<p>이름 : <span>유현지</span></p>
<p>나이 : <span>21</span></p>
<p>MBTI : <span>ISTP</span></p>
<p>블로그 주소 : <span style="font-size: 2.2vh;"><a target='_blank'
href="https://gecko0012.tistory.com/">https://gecko0012.tistory.com/</a></span></p>
<div><img
src="https://cdn.discordapp.com/attachments/1254426162470584321/1262731056516169748/55.png?ex=6697a970&is=669657f0&hm=4311daf293df2d6632eb11211964c2740f8287cb8f13c73ba5611f8ce50884d8&"
alt="클로버" />
</div>
</div>
</div>
<div>
<div class="diary1_text2">
<p>취미 : <span>어쩌구저쩌구어쩌구저쩌구어쩌구저쩌구</span></p>
***
<p>한 마디 : <span style="font-size: 2.2vh;"></span></p>
</div>
<div class="diary1_img2">
<img
src="https://cdn.discordapp.com/attachments/1254426162470584321/1262741252009623610/66.png?ex=6697b2ef&is=6696616f&hm=b9f19fbb775a0b42ca7f1b620e1e257694342e1bcf87cc91606b91d1bbd0dc7a&" />
</div>
</div>
</div>
<div class="diary2">
<P>질의응답</P>
<div class="diary2_qa">
<p class="diary2_q">Q. <span>가장 행복했던 순간</span><br />
A. <span>어쩌구저쩌구</span></p>
***
</div>
<div class="diary1_img2">
<img style="z-index: 1;"
src="https://media.discordapp.net/attachments/1254426162470584321/1262741252835901480/99.png?ex=6697b2ef&is=6696616f&hm=3bb73ec5728f116fabd4297cebaaf790e976a3c1dd6115c8bce896c2ab7e4484&=&format=webp&quality=lossless&width=818&height=273" />
</div>
</div>
<div class="menu-container">
<div class="menu"><span class="matename">
<a href="../introduce/intro_team.html"
style="text-decoration: none; color: inherit;">TEAM</a></span>
</div>
***
</div>
</body>
</html>
HTML
더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Our DiARY</title>
<link rel="stylesheet" href="style.css" />
<style>
@font-face {
font-family: 'EF_YOONY';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-01@1.0/EF_YOONY.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'LeeSeoyun';
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
background-image: url("https://cdn.discordapp.com/attachments/1254426162470584321/1262750543730704485/-001_10.png?ex=6697bb96&is=66966a16&hm=1d48977f629410af1461132ff890de769bb6e050fb8ed01e27d1364661d39f21&");
background-position: center;
background-size: cover;
}
.diary {
background-color: #FFBAAB;
outline: 6px solid white;
outline-offset: -15px;
}
.title {
font-family: 'EF_YOONY';
font-size: 5vh;
color: #ffffff;
padding-top: 300px;
}
.diary img {
width: 40%;
height: auto;
}
.diary p {
width: 18%;
height: 100px;
background: rgb(255, 255, 255);
border-radius: 100% 0 0 100%;
font-size: 2vh;
font-family: 'EF_YOONY', 'cursive';
margin: 30px 0 0 82%;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="main">
<div class="diary">
<section class="title"><span>DiARY</span></section>
<img
src="https://cdn.discordapp.com/attachments/1254426162470584321/1262753310566383626/10.png?ex=6697be2a&is=66966caa&hm=9e29dfa76edbb982e55b711dff651a01acf84be5ab90737c371cf0e033c3e6ec&" />
<a href="./introduce/intro_team.html" style="text-decoration: none; color: inherit;">
<p style="">
펼치기</p>
</a>
</div>
<div class="menu-container">
<div class="menu"><span class="matename">
<a href="./introduce/intro_team.html"
style="text-decoration: none; color: inherit;">TEAM</a></span>
</div>
<div class="menu1"><span class="matename">
<a href="./dayeon_Card.html"
style="text-decoration: none; color: inherit;">DAYEON</a></span>
</div>
</div>
</div>
</body>
</html>
느낀 점
justify-content:center;, align-items:center;의 차이점은 무엇일지 css를 수정하면서 궁금해졌다.
오늘은 뭔가 제대로 집중을 하지 못했던 날이었던 것 같다. 할 일을 다 해서 그런지, 팀원들은 파이어베이스, api,,,,,등을 쓰고 있을 때 나는 css와 html을 중심적으로 만져서 그런 것인지,,, 아무튼 다음에는 js 공부를 진행할 것이다.
'캠프 > 미니 프로젝트' 카테고리의 다른 글
| [개인 프로젝트] 영화 검색 js, css, html (0) | 2024.07.29 |
|---|---|
| 미니 프로젝트 3,4일차 (쓰다가 ㅌ탈주) (0) | 2024.07.22 |
| 미니 프로젝트 1일차 (0) | 2024.07.16 |
