<body>
<div class="banner">
<div class="bn-text-box">
<p class="pr70065">더 나은 미래, 풍요로운 삶<br> 피코그램의 가치입니다.</p>
<p class="pr60020">우리의 비전은 자연과 조화롭게 번성하고 인류의 번영을 촉진하는 <br> 지속 가능한 세상을 만드는데 중점을 두고 있습니다.</p>
</div>
</div>
<br> : 줄바꿈
.banner {
background-color: gray;
/* 화면 높이 비례 -> 화면 해상도 자동계산 적용 */
height: 100vh;
/* 배경 이미지 속성 ..을 써야된다. */
background-image: url(../image/image\ 1.jpg);
/* 배경 이미지 사이즈 조절 */
background-size: cover;
/* 배경 이미지 중앙 정렬 */
background-position: center;
/* 배경 이미지 여백 설정 */
background-repeat: repeat;
/* 가운데 정렬 */
display: flex;
/* 중앙 정렬 */
align-items: center;
/* 가로 중앙 정렬 */
justify-content: center;
}
.bn-text-box {
border: 1px solid red;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
/* nth-child()는 자식을 선택 해야한다. */
.bn-text-box > p:nth-child(1) {
width: 638px;
}
.bn-text-box > p:nth-child(2) {
width: 500px;
}
'코딩 > 복습' 카테고리의 다른 글
| 251027 picogram (top-bar) (0) | 2025.10.27 |
|---|---|
| 251017 SPC 모작 (0) | 2025.10.17 |
| 251013 picogram (top-bar, banner) (0) | 2025.10.13 |
| 251001 Market kurly (list) (0) | 2025.10.01 |
| 250927 라이나 생명 박스 만들기 (0) | 2025.09.27 |