Bootstrap 14

[Bootstrap] 웹사이트 만들기 - SNS 섹션

SNS 섹션 결과물 index.html                        ART Cook SNS            Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, sequi.                                                                                                                                                                                                 d-flex : 자식 요소인 앵커 태그를 flexbox로 나열justify-content-evenly : 앵커 태그..

Web/Bootstrap 2024.10.25

[Bootstrap] 웹사이트 만들기 - 포트폴리오 섹션

포트폴리오 섹션 결과물PC 화면 패드 화면 모바일 화면 index.html ART Cook 포트폴리오 Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, amet! bg-dark : 섹션의 배경색 지정 container : 섹션의 자식 요소를 컨테이너 레이아웃으로 배치overflow-hidden : 거터에서 튀어나오는 부분을 숨겨줌 g-4 : 그리드 간의 거터(간격)를 4px 부여pb-5 : 패딩 바텀을 5px 부여 col-lg-4 : 화면 크기가 대형(large) 일 때, 해당 열이 그리드의 4칸을 차지 col-sm-6 : : 화면 크기가 소형(small) 일 때, 해당 열이 그리드의 6칸을 차지 img-thumbnail : 이미지에 테두리..

Web/Bootstrap 2024.10.25

[Bootstrap] 웹사이트 만들기 - 프로필 섹션

프로필 섹션 결과물 PC 화면 패드 화면 모바일 화면 index.html ART Cook Chef Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, eveniet! 이젠 Emmi Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur, ea dolores! Quibusdam ipsa natus delectus fugit accusantium. Similique voluptate, eaque dolor sequi enim sint culpa? Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta qui nisi dolores..

Web/Bootstrap 2024.10.25

[Bootstrap] 웹사이트 만들기 - 헤더 영역

헤더 영역 만들기 Bootstrap을 이용해서 웹사이트 만들기 실습을 진행해 보자. 헤더 영역 결과물 index.html 이젠 ART Cook 요리와 아트의 만남 아름다운 한 끼로 삶의 색체를 더하다 ART Cook 대표 요리 보기 d-flex : header 영역의 자식 요소들을 flexbox로 나열flex-column : 자식 요소들을 수평(기본값)이 아닌 수직으로 배치justify-content-center : 자식 요소들을 수평 가운데 정렬align-items-center : 자식 요소들을 수직 가운데 정렬 display-3 : 폰트 크기 확대fw-bold : 폰트 굵기 조절mb-5 : margin-bottom을 5px 부여 fs-2 : 폰트 사이즈 지정 lead : 폰트가 두드러지는 효과 btn..

Web/Bootstrap 2024.10.25

[Bootstrap] 반응형 레이아웃

중단점(Breakpoints) Bootstrap에서 반응형 레이아웃이 기기 또는 뷰포트 크기에 따라 어떻게 동작하는지를 결정하는 사용자 정의 가능한 너비이다.https://getbootstrap.com/docs/5.3/layout/breakpoints/ BreakpointsBreakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.getbootstrap.com 컨테이너(Containers) Bootstrap의 가장 기본적인 레이아웃 요소로, 주어진 장치나 뷰포트 내에서 콘텐츠를 포함하고 정렬할 수 있는 기능이다.https://get..

Web/Bootstrap 2024.10.25