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

프로필 섹션 결과물

PC 화면

 
패드 화면

 
모바일 화면

 

index.html

<!-- 쉐프 소개 섹션 -->
    <section class="container py-5" id="about-chef">
        <div class="text-center py-5">
            <h2 class="fw-bold">ART Cook Chef</h2>
            <p class="lead text-muted">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem, eveniet!</p>  
        </div>
        <div class="row mb-5 justify-content-center align-items-center">
            <div class="col-md-5">
                <img src="images/chef.jpg" class="img-fluid" alt="쉐프 프로필 사진">
            </div>
            <div class="col-md-7 col-lg-5 px-lg-5">
                <h3 class="fw-bold mb-3">이젠 Emmi</h3>
                <p class="lh-lg">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?</p>
                <p class="lh-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta qui nisi dolores. Hic provident, quisquam ullam tenetur a nihil esse fugit eius nostrum distinctio! Porro.</p>
            </div>
        </div>
    </section>

 
<section>

• container : 웹 페이지의 정해진 너비에 맞춰 레이아웃을 자동으로 설정
• py-5 : 수직 방향 패딩 값 5 부여

 
<div>

• text-center : 텍스트 중앙 정렬
• text-muted : 텍스트의 색상을 흐리게 만듦
• col-md-7 : 화면 크기가 중간(medium) 일 때, 해당 열이 그리드의 7칸을 차지(최대 12칸)
• col-lg-5 : 화면 크기가 대형(large) 일 때, 해당 열이 그리드의 5칸을 차지
• px-lg-5 : 화면 크기가 대형(large) 일 때, 수평 방향 패딩 값 5px 부여

 
<img>

• img-fluid : 이미지 사이즈를 반응형으로 설정

 
<p>

• lh-lg : 텍스트의 행간 정렬

 

폰트 설정

Google Fonts 사이트에 들어가서 원하는 폰트를 선택한다. [Get embeded code]를 클릭 후 css 파일에 복사한다.
https://fonts.google.com/

Browse Fonts - Google Fonts