오늘의 한 일
- 웹프로그래밍 A-Z 기초강의 복습 (1~3주차)
- 내배캠 미니프로젝트 프론트엔드 작업
프론트엔드 작업
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<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>A6.Audi 팀원 소개 | 이현재</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link rel="stylesheet" href="hyunjae.css" />
</head>
<body>
<div class="mytitle">
<h1>A6.Audi | 이현재 자기소개 페이지</h1>
</div>
<div class="container">
<div class="describe">
<p>MBTI:          <textarea rows="1" cols="25">INFJ</textarea></p>
<p>장점:           <textarea rows="1" cols="25">효율적인 방법을 추구함</textarea></p>
<p>협업스타일:    <textarea rows="1" cols="25">함께 스탭업할 수 있게 노력</textarea></p>
<p>궁극적인 목표: <textarea rows="1" cols="25">원하는대로 구현할 수 있는 개발자</textarea></p>
<p>취미:           <textarea rows="1" cols="25">음악감상, 게임, 피아노, 비즈아트</textarea></p>
<p>블로그 주소:   <textarea rows="1" cols="25">http://yaun.tistory.com</textarea>  <a class="btn btn-primary" href="http://yaun.tistory.com" role="button">Link</a></p>
<p>한마디: </p>
<textarea rows="10" cols="80">이번 부트캠프를 통해 코딩실력을 갈고닦아 취업에 도움이 되었으면 좋겠습니다. 실제로 직접 자기소개 페이지를 만들어보면서 줄바꿈 하나 찾기도 어려운 자신을 찾을 수 있었는데 4개월 뒤에 성장해있을 자신이 궁금해집니다ㅎㅎ 모두 파이팅!</textarea>
</div>
<div class="photo"></div>
</div>
<div class="footer">Copyright 2022 HyunJaeLee All rights reserved.</div>
</body>
</html>
* {
font-family: 'Jua', sans-serif;
}
.mytitle {
color: white;
height: 180px;
width: 100%;
background-image: url("https://i.postimg.cc/2jt8r2b2/3.jpg");
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.describe {
width: 750px;
height: 650px;
margin-top: 20px;
margin-left: 20px;
font-size: 15px;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.photo {
width: 397px;
height: 397px;
margin: auto;
border-radius: 10px;
background-image: url("https://i.postimg.cc/W1G2mV9H/image.gif");
background-position: center;
background-size: cover;
}
.btn {
margin-bottom: 20px;
}
.footer {
font-family: 'Gowun Dodum', sans-serif;
grid-area: footer;
display: block;
text-align: center;
font-size: small;
margin-top: 40px;
}
결과물
느낀점 : 한글 · ppt등의 프로그램처럼 원하는 공간에 원하는 오브젝트를 넣는게 굉장히 어렵다.
꾸준한 실습으로 익숙해져야하는 작업들이 많아 고난의 행군길이 예상된다..
프론트엔드 작업(메인 페이지-뼈대만)
같은 느낌으로 우측 사진 이미지를 안쪽에 넣는다거나 아래쪽 카드의 간격을 윗라인에 맞게 넓히고 싶으나 아직 감이 잘 잡히지 않는다.
웹프로그래밍 A-Z
웹개발 3주차 mongoDB 연결하기 도중 일어난 오류
에러메세지를 통해 인증서 관련 오류인것은 알았지만 구글링을 해도 답을 찾기 어려워 slack을 통해 도움을 받았다.
certifi 패키지를 설치하시고 파이썬 파일에 아래 코드를 작성하시고 나서 실행.
import certifi
ca = certifi.where()
client = MongoClient(DB주소,tlsCAFile=ca)
from pymongo import MongoClient
import certifi
ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.5vylekx.mongodb.net/?retryWrites=true&w=majority',tlsCAFile=ca)
db = client.dbsparta