Recent Posts
«   2025/06   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
관리 메뉴

개발자 박가나

[241001 TIL] 본캠프 2일 차 ('팀 소개 페이지 만들기' 프로젝트 2일차) 본문

내일배움캠프

[241001 TIL] 본캠프 2일 차 ('팀 소개 페이지 만들기' 프로젝트 2일차)

gnchoco97 2024. 10. 1. 18:40

 Today 1. [팀 소개 페이지 만들기] 프로젝트 2일차 

  • 와이어프레임 구축
    • Footer
  • 역할 분담
    • 하은님 : Header & Footer
    • 지영님 : 랜딩 Section & 팀 소개 Section
    • 윤솔님, 진실님, 채현님, 나 : 팀원 소개 Section & 방명록 Section
  • 코딩
    • [방명록 Section] 말풍선 HTML, CSS

<!-- HTML 코드 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
    </head>
    <body>
        <div id="container">
            <div class="guestbook">
                <img class="guestbook-profile" src="./profile.png" />
                <div>
                    <div class="guestbook-user">
                        <p class="guestbook-name">방문자 1</p>
                        <p class="guestbook-date">just now</p>
                    </div>
                    <p class="guestbook-comment">방명록입니다.</p>
                </div>
            </div>
            <div class="guestbook">
                <img class="guestbook-profile" src="./profile.png" />
                <div>
                    <div class="guestbook-user">
                        <p class="guestbook-name">방문자 2</p>
                        <p class="guestbook-date">just now</p>
                    </div>
                    <p class="guestbook-comment">
                        Lorem ipsum dolor sit amet consectetur. Non id neque at ornare ut habitasse tristique. Nibh placerat lectus mollis purus praesent amet senectus tristique aliquam. Fringilla
                        velit urna orci orci morbi sollicitudin mauris elementum.
                    </p>
                </div>
            </div>
        </div>
    </body>
</html>
/* CSS 코드 */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

* {
    font-family: 'pretendard', sans-serif;
    margin: 0;
    padding: 0;
}

#container {
    width: 1200px;
    margin: 0 auto;
}

.guestbook {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #d9d9d9;
    border-radius: 30px 30px 30px 0;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
    padding: 20px 24px;
    margin: 24px 64px;
}

.guestbook-profile {
    margin-right: 20px;
}

.guestbook-user {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 6px;
}

.guestbook-name {
    font-size: 18px;
    font-weight: 500;
}

.guestbook-date {
    color: rgb(25, 25, 25, 0.4);
    font-size: 16px;
    font-weight: 400;
    margin-left: 10px;
}

.guestbook-comment {
    font-size: 16px;
    font-weight: 400;
}

 

와이어프레임이 어느정도 완성되고 프로젝트를 본격적으로 시작하기 위해 역할 분담을 하였다. 파트를 나누다 보니 API 구현이 필요한 부분, JavaScript 없이 HTML과 CSS로만 구현이 가능한 부분, 상대적으로 구현이 복잡한 부분 등 다양한 상황이 발생하였고 어떻게 하면 한 명도 빠짐없이 모든 팀원들이 고르게 참여할 수 있을지 고민의 연속이었다. 경험이 없을수록 오히려 어려운 파트에 배정을 해서 경험을 해보자는 의견도 있었고 경험이 없기 때문에 쉬운 부분부터 차근차근 해보자는 의견도 있었는데, 정답이 있는 문제가 아니었기 때문에 적극적으로 의견을 내고 다른 사람의 의견도 경청해 주면서 최종적으로 하나의 합의점에 도달할 수 있었다.

 

 

 Today 2. [TIL] 특강 

  • TIL이란 무엇인가?
    • Today I Learned
  • TIL을 써야 하는 이유
    • 기록 : 무엇을 배웠는지 기록
    • 성장 : 학습한 것을 정리하며 이해도를 높이고 복습도 가능
    • 활용 : 비슷한 문제 발생 시 활용 가능
  • TIL 작성법
    • 강의 내용 정리
    • 개발 단계 정리
    • 하루 회고
    • 문제 해결 과정
사전캠프 때부터 TIL을 작성하고 있지만 어떤 내용을 써야하는지도 막막하고 필요성에 대해 정확히 와닿지 않은 것도 사실이었다. 하지만 오늘 강의를 듣고 나니, TIL을 매일매일 작성하는 것 자체가 성실함을 증명할 수 있는 하나의 결과물이 될 수 있고 오늘 하루 공부한 내용을 정리해보면서 자연스럽게 복습도 할 수 있다는 것을 깨달았다. 당분간은 적응 기간이라 힘들겠지만 습관으로 자리잡힐 수 있도록 하루하루 열심히 작성해보려고 한다.

 

 

 Today 3. 개인 공부 - [CSS] 그림자 효과 넣기 

box-shadow: [x] [y] [blur] [spread] [color];
 - x : 양수(ex. 5px)일 경우 오른쪽, 음수(ex. -5px)일 경우 왼쪽에 그림자 적용
 - y : 양수(ex. 5px)일 경우 아래쪽, 음수(ex. -5px)일 경우 위쪽에 그림자 적용
 - blur : 값이 작을수록 선명하게, 값이 클수록 흐릿하게 번짐 효과 적용
 - spread : 양수(ex. 5px)일 경우 확장, 음수(ex. -5px)일 경우 축소시켜서 적용
 - color : 그림자의 색상 지정
<!-- HTML 코드 -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div class="container"></div>
    </body>
</html>
/* CSS 코드 */

.container {
    width: 300px;
    height: 80px;
    border: 1px solid #d9d9d9;
    border-radius: 20px;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
    margin: 20px;
}

 

퍼블리싱 작업을 하다보면 그림자 효과를 적용해야 할 때가 종종 있는데 그럴때마다 정확히 어떤 의미인지 모른 채 인터넷에서 혹은 Figma에서 관련 내용을 그대로 가져다 쓴 적이 많았다. 앞으로도 어딘가에서 복붙해서 사용하는 경우가 많겠지만 적어도 의미는 알고 사용하자는 생각이 들어서 box-shadow 속성에 대해서 알아보았다. 의미를 알고 보니 오히려 간단하게 느껴졌고 앞으로는 보다 정확하게 내가 원하는대로 스타일링할 수 있겠다는 생각이 들었다.

 

'내일배움캠프' 카테고리의 다른 글

[241004 TIL] 본캠프 4일 차 ('팀 소개 페이지 만들기' 프로젝트 4일차)  (0) 2024.10.04
[241002 TIL] 본캠프 3일 차 ('팀 소개 페이지 만들기' 프로젝트 3일차)  (2) 2024.10.02
[240930 TIL] 본캠프 1일차 ('팀 소개 페이지 만들기' 프로젝트 1일차)  (2) 2024.09.30
[240927 TIL] 사전캠프 5일차 (사전캠프 종료)  (1) 2024.09.27
[240926 TIL] 사전캠프 4일차  (4) 2024.09.26
'내일배움캠프' Related Articles more