📝 TIL

[TIL] CSS flex, table, 부트스트랩

오늘 ONEUL 2022. 3. 29. 02:14

✍ Today I Learned

  • display: flex; display: table; 을 이용하면 중앙 정렬을 간단하게 할 수 있다.
.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.boxwrap {
    display: table;
}
.boxwrap .box {
    display: table-cell;
    table-layout: fixed;
    vertical-align: middle;
    text-align: center;
}
  • 쇼핑몰 페이지가 PC와 모바일 서버를 따로 두는 이유
    1. 트래픽 분산을 위해
    2. 기획적인 부분(노출되는 품목이 다름)
  • 부트스트랩을 사용하는 2가지 방법
    1. 다운 받아서 사용
      • 장점 - 내가 사용하는 버전으로 최적화 가능
      • 단점 - 리소스가 많이 사용됨
    2. CDN 사용 (Content Delivery Network)
      • 장점 - 외부에서 리소스가 들어오기 때문에 트래픽 적음. 알아서 버전업 됨.
      • 단점 - 버전업으로 인해 선택자의 변동 가능성 있음. 외부 리소스 접속 상황을 보장할 수 없음.
  • bootstrap.min.css 에서 min의 의미는 'minify 축소하다'이다. 실제 개발할 때는 가독성을 위해 정리되어 있는 css 파일을 이용하고, 배포할 때에는 모든 줄 바꿈, 공백 등등을 최소화하여 용량을 줄인 min 파일을 사용한다.
  • js 보다 css를 먼저 임포트 해야 한다.
  • 다음은 부트스트랩 class에 관련한 내용
    • .container 반응형 고정 너비 컨테이너 / .container-fluid 뷰포트의 전체 너비 컨테이너
    • .pt-5 pt는 padding-top의 약자, 뒤의 숫자는 다음을 의미한다.
      • 0 - sets margin or padding to 0
      • 1 - sets margin or padding to .25rem
      • 2 - sets margin or padding to .5rem
      • 3 - sets margin or padding to 1rem
      • 4 - sets margin or padding to 1.5rem
      • 5 - sets margin or padding to 3rem
      • auto - sets margin to auto
    • .text-decoration-none .text-black a태그 효과 제거할 때 유용
    • 부트스트랩 참고자료
  • 모든 걸 부트스트랩으로 할 수는 없지만 큰 그림을 그릴 수 있다.
  • 부트스트랩으로 반응형 페이지를 만들면서 느낀 점
    • nav-bar 양쪽 정렬은 <ul> 태그 2개를 놓고 부모 요소인 <div> 태그에 justify-content-between 설정
    • carousel 높이를 고정하고 싶으면 이미지 높이 px로 고정
    • carousel-caption 은 이미 position 설정이 되어 있기 때문에 flex로 중앙 정렬 하기 어려움
    • 콘텐츠 정렬은 2가지 방법이 있음
      • float 정렬 - a 태그로 감싼 card에 display: inline-block 설정(block도 가능), width: 100%;, float: left; 설정
        미디어쿼리로 a 태그 width값 % 조절
        float 설정했으므로 부모 요소에 overflow: auto; 설정
      • flex 정렬 - a 태그들의 부모 요소에 display: flex;, flex-direction: column; 설정
        미디어쿼리로 2개 이상부터 flex-direction: row;, flex-wrap: wrap; 설정
        width값 대신 flex: 50% 이런 식으로 설정
    • 위아래 같은 padding 값을 주어야 줄을 맞출 수 있음
저작자표시