728x90
728x90
내가 만든 과제: 더 꾸민 버전
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body style="background-image:url('source/backgroundsea.jpeg');">
<div class="mainblogbox">
<p class="title">insidepixce</p>
<p>1시간 전</p>
<div class="titletext">
<p><strong>우리의 청춘을 썩히지 않아</strong></p>
<p>너를 만나 같이 더 빛나, 아름다운 시간만 쌓자! 시작이라는 걸 넌 믿을 수 있겠니? 이제야 사랑을 알 것 같아미래의 미래에도 널 사랑한 나란 걸, Ready or not, 가는 거야 나를 믿어 here we go, here we go 온 세상과 저 광야 위로 후회 없이 사랑했다고 말하게 </p>
</div>
<div class="titleimage">
<img src="source/Myselfie.jpeg" class="profile">
</div>
</body>
</html>
- 시행착오
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="blog-content"> </div>
<div class= "blog-name">
<img src="source/Myselfie.jpeg" class="blog-profile">
<div>
<h4 class= 'testy'>insidepixce</h4>
<p class = 'testy'>1시간 전</p>
</div>
</div>
<div class="blog-img">
<img src="source/Myselfie.jpeg" width="100%">
</div>
</div>
</body>
</html>.blog-content {
width: 80%;
height: 200px;
background : Red;
float:left;
}
.blog-img {
width: 20%;
height:200px;
background:yellow;
float:left;
}
.container{
width:800px;
float:left;
}
.blog-profile {
width: 50px;
float: left;
}
.blog-name {
float:left;
}
.testy{
float:left;
}
.blog-content {
width: 80%;
height: 200px;
background : Red;
float:left;
}
.blog-img {
width: 20%;
height:200px;
background:yellow;
float:left;
}
.blog-profile {
width: 50px;
float: left;
}
.blog-name {
float:left;
}
.testy{
float:left;
}
.profile {
width: 100px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
border: 2px solid white;
float:left;
}
.title {
text-align: center;
letter-spacing:2px;
margin-top: 30px;
float:left;
margin-bottom: 5px;
}
.ido {
color:black;
text-align:center;
margin-top: 0px;
margin-bottom: 0px;
float:left;
}
.texty {
text-align: center;
color: black;
font-weight: bolder;
opacity: 1;
float:left;
}
#special {
color: #00AAFF ;
}
.box {
width: 500px;
height: 500px;
background-color: rgba(12, 112, 242, 0.5); /* 반투명한 파란색 */
padding: 20px;
box-shadow: 0 0 0 5px rgba(1, 1, 0, 0.5);
border-radius: 25px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
float:left;
}
시행착오 끝에 성공은 하긴 했으나.. \
순정 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div class="container">
<div class="blog-content">
<img src="source/Myselfie.jpeg" class="blog-profile">
<div class="blog-name">
<h4 style="margin: 8px">insidepixce</h4>
<p style="margin: 8px">1시간 전</p>
</div>
<div class="blog-name">
<h4>블로그글</h4>
<p>우리의 미래는 찬란히 빛날거야</p>
</div>
</div>
<div class="blog-img">
<img src="source/Myselfie.jpeg" width="100%">
</div>
</div>
</body>
</html>.container {
width:800px;
color: black;
float:left;
}
.blog-content{
width: 80%;
height: 200px;
background: #eee;
float:left;
}
.blog-img {
width: 20%;
height:200px;
background:yellow;
float:left;
}
.blog-name {
width: 70%;
height: 50px;
background: #eee;
float:left;
}
.blog-profile{
width:50Px;
float:left;
}
728x90
300x250
'2023 공부한것들' 카테고리의 다른 글
| [코딩애플 Html/css] 9강 : 셀렉터를 이용해 css 코드 양 줄이기 (0) | 2023.06.28 |
|---|---|
| 20230627 오전 회고록 (0) | 2023.06.27 |
| [코딩애플 Html/css] 6강 : 레이아웃 만들기 1: 호환성 좋은 float (0) | 2023.06.27 |
| [TIL] 20230626 (0) | 2023.06.27 |
| 202306026 오후 회고록 (0) | 2023.06.27 |