[TIL] 내일배움캠프 신청 후기 + 1일차

혼자 준비하는데 계속 떨어지니까 내가 부족한 것 같기도 하고, 스스로 준비하는 것보다 다른 사람들과 함께 하는 게 더 도움이 될 거라고 생각해서 부트캠프인 내일배움캠프를 신청했다. 신청 과정은 간단했다. 300자 이내의 지원서를 작성해서 제출하면, 며칠 내로 연락이 온다는 안내를 받았는데, 3~4시간 만에 합격 문자를 받았다. 기간이 얼마 남지 않아서 그런지 빠르게 합격된 건지 모르겠지만 탈락 이메일만 받다가 합격이어서 기분은 조금 좋았다 ㅋㅋㅋㅋ

학습 내용

학습 자료로 웹 개발 기초 강의와 SQL 기초 강의를 받았고 그걸로 공부하고 있다. 아는 것들이라고 대충 보지 않고, 복습하는 느낌으로 꼼꼼히 듣고 있다. 간간히 헷갈렸던 CSS의 레이아웃(inline, inline-block, block, flex, grid) 대해서 다시 찾아보면서 공부하는게 도움이 됐다.

오늘은 HTML, CSS, Bootstrap으로 간단한 데모 페이지 만드는 강의를 들었다.

HTML

기본적인 요소들을 복습했다. 항상 보니까 익숙한 요소들이다.

 div, p, span, h1, img, button, input

CSS

헷갈리는 레이아웃을 찾아 정리했다.

• inline
  • span, a, img 등의 요소가 포함된다.
  • 요소가 수평으로 배치된다. 너비와 높이는 컨텐츠에 따라 자동으로 결정된다. margin과 padding은 좌우에만 적용된다.
• inline-block
  • display: inline-block을 적용하면 된다.
  • inline과 block의 특성을 모두 가진다. 기본적으론 수평 배치면서 너비와 높이를 지정할 수 있다.
• block
  • div, p, h1 등의 요소가 포함된다.
  • 요소가 수직으로 배치된다. 전체 가로폭을 차지하고, 너비와 높이를 지정할 수 있다.
• flexbox
  • display: flex 또는 display: flex-inline을 적용하면 된다.
  • 1차원 레이아웃 모델이다. 주 축(main axis)이랑 교차 축(cross axis)를 이용해서 레이아웃을 조절한다
  • justify-content - 주 축에서의 아이템 정렬 방식을 결정한다. [center, flex-start, flex-end 등]
  • align-items - 교차 축에서의 아이템 정렬 방식을 결정한다. [flex-start, flex-end, center, stretch]
  • flex-direction - 주 축의 방향을 설정한다. [row, column, row-reverse, column-reverse]
  • flex-wrap - 줄바꿈을 설정한다. [nowrap, wrap, wrap-reverse]
  • 각 속성들이 어떻게 변화시키는지 이미지도 첨부하면 이해하기 좋겠지만 그렇게 하면 TIL 쓰는데 시간을 뺏겨서 패스.
• grid
  • display: grid 또는 display: grid-inline을 적용하면 된다.
  • 2차원 레이아웃 모델이다. 행과 열로 공간을 분할하고 아이템을 배치한다.
  • grid-template-rows, grid-template-columns - 행과 열의 크기를 설정한다.
  • grid-gap - 두 간격의 단축 속성이다.
  • grid-area - 그리드 영역 이름 또는 위치를 설정한다.

Bootstrap

필요할 때 그때그때 잘 찾아서 갖다 쓰는 부트스트랩.. 정리할게 딱히 없다. 이번 강의에선 Button을 썼다.