Bootstrap(부트스트랩) 기초 실습 (2)

본 글은 패스트캠퍼스의 “한 번에 끝내는 파이썬 웹 개발 초격차 패키지” 강의를 개인 실습하여 따라 한 것입니다.
기타 완성용 파일을 원하시는 분은 https://github.com/ParkYoungWoong/bootstrap5-github-landing 링크로 가주시면 됩니다.

youtube

• 유튜브의 영상 비율은 기본적으로 16:9이다.
• border-radius: : 모서리를 둥글게 깎아 준다.
• css에서 부모요소는 위쪽에 작성한다.

Features

• <div class="col-3"> : col이 3칸을 차지 (기본적으로 row는 12칸 차지)

• strong : 글씨를 두껍게 만들어 준다.
• padding: 30px 60px; : 패딩은 내부여백을 뜻함. 첫번째 30px은 위아래. 60px은 좌우를 동시에 지정

Google Maps

• # : css의 id 선택자는 #으로 시작
  • <div id="map"></div>
• id는 고유한 번호(중복X). css에서는 #map으로만 명시해줘도 된다. (조상요소 선택할 필요 없다.)
• 자바스크립트의 ?는 쿼리스트링으로 주소부분에 데이터를 태워서 전송할 수 있다는 의미. (key는 파라미터)
  • &는 다음 파라미터를 입력 (callback)
• const로 변수를 만듦 (하나의 객체 데이터 할당)
• new : 생성자 함수

Footer

• footer는 구분하는 태그
• webp 파일 확장명은 구글에서 만든 거임
• container : 어떤 특정한 영역을 화면에 가운데로 정렬시켜주는 역할
• width: 100%; : css에서 illustration에서 가지고 있는 이미지는 커서 container보다 넘쳐서 출력이 됐었는데 그 이미지의 container 너비 만큼 (100%) 지정
• transform: scale(-1,1); : 이미지의 크기를 x, y축으로 지정. -1은 x축기준으로 반전 효과
• opacity : 투명도

• class="list-unstyled" : ul과 li 스타일이 제거된다.
• a 태그는 기본적으로 파란색 글씨로 적용되어 있음
• class="text-decoration-none" : 밑줄을 제거
  • text-decoration: none; : css에서 이 코드를 적용하면 관련 요소 다 적용됨.
• transition : 몇 초에 걸쳐서 자연스럽게 변화할 것인가 (css) (전후 상태)
• d-flex : 수평 정렬 (html)

display: flex; justify-content: center; 적용 후

• margin-right: 20px; : 우측으로 여백이 요소사이에 20만큼 각각 생성
• href : 클릭하면 링크따라 이동
• margin: 0; : 마진 초기화

반응형 - @media

• 예제

@media (max-width: 600px) {
  .box {
    width: 200px;
    height: 200px;
    background-color: orange;
  }
}

• max-width: 뷰포트의 가로 너비 (~~px 이하일 때)
• min-width : ~이상 일 때
• all : 모든

반응형 - Offcavnas

• display : 화면에 보여지는 특성
• flex-grow: 1; : 차지하는 영역이 최대한 늘어남
• ms-2 : 외부여백이 2만큼 증가

• mb-4 : margin-bottom 4를 채워줌
• col-lg-7 : 뷰포트가 Large Size 보다 크면 컬럼을 7개 사용한다.
  • <div class="col-lg-7 col-12"> : 뷰포트가 large size보다 크지 않을 때 12개를 쓴다.

최종 완성본

• https://github.com/ingu627/bootstrap5-github-landing

Reference

• fastcampus
• bootstrap 공식링크