개발일지

2023.11.28 TIL

과일바구니♡ 2023. 11. 28. 21:04

1. 강의내용

 1)html, css, 부트스트랩, 구글폰트 가져다 쓰기

   html- 뼈대, Css- 꾸미기였다.

 css는 <head> 에서 <style> 치고 안에 .이름  {    }에 설정을 해서 꾸며주었다.

오늘 1주차 수업을 다 듣고, 숙제를 했다.

동영상 보며, 따라한다고 했는데 완성된 페이지로 보이는 예시와는 조금 다르게 홈페이지가 만들어졌다.

 

2. 개발단계

웹 페이지 내가 맡은 부분 코드를 처음으로 구성해보았다.

강의를 들었는데도, 어떻게 해야 할지 모르겠고, 이게 맞는지 모르겠다는 생각이 들었다.

팀원에게도 물어보고, 매니저에게도 물어 보았는데, 대답에 대한 내 반응은 .. .... 이였다.

점심 먹고 오후시간이 되었다. 강의 들으면서 만든 코드들을 보면서 계속 생각했다.

이제 1주차 강의를 들은 내가, 강의 들은 내용안에서 어떻게 하면 내가 맡은 부분을 코드를 짤 수 있을까?

한참을 보다가, 헤드 부분에 스타일에서 정해 놓는 것을 보고, 웹 페이지 상단 이미지1, 방구석토크 이미지1, 사이트 하단부분 이미지1, 팀소개등 적는 부분 하나씩 스타일을 정하고, 바디에서 내용들을 적었다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
   
        <style>
     
      *{
       font-family: 'Gowun Dodum', sans-serif;
      }  
           .mytitle {
            height:250px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-position: center;
            background-size: cover;
        }
           .mytitle1 {
              width: 300px;
              height: 200px;
              background-image: "/img/웹화면1.png";
              background-position: right;
              padding: 20px;
              border-radius: 8px;
            }


            .mytime {
                width: 500px;
                margin: 30px auto 0px auto;
                padding: 5px;
                box-shadow: 0px 0px 3px 0px blue;
                border-radius: 5px;
                flex-direction: row;
                align-items: center;
                justify-content: center;
              }
     </style>
</head>
     <body>
         <div class="mytitle">
            <p><img src="/img/웹화면1.png "> </p>
            <p><div class="mytitle1"> </div></p>
        </div>
           
        <div class="mytime">
            <div class="team-intro">
                <p>팀명 : 방구석개발자들</p>
                <p>프로젝트명 : 개발 하고잡이</p>
                <p>팀소개 :집을 좋아하는 사람들이 모인 팀입니다. </p>
                <p>조용하지만, 웹개발을 배워 일상에서 사용하고자합니다.</p>
                <p>팀목표 : 일상에서 웹개발 활용하기</p>
               
                </div>

        </div>
    </body>
   

-위 내용은 그 다음날 조금 수정이 된 부분입니다.

 

나름대로 작성하고 나서 보니, 오타도 있고, 코드 마무리가 덜 된 것도 있어서 손을 보았다.

방구석토크 이미지1과는 스타일에서 연결을 못 시켰는데, 그래도 코드를 짜는 시간이여서 임의로 이름을 붙여 놓았다.

저녁을 먹고, 팀원들과 어제 오늘 짠 코드들을 깃허브에 통합하는 과정을 거쳤다.

 

개발 공부를 조금 하신 분이 계셔서, 통합후에 오류들을 수정해나갔다. 내가 만든 코드들도 합하고, 방구석토크 이미지1을 스타일에서 맞게 이름을 맞춰 웹 페이지에 보이도록 수정이 되었다. 개인페이지를 담당하는 팀원분께 자기소개를 메모지로 저장해서 보냈다. 깃도 다시 연결하고, 코드 통합된 자료도 다시 다운받았다.

팀소개 상자를 예쁘게 만들고 싶은데, 아직 모르고, 부족하다..

 

처음에 코드를 짤때는 이걸 배우기는 했는데, 어떻게 짜야 하나 고민이 많이들었다.

그래도 한번 짜보니 아주 쪼~금  모르던 코드를 작성했다는 생각이 들었다.

당연한 말이지만.. 수업도 듣는데 집중이 필요하고, 어렵다. 

갈길이... 멀다... 조금이라도 나이지기를 바라며 이 글쓰기를 마칩니다.

 

'개발일지' 카테고리의 다른 글

2023.12.01 미니팀프로젝트 발표  (0) 2023.12.01
2023.11.30 TIL  (1) 2023.11.30
2023.11.29 TIL  (1) 2023.11.29
2023.11.27~12.1 팀프로젝트 웹 페이지 만들기 개인 개발일지  (0) 2023.11.29
2023.11.27 TIL  (0) 2023.11.27