S.A 작성
오늘 팀원들과 함께 위와 같은 팀원들을 소개하는 웹사이트를 만드는 프로젝트를 시작하였다. 다 함께 첫회의를 하면서 S.A를 작성해서 프로젝트의 개요를 만들어 보았다.
S.A : https://www.notion.so/teamsparta/i-18-af4af343ee43408782d1fbe4e2f3920a
간단히 자기소개를 하면서 우리 모두 MBTI가 I인점이 특이해서 "i좋아"로 팀명을 정하였다.
개발 일정
개발 일정은 총 5일로 잡았다.
-
월요일 : 오늘은 S.A 작성 및 전체적인 프로젝트의 개요를 상의했다.
-
화요일 : 프로젝트의 필요한 기술을 각자 준비하는 시간을 갖는다.
-
수요일 : 직접적인 코드를 통해서 프로젝트를 본격적으로 만들기 시작한다.
-
목요일 : 프로젝트를 완성하고 검토하면서 영상을 만든다.
-
금요일 : 프로젝트를 발표한다.
역할 분담
나는 웹 사이트에서 버튼을 누르면 나오는 각자의 소개가 나오는 페이지의 한 부분을 HTML, CSS기술을 활용하여 만드는 역할을 맡았다.
팀 규칙
-
점심시간, 회의시간, 저녁시간 준수
-
9:30에 모여서 각자 자신의 하루 계획을 설명하고 의견을 조율하는 시간을 갖는다.
-
서로를 응원하고 존중한다.
웹 사이트 만들기
나의 웹사이트와 사진 첨부하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>나를 소개합니다</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
@import url('https://fonts.googleapis.com/css2?family=Jua&display=swap');
* {
font-family: "Jua", sans-serif;
font-weight: 400;
font-style: normal;
}
</style>
</head>
<h1>이상민</h1>
<body>
<div class="images">
<img src="KakaoTalk_20240715_212648855.jpg" class="img-thumbnail" alt="KakaoTalk_20240715_212648855.jpg">
</div>
</body>
</html
처음에 나의 사진을 왼쪽위에 넣고 싶어서
<div class="images">
<img src="KakaoTalk_20240715_212648855.jpg" class="img-thumbnail" alt="KakaoTalk_20240715_212648855.jpg">
</div>코드를 넣었다. 그러나 사진이 웹사이트를 꽉 채워서 줄일 수 있는 방법을 찾아보았다.
.images {
width: 300px;
height: 150px;
object-fit: cover;
}그리고 style 행사이의 위에 코드를 삽입해서
사진의 크기를 줄이면서 삽입하는데 성공했다.
마무리
오늘은 HTML,CSS를 통해서 나의 웹사이트에 사진과 크기 구글폰트를 가져와서 만들어보았다. 공부하면서 느낀 것은 웹사이트를 만드는 코드들은 많이 찾아와서 사용해야 한다는 것을 느꼈다. 그게 효율적이고 더 보기 좋은 웹사이트를 만들 수 있기 때문이다. 그래서 코드를 짜는 틀을 이해하는게 더 중요한 부분이라고 스스로 느꼈다. 만들면서 힘든 것은 파일의 길이가 엄청 길어져서 그 부분이 많이 헷갈렸다.
