부트캠프 일지

부트 캠프 1일차 후기와 배운 것.

여름하인 2023. 11. 27. 20:58

1일차엔 1시간 가량 OT를 거치고 팀원과 인사하는 시간을 가졌다. 다만, 내일배움카드를 즉시 발급받기 위해 시내까지 나갔다와서 미니 프로젝트의 S.A 작성에 제대로 참여하지 못한 것이 아쉽다. 그래도 뒤늦게 의견을 제시하였고, 웹개발 강의를 듣고 하루의 마무리를 짖는다.

 

강의까지 듣고 든 생각이지만, 이 부트캠프는 생각보다 자기주도적 학습이 중요한 것 같다. 보통의 강의에 경우 HTML 요소가 무엇이 있고, CSS에 요소가 무엇이 있는지를 자세히 설명해주지만, 이 강의에선 이러이러한게 있다는 것을 훑어주고, 흥미가 있으면 스스로 공부를 해보라라고 말을 하는 것 같다. 초보친화적으로 강의를 해서 그런 것인지도 모르겠지만, 이것이 개발자가 가져야 하는 태도인 것은 분명하기에 그렇게까지 나쁘진 않다.

 

오늘 배운 것은 HTML과 CSS다. HTML엔 여러 태그가 있고, CSS로 웹 페이지를 꾸밀 수 있다는 것은 분명한 사실이다. 이번 강의에서 배운 HTML에 글자의 크기를 나타내는 h1, 문단을 나누는 p, 구간을 나누는 div 등등의 태그를 소개하였는데 아는 내용이라 대충 짚고 넘어간다.

 

배운 것이 많은 쪽은 CSS 파트이다. margin은 바깥쪽 오브젝트와의 간격, padding은 안쪽 오브젝트와의 간격인 것을 배웠고, 그림자를 나타내는 box-shadow란 요소가 있다는 것을 배웠다. 또한 클래스 내의 요소의 CSS에 접근하기 위해서 번거롭게 class를 만들지 않고 '>'를 사용한다는 점은 꽤나 흥미로운 점이다.

더욱이 배경 이미지 나타내기 위해서

background-image: url('이미지 URL')
            background-position: center;
            background-size: cover;

이 3줄을 주로 사용하며 가운데 정렬을 쓰기 위해선

display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

이 4줄을 사용한다. 아쉽게도 각 줄이 어떤 것을 의미하는지는 가르쳐주진 않았다.

 

나는 백엔드 쪽을 희망하지만, 그래도 CSS를 읽을 수 있는 건 플러스 요소가 될 수 있기 때문에, 위의 각 줄의 요소가 어떤것인지 후일 자세히 알아보도록 하자. 오늘은 첫 날이였고 시내까지 갔다 와서 많이 피곤했기에 많은 것을 배운진 못했다. 하지만, 내일은 5주차까지 강의를 마치고 미니 프로젝트에 집중하도록 하자.

 

추가)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나만의 추억 앨범</title>
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <style>
    * {
        font-family: 'Black Han Sans', sans-serif;
    }
        .mytitle{
            height: 250px;
            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            background-position: center;
            background-size: cover;
        }
        .mytitle > button{
            width: 150px;
            height: 50px;
            background-color: transparent;
            color: white;
            border: 1px solid white;
            border-radius: 5px;
            margin-top: 20px;
        }
        .mycards{
            width: 1200px;

            margin: 30px auto 0px auto;
        }

        .mypostingbox {
            width: 500px;
            margin: 30px auto 0px auto;
            padding: 20px;
            box-shadow: 0px 0px 3px 0px blue;
            border-radius: 5px;
        }
        .mybtn{
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
        }
        .mybtn > button {
            margin-right: 5px;
        }
    </style>
</head>
<body>
    <div class="mytitle">
        <h1>나만의 추억앨범</h1>
        <button>추억 저장하기</button>
    </div>

    <div class="mypostingbox">
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 이미지</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 제목</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 내용</label>
        </div>
        <div class="form-floating mb-3">
            <input type="email" class="form-control" id="floatingInput" placeholder="앨범 이미지">
            <label for="floatingInput">앨범 날짜</label>
        </div>
        <div class="mybtn">
            <button type="button" class="btn btn-primary">기록하기</button>
            <button type="button" class="btn btn-outline-primary">닫기</button>
        </div>
    </div>
    <div class="mycards">
        <div class="row row-cols-1 row-cols-md-4 g-4">
            <div class="col">
              <div class="card h-100">
                <div class="card-body">
                  <h5 class="card-title">앨범 제목</h5>
                  <p class="card-text">앨범 내용</p>
                </div>
                <div class="card-footer">
                  <small class="text-body-secondary">Last updated 3 mins ago</small>
                </div>
              </div>
            </div>
            <div class="col">
                <div class="card h-100">
                  <div class="card-body">
                    <h5 class="card-title">앨범 제목</h5>
                    <p class="card-text">앨범 내용</p>
                  </div>
                  <div class="card-footer">
                    <small class="text-body-secondary">Last updated 3 mins ago</small>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <div class="card-body">
                    <h5 class="card-title">앨범 제목</h5>
                    <p class="card-text">앨범 내용</p>
                  </div>
                  <div class="card-footer">
                    <small class="text-body-secondary">Last updated 3 mins ago</small>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="card h-100">
                  <div class="card-body">
                    <h5 class="card-title">앨범 제목</h5>
                    <p class="card-text">앨범 내용</p>
                  </div>
                  <div class="card-footer">
                    <small class="text-body-secondary">Last updated 3 mins ago</small>
                  </div>
                </div>
              </div>
          </div>
    </div>
</body>
</html>

2주차 강의에서 친 코드이다.