수정 블로그

내비게이션 영역 결과물PC 화면 모바일 화면 리스트 클릭 시 index.html 이젠 Cook 홈 쉐프 소개 포트폴리오 서비스 블로그 ..

뉴스 섹션 결과물PC 화면 [뉴스보기] 클릭 시 모달 실행 모바일 화면 index.html ART Cook 뉴스 Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt recusandae, vel dolor officiis, doloremque ratione cumque deleniti quibusdam impedit pariatur delectus? Accusantium quod magnam facere nulla ducimus ullam harum quae! ..

블로그 섹션 결과물PC 화면 패드 화면 모바일 화면 index.html ART Cook 블로그 Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat, sequi. 블로그 1 Some quick example text to build on the card title and..

서비스 섹션 결과물PC 화면 모바일 화면 index.html ART Cook 서비스 Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, voluptates! 케이터링 Lorem ipsum do..

연락처 섹션 결과물PC 화면 모바일 화면 index.html Contact Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, ad. 이메일 아이디@naver.com 전화번호 ..

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

포트폴리오 섹션 결과물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 : 이미지에 테두리..

프로필 섹션 결과물 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..

헤더 영역 만들기 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..

중단점(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..