프론트엔드 부트캠프 56일차, 팀 프로젝트(3) - 정해진 레이아웃 안에서 100vw를 쓰고 싶어!!!

https://www.wake-up-neo.com/ko/css/css%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC-%EC%9E%90%EC%8B%9D-div%EC%9D%98-%EB%84%88%EB%B9%84%EB%A5%BC-%EB%B6%80%EB%AA%A8-div%EB%B3%B4%EB%8B%A4-%EB%84%93%EA%B2%8C-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%B4-%EC%9E%88%EC%8A%B5%EB%8B%88%EA%B9%8C/971213954/

css — CSS를 사용하여 자식 DIV의 너비를 부모 DIV보다 넓게 만드는 방법이 있습니까?

레이아웃에서 Body에 패딩을 양쪽으로 1em씩 줬는데, 배너 같은 게 나올 땐 화면을 풀로 쓰고 싶다면???
그럼 100%로 해봤자 부모를 벗어나지 못하기 때문에 꽉 차지 않는다.
이럴 때 주체적인 100vw를 쓰면 부모 영역 안에서 노는 게 아니라, 화면(뷰포트)에서 차지하는데!! 100vw를 해도 왼쪽 여백이 남는 것이다...

구글링 구글링

body,
html,
.parent {
    height: 100%;
    width: 100%;
    text-align: center;
    padding: 0;
    margin: 0;
}
.parent {
    width: 50%;
    max-width: 800px;
    background: grey;
    margin: 0 auto;
    position: relative;
}
.child-element {
    position: relative; // 여기!!! 
    width: 100vw; // 여기!!! 
    left: calc(-50vw + 50%); // 여기!!!
    height: 50px;
    background: blue;
}

width: 100vw;랑 left: calc(-50vw + 50%); 가 포인트!!!

calc() CSS 함수를 사용하면 CSS 속성의 값으로 계산식을 지정할 수 있습니다. (출처 : MDN)

시작 위치를 -50vw + 50%한 것으로 옮기는 것이다...

시작을 -50vw로만 정하면 이렇게 된다. 여기서 반쪼가리 만큼 더 오른쪽으로 옮겨주면 된다.

사실 원리는 잘 모르겠음... 왜 애초에 왼쪽 여백이 남는걸까? padding 준 것 때문에 그런가?

위에 링크에 잘 설명되어있음!!


그리고 100vw 해도 양끝이 조금씩 남는 것은 globalstyle *에 대한 속성에서 margin을 0으로 주면 된다.



타이틀 Fade in 효과로 뜨게 하기

// styles.ts 
export const RuminousTitle = styled.h1`
  color: white;
  animation: Fade 3s ease-in-out;

  @keyframes Fade {
    0% {
      opacity: 0;
      transform: translateY(20px);
    }
    100% {
      opacity: 1;
      transform: none;
    }
  }
`;

없어지기로 한 아이였다. .

     <S.ReservationWrapper>
        <S.ReservationLeftBox>
          <S.Calendar>캘린더</S.Calendar>
        </S.ReservationLeftBox>
        <S.ReservationRightBox>
          <S.TimeTable>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
            <S.ReservationTime>16:00</S.ReservationTime>
          </S.TimeTable>
          <S.ReservationButton>예약하기</S.ReservationButton>
        </S.ReservationRightBox>
      </S.ReservationWrapper>
      
  // 
  
  export const ReservationWrapper = styled.section`
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
`;
export const ReservationLeftBox = styled.div``;
export const Calendar = styled.div`
  width: 370px;
  height: 360px;
  background-color: #c8c8c8;
`;

export const ReservationRightBox = styled.div``;

export const TimeTable = styled.ul`
  display: grid;
  grid-template-columns: 1fr 1fr;
`;

export const ReservationTime = styled.li`
  width: 180px;
  height: 64px;
  background-color: #9b9b9b;
  border-radius: 8px;
`;

export const ReservationButton = styled.button`
  width: 370px;
  height: 56px;
  background-color: #4a00e0;
  border-radius: 8px;
`;

9시 50분쯤 나와서 집 와서 씻고 밥 먹으면서 블로그 쓰는 중
오늘은 좀 일찍 나왔더니 다들 벌써 가냐고 그랬다🥲 어차피 집에서 또 하는 걸유🥹

--- 이때까지의 일과 ---
8시쯤 일어나서 8시 20분에 집에서 나온다. 9시쯤 학원 도착하면 그날 프로그래머스 문제를 푼다. 10시~1시30분은 수업이고, 쉬는 시간엔 질문하거나 보통은 알고리즘 문제를 푼다. 점심 먹고 와서 양치하고 알고리즘 문제 못 풀었으면 문제 풀고... 정말 가끔은 숙제를 시작한다. 거진 알고리즘 풀었던 것 같다. 초반엔 3시에 코드리뷰도 하고 가아끔 데일리 스크럼도 있었다. 수요일엔 알고리즘 테스트를 본다. 근데 보통은 5시 30분까지 안 일어나고 쭉 이어서 포트폴리오 작업했다. 5시 30분-6시 30분은 알고리즘 수업, 거의 대부분 한 시간이나 조금 안되게 수업하셨다(시간 빠르다...!). 그리곤 숙제한다. 첫날은 막차 직전에, 팀플 전 4주차까지는 9시-10시쯤 집에 갔고 그 후로는 집이 더 잘돼서 6시30분-7시30분에 나왔다. 팀플 시작하곤 10시-11시쯤 되는 것 같다. 나가는 시간은 숙제를 아예 시작하기 전이거나 어떤 단위별로 끝냈을 때다. 하나 풀고 나머지 잘 안되면 그냥 덮고 나가기도 했다.
학원 갈 땐 항상 버스가 마법처럼~~~맞춰서 오는데 집에 갈 땐 버스가 항상 마법처럼,,, 내 앞으로 지나간다. 그래서 집 올 땐 40분 정도 걸리는 듯. 집 와서 밥 먹고 씻으면서 1시간 정도 지나가고 일찍 씻으면 머리는 안 말린다. 늦게 온 날은 저녁을 거른다. 데스크탑에서 작업하고 11시쯤엔 블로그를 쓴다. 블로그쓰고 마무리 작업하고 깃 올려놓고 12시쯤 일기랑 플래너 쓰면 1시 전후에 잠든다. 확실히 나는 많이 자는 편인 것 같다. 하지만 수면시간을 줄이고 싶진 않다...! 잠을 줄이면 바로 졸고, 면역력이 확 떨어져서 아토피가 올라오거나.. 무엇보다 집중이 안된다. 그럼 보통은 스톱워치(외래어 표기법에 의해 스톱워치가 표준어인지 스탑워치가 표준어인지 궁금해졌다. "‘스톱워치’는 외래어이지만, ‘워치’는 외국어이고, 잘 쓰이지 않는다는 점을 고려해야 할 것으로 보입니다. 그리고 참고로 말씀드리면, ‘스톱워치’도 ‘초시계’로 순화하여 쓸 것을 권장하고 있습니다." 국립 국어원 답글에서 가져왔다. 일단 스톱이 맞다!)로 잰 공부시간이 9시간-11시간 정도 나온다. 난 수업시간도 잰거라서 수업시간 빼고 혼자 공부한 것만 치면 6시간-8시간 정도일듯...!!!
아무튼... 프리캠프 시작 이후로는 여유롭게 놀아본 적이 없는 것 같다. 휴대폰 만지는 시간은 진짜 많이 줄어서 하루종일 배터리 거뜬!!! 그리고 조금 더 정신적으로 건강해진 기분? 휴대폰에 의존하는 게 많이 줄었다. 근데 너무 안 봐서 문제긴하다... 연락을 너무 안해버릇해서... 뭔가 내 시간들을 소중하게 쓰는 느낌인 건 좋다. 공부를 하는 시간이 따로 정해진 게 아니라, 공부를 안 하는 시간이 의아한 시간이 됐다. 뭔가 하고 싶은 게 생기면 다 수료 이후에 할 목록으로 들어가지만... 어쨌든 그것도 끝이 있으니 버틸 수 있다. 팀플은 열심히 하는 것 뿐만 아니라 결과를 내야하니까 조금 초조하긴 하다. 지금 블로그 쓰는 것도 빨리 마무리해야할 것 같은 느낌...ㅠ 아무튼 요즘 일과는 여기서 끝

까먹고 안 썼지만 어제 조 이름이 오쪼라고...로 정해졌다. 정말 될거라곤 상상도 못했는데, 의외로... 어쩌다보니?ㅎㅎ... 팀 프로젝트 주제도 내가 낸 의견, 조 이름도 내가 낸 의견이 되니 이거 괜찮은건가? 싶었다. 내가 나도 모르게 압박한 거 아닌가?그런 생각이 들어서... 주제는 어필한 게 맞지만 조 이름은 정말정말 어필도 안 했다. 괜찮겠지. 😊
협업은 생각보다 정말! 재밌지만 어렵다. 깃이란 놈이 진짜... 잘만 알면 너무 잘 쓸 수 있을 것 같은데, 지금은 거의 기계처럼 push와 pull만 하고 있다. 팀 프로젝트 하면서도 배우고, 끝나면 진짜 제대로 공부해보고 싶다! 지금은 진짜 공부해보고 싶은 게 너무 많아ㅠ_ㅠ 그리고 타입스크립트는 전 기수분들의 프로젝트를 참고해서 하고 있다. 피그마는 거의 작업이 끝났고 떤님이 오늘 댓글도 추가로 해주셨다! 근데 문제는... 피그마를 그대로 옮길 수가 없어. 반응형 너무 어렵다... 내 생각엔 max-width를 줘야할 것 같은데(크몽처럼 어느정도이상 커지면 좌우 여백이 늘어나게) 이것도 마음대로 해볼 순 없어서 ' '.. 그냥 내 영역이 아니면 깃 충돌날까봐 아예! 안 건들이고 있다.
오늘 만든 메인이 꽤나 반응이... 있었다. 좋은 쪽으로도, 안 좋은 쪽으로도. 일단 거의 코드 배껴온건데 우와해주는 건 정말 죄책감이 느껴졌다ㅠㅠㅠㅋㅋㅋ 그리고 그냥 내 머릿속의 아이디어를 따라가는 거라서 좀 추상적으로 나온다... 그냥 코드 배껴서 기능만 구현해놓은 건데 깃 머지되고 남들도 다 볼 수 있게 되다보니까 다른 조 사람들도 보고... ~ 부끄러웠지만 피드백을 들을 수 있어서 좋았던 것 같다. 메인은 시간이 있으니 좀 천천히하고, 테마 리스트랑 디테일부터 해야겠다. api 나오면 잘 끼워맞출 수 있도록 목업을 잘 만들어보자고!!! 파이팅 파이팅
오늘 점심은 맥도날드~햄버거~ 근데 불고기 버거 이제 나에겐 너무나 조그매. 아님 정말 조그매진거니? 아 그리고 프로필 사진... 여러명이서 찍으면 좀 싸지 않을까 했는데 싼 게 45000원 정도 인 것 같다...흑흑 솔직히 난 한 번 찍어서 오래 쓸거니까 찍어도 좋은데 나머지 분들은 잘 모르겠다. 45000원은... 부담스러워하실 것 같다. 그니까 왜 안찍어줘요 이제>ㅁ<ㅠㅠㅠㅠ!!!!

샤워하는데 갑자기 찬물만 나왔다. 조금 기다리다가 기다릴 시간이 없어서 그냥 찬물로 씻었다. 찬물로 씻으니까 고등학생 때가 생각났다. 난방비를 못 내서 찬물로 씻고 부르스타로 요리하던... 지금은 그때가 너무너무 그립다. 돌아갈 수 있다면 막말로 22살까지만 살고 죽어도 좋다. 찬물 샤워하는 게 그때도 딱히 슬프거나 그러지 않았던 것 같다. 그냥 심장보다 높은 곳에 찬물을 부어야할 때 두렵던 느낌만이 생생할 뿐. 그래도 꽤나 익숙해져서 나중에 따뜻한 물이 나올때도 마무리로 찬물을 끼얹고 나왔던 것 같다. 지금은 찬물까진 아니고 시원한 물로 헹구고 나온다. 그때는 화장실이 한 계단 밑으로 내려가야 했고, 신발이 깨끗하지 않다고 느꼈던 것 같다. 그래서 나오기 전에 꼭 발을 찬물로 헹궜는데, 이 습관도 아직도 있다. 그냥 볼일만 보고 나올 때도 발을 씻친다. 습관은 정말 신기하다. 사실 사람의 인생은 습관으로 이루어진 게 아닐까. 일어나는 습관, 밥 먹는 습관, 연락하는 습관, 감사하는 습관, 미안해하는 습관, 눈치보는 습관, ...

🐻 프론트엔드
- 각자 맡은 부분 목업 작업 들어감

🐻‍❄️ 백엔드
- ERD 작성 중

🍚 점심
- 맥도날드 햄버거
- 다음엔 더 큰 거 먹거나 두 개(!) 먹을 거야.

🍬 간식
- 코로로 소다맛 젤리, 초콜릿 조금, 허니자몽블랙티(편의점)
- 편의점에서 간식 잔뜩 사다가 보답하고 싶은 사람들에게 좀 돌렸다.

☕️ 커피
- 아이스로 먹었다!
- 맞나...? 안 먹었나? 가물가물하다.

🎵 노래
-

👀 비고
-

서비스 시연 발표

🍮 순서는 상관없지만 다 들어가야 한다.

• 어떠한 서비스인지, 기획의도 및 계기도 중요하다.
• 서비스 구현 스택 넣는다.
• 사진까지 넣는 게 좋다. 사진이 없으면 포트폴리오로 인정 안해줄 수도 있다.
• 주력 기능은 gif를 미리 준비한다.
• 일반 유저 상대로 서비스 소개를 한다고 생각해야 한다. 코드-기술적 설명은 하지 않는다.
• 미리 예상 질문과 답변을 준비해야 한다. 없어도 자체적으로 질의응답을 할 수 있어야 한다.

기술 발표

🍮 한 팀 안에서 주제 안 겹치게 발표한다.

• 키노트, 파워포인트 5~7분(최대 10분)
• 작은 디바이스로 볼 수도 있으니 큼직큼직하게!
• 코드 풀이는 하지 않는다.
• 스티브 잡스가 했던 발표 같은 게 제일 좋은 발표다.

타입스크립트 공부
https://typescript-kr.github.io/

TypeScript 한글 문서