[HTML,CSS深化]13.ルームリストの作成
結果
プライマリコード <div class="row4">
<div class="comment">
<div class="date">No. 151 참새 (2022.03.22 19:24)</div>
<div class="main">
<img id="main_img1"src="static/images/참새.png" alt="배경2사진">
<div class="main_text">
갑자기 미안한데 나도 참다 참다 말하는 건데<br>
저번에도 그러더니 진짜 실망이야 조금 너 이런식으로 계속
이면 나는 너에 대한 감정 쌓이고 쌓이고 쌓이면
<br>
<br>
싸이먼도미닉
</div>
</div>
</div>
</div>
//css
.row4{
display:flex;
flex-direction: column;
overflow:auto;
}
.comment{
margin:15px;
margin-bottom: 50px;
}
.date{
font-family: 'NeoDunggeunmo';
background-color: rgb(231,231,231);
padding:10px;
margin-bottom: 30px;
flex:0.1;
}
.main{
display:flex;
flex-direction: row;
align-items: center;
}
#main_img1{
background-image: url("./images/배경2.jfif");
background-size:contain;
width:30%;
}
.main_text{
font-family: 'NeoDunggeunmo';
font-size:15px;
margin-left: 20px;
}
解説
まず、画像の面では、輪郭画像と背景画像の2つを重ね合わせる.
イメージラベルにプロファイル画像のパスを追加し、イメージラベルにid値のbackground-イメージ属性を背景画像として設定します.
Reference
この問題について([HTML,CSS深化]13.ルームリストの作成), 我々は、より多くの情報をここで見つけました
https://velog.io/@sue06004/HTMLCSS심화-13.-방명록-만들기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<div class="row4">
<div class="comment">
<div class="date">No. 151 참새 (2022.03.22 19:24)</div>
<div class="main">
<img id="main_img1"src="static/images/참새.png" alt="배경2사진">
<div class="main_text">
갑자기 미안한데 나도 참다 참다 말하는 건데<br>
저번에도 그러더니 진짜 실망이야 조금 너 이런식으로 계속
이면 나는 너에 대한 감정 쌓이고 쌓이고 쌓이면
<br>
<br>
싸이먼도미닉
</div>
</div>
</div>
</div>
//css
.row4{
display:flex;
flex-direction: column;
overflow:auto;
}
.comment{
margin:15px;
margin-bottom: 50px;
}
.date{
font-family: 'NeoDunggeunmo';
background-color: rgb(231,231,231);
padding:10px;
margin-bottom: 30px;
flex:0.1;
}
.main{
display:flex;
flex-direction: row;
align-items: center;
}
#main_img1{
background-image: url("./images/배경2.jfif");
background-size:contain;
width:30%;
}
.main_text{
font-family: 'NeoDunggeunmo';
font-size:15px;
margin-left: 20px;
}
解説
まず、画像の面では、輪郭画像と背景画像の2つを重ね合わせる.
イメージラベルにプロファイル画像のパスを追加し、イメージラベルにid値のbackground-イメージ属性を背景画像として設定します.
Reference
この問題について([HTML,CSS深化]13.ルームリストの作成), 我々は、より多くの情報をここで見つけました
https://velog.io/@sue06004/HTMLCSS심화-13.-방명록-만들기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について([HTML,CSS深化]13.ルームリストの作成), 我々は、より多くの情報をここで見つけました https://velog.io/@sue06004/HTMLCSS심화-13.-방명록-만들기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol