728x90
반응형
1. CSS 코드
/*첫번째 구간*/
.top-layout {
display: flex;
justify-content: center; /*가운데오게*/
}
.top {
width: 900px;
display: flex;
justify-content: center; /*가운데오게*/
padding-bottom: 40px;
}
.face-img {
height: 300px;
width: 260px;
margin: 30px auto;
}
.top-word {
text-align: left;
width: 800px;
height: 330px;
padding-top: 30px;
padding-left: 20px;
border-radius: 4px;
flex-direction: column;
}
/*두번째 구간*/
.container-layout {
display: flex;
justify-content: center; /*가운데오게*/
}
.conatiner-cell-layout {
border: 15px solid transparent; /* 사진간의 간격*/
padding: 0 10px 10px 15px;
min-height: 280px;
min-width: 295px;
}
.cell-img {
max-width: 350px;
width: 100%;
height: 334px;
}
.cell-common {
text-align: left;
height: auto;
background-image: none;
position: relative; /*밑에 색상이 사진 위로 오게*/
margin-top: -47px; /*밑에 색상이 사진 위로 오게*/
margin-right: 20px; /*밑에 색상이 사진보다 작게*/
margin-left: 20px; /*밑에 색상이 사진보다 작게*/
}
.back-color01 {
background-color: #f9f3cc;
}
.back-color02 {
background-color: #d7e5ca;
}
.back-color03 {
background-color: #8eaccd;
}
.cell-common-layout {
justify-content: flex-start;
flex-direction: column; /*사진 밑에 문구의 첫번째 줄 영향*/
display: flex; /*사진 밑에 문구의 첫번째 줄 영향*/
}
.cell-text {
margin: 15px 0 0 20px; /* 문구있는 곳: 선 간격 설정*/
margin-right: 16px;
font-size: 1.5rem;
}
.cell-line {
border-style: solid; /* 선 그리기 */
border-bottom-width: 0; /* 선 얇게 */
border-color: black;
width: 35px; /* 선 길이 */
margin: 25px auto 0 10px;
}
.cell-word {
padding-left: 20px;
}
.cell-word a {
text-decoration: none;
color: black;
}
@media screen and (max-width: 768px) {
/*화면이 작아지면 상단 메뉴 유동적으로 변경*/
.container-layout {
flex-direction: column; /*아이템 방향을 아래로 설정*/
align-items: center; /*메뉴는 중간에 정렬하고싶음(중심축:수직)*/
width: 100%; /*너비 100%로 설정 안하면 align-items:center 기능이 안보임*/
}
.top {
flex-direction: column; /*아이템 방향을 아래로 설정*/
align-items: center; /*메뉴는 중간에 정렬하고싶음(중심축:수직)*/
width: 100%; /*너비 100%로 설정 안하면 align-items:center 기능이 안보임*/
}
.top-word {
flex-direction: column; /*아이템 방향을 아래로 설정*/
align-items: center; /*메뉴는 중간에 정렬하고싶음(중심축:수직)*/
margin-top: -47px; /*밑에 색상이 사진 위로 오게*/
width: 500px;
}
}2. HTML 코드
<body>
<article class="detail-layout">
<div class="top-layout">
<div class="top">
<img class="face-img" src="../assets/img/khm.jpg" />
<div class="top-word back-color01">
<div class="cell-line"></div>
<h4 class="cell-text">
반가워요 :-) <br />
5개월동안 잘 지내면 좋겠습니다!
</h4>
<div class="cell-line"></div>
<p class="cell-word">
<br />
<i class="fa-brands fa-github fa-spin fa-xl"></i>
<a target="_blank" href="https://github.com/zerotonine2da/">
https://github.com/zerotonine2da [깃허브]</a
><br />
<br />
<i class="fa-solid fa-t fa-xl"></i
><a target="_blank" href="https://zerotonine2da.tistory.com">
https://zerotonine2da.tistory.com [티스토리]</a
><br />
</p>
</div>
</div>
</div>
<div class="container-layout">
<div class="conatiner-cell-layout">
<img class="cell-img" src="../assets/img/khm-1.jpg" />
<div class="cell-common back-color01">
<div class="cell-common-layout">
<div class="cell-line"></div>
<h4 class="cell-text">Who am i</h4>
<div class="cell-line"></div>
<p class="cell-word">
저는 요즘 베이글과 카페라떼를 <br />
좋아하는데요. <br />
베이글+크림치즈가 맛있더라고요! <br />
그래서 사실,, <br />
아침에 게더 입장해서 빵 먹고있습니다. <br />
5개월동안 잘 부탁드립니다.
</p>
</div>
</div>
</div>
<div class="conatiner-cell-layout">
<img class="cell-img" src="../assets/img/khm-2.png" />
<div class="cell-common back-color02">
<div class="cell-common-layout">
<div class="cell-line"></div>
<h4 class="cell-text">좋아하는 건..</h4>
<div class="cell-line"></div>
<p class="cell-word">
야외에 있는걸 좋아해서 <br />
카페 테라스나 한강 가는 것을 <br />
좋아하는데요. <br />
그래서 사실,, <br />
주말만 기다리고 있습니다. <br />
5개월동안 참아보겠습니다.
</p>
</div>
</div>
</div>
<div class="conatiner-cell-layout">
<img class="cell-img" src="../assets/img/khm-3.jpg" />
<div class="cell-common back-color03">
<div class="cell-common-layout">
<div class="cell-line"></div>
<h4 class="cell-text">만나서 반가워요</h4>
<div class="cell-line"></div>
<p class="cell-word">
개발자라는 목표를 가지고 <br />
5개월동안 함께하게 되어 <br />
모두들 반갑습니다.<br />
저도 빠르게 구현하고싶은데<br />
시간이 좀 걸리는 편입니다. <br />
5개월동안 열심히 해보겠습니다.
</p>
</div>
</div>
</div>
</div>
</article>
</body>
[출처]
* 무료이미지 : https://pixabay.com/ko/
반응형
'CSS' 카테고리의 다른 글
| Grid (0) | 2023.10.23 |
|---|---|
| Flex (0) | 2023.10.19 |
| [웹페이지 #01] 3. 메인페이지 상단 공지 & 하단 푸터 (HTML, CSS) (1) | 2023.10.07 |
| [웹페이지 #01] 1.반응형 헤더 (HTML, CSS) (1) | 2023.10.06 |