250x250
반응형
Notice
Recent Posts
Recent Comments
Link
개발세발
[HTML/CSS][모각코][13] 방명록 만들기 본문
728x90
반응형
SMALL
[제출본]
https://codemate.kr/@yuuulya/day13-방명록-만들기
[day13] 방명록 만들기 by yuuulya | 코드메이트
[코드] guestbook.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <title>2021 MINI HOMEPAGE</title> <link rel="s
codemate.kr
guestbook.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<title>2021 MINI HOMEPAGE</title>
<link rel="stylesheet" href="../static/images/font.css" />
<link rel="stylesheet" href="../static/images/home.css" />
<link rel="stylesheet" href="../static/images/layout.css" />
<link rel="stylesheet" href="../static/images/guestbook.css" />
<script src="https://kit.fontawesome.com/c21d7630fc.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="bookcover">
<div class="bookdot">
<div class="page">
<div class="container">
<div class="left">
<div class="first">
<span class="lefttop">
TODAY
<font color="#f74545">25</font>
| TOTAL 248956
</span>
</div>
<div class="profile">
<div class="profileimg"></div>
<div class="profilemention">
<br>
오늘도 <br>
코딩을 부수기 위해<br>
열심히 노력했지만<br>
<br>
언제나 부셔지는건
<br>
나였다.....
</div>
<div class="profilebottom">
<p class="coding">
개발세발 (♀)
</p>
<div class="dropdown">
<button class="dropbt">
<span>파도타기</span>
<span> ▼</span>
</button>
<ul class="dropdown-content" >
<li><a href="https://bluepinetree.tistory.com/" target='_blank'>Tistroy</a></li>
<li><a href="https://cafe.naver.com/codeuniv?iframe_url=/MyCafeIntro.nhn%3Fclubid=30026525" target='_blank'>코뮤니티</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="center">
<div class="title">
<div class="my">나만થ 공간 나થ 싸ગ월⊑</div>
<div class="address"> https://url주소/나중에입력</div>
</div>
<div class="main">
<div class="guest_box">
<div class="text_line">No.190 이건우 <i class="fa-solid fa-house"></i> (2002. 2. 30 09:14)</div>
<div class="guest">
<div class="guestleft1">
<img src="images/aba1.png" alt="게스트프로필" />
</div>
<div class="guestright">
<br>
안 녕~
<br>
잘 ㅈㅣ ㄴㅐ?
<br>
요즘 어떻게 ㅈㅣㄴㅐ는ㅈㅣ 궁금ㅎㅐㅅㅓ ....
</div>
</div>
<div class="text_line">No.190 김기태 <i class="fa-solid fa-house"></i> (2002. 2. 30 09:14)</div>
<div class="guest">
<div class="guestleft2">
<img src="images/aba3.png" alt="게스트프로필" />
</div>
<div class="guestright">
<br>
오ŀ
<br>
날씨 진ㅉr
<br>
오ŀ방 추워
</div>
</div>
<div class="text_line">No.189 이용운 <i class="fa-solid fa-house"></i> (2001. 12. 32 13:39) </div>
<div class="guest">
<div class="guestleft3">
<img src="images/aba2.png" alt="게스트프로필" />
</div>
<div class="guestright">
<br>
있잖ㅇr..
<br>
ㄴr øł제 먹은 치킨 ㅈΓ꾸 생각ㄴr
<br>
언제 또 먹으러 갈까???ㅎㅎㅎ
</div>
</div>
</div>
</div>
</div>
<div class="menubar">
<div id="home"><a href="./home.html">홈</a></div>
<div id="diary"><a href="./diary.html">다이어리</a></div>
<div id="photobook"><a href="./photobook.html">사진첩</a></div>
<div id="guestbook"><a href="#">방명록</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
guestbook.css
.guest_box {
margin-top: 10px;
width: 580px;
height: 530px;
overflow-y: scroll;
overflow-x:hidden;
}
.text_line {
height: 30px;
padding-top: 10px;
padding-left: 10px;
margin-bottom: 20px;
font-weight: bold;
background-color: rgb(216, 213, 213);
}
.guest img{
width: 150px;
align-items: center;
justify-content: center;
}
.guest{
height: 180px;
width: 600px;;
display: flex;
flex-direction: row;
margin-bottom: 70px;
margin-top: 40px;
}
.guestleft1 {
width: 150px;
background-image: url(./back1.png);
background-repeat : no-repeat;
background-size : cover;
margin-left: 15px;
margin-bottom: 15px;
margin-right: 15px;
}
.guestright{
font-weight: bold;
line-height: 30px;
}
.guestleft2 {
width: 150px;
background-image: url(./back3.png);
background-repeat : no-repeat;
background-size : cover;
margin-left: 15px;
margin-bottom: 15px;
margin-right: 15px;
}
.guestleft3 {
width: 150px;
background-image: url(./back2.png);
background-repeat : no-repeat;
background-size : contain;
margin-left: 15px;
margin-bottom: 15px;
margin-right: 15px;
}📝[REVEIW]
요즘 하루 왠종일 웹만 만들었더니 조금 빨라진듯?
첫날 만든거 뒤돌아봤는데 그래도 꽤 성장했긴 했구나 싶어서 괜시리 뿌듯했다.
전보다는 확실히 제시된걸로 이래저래 만들어 나가는 감을 잡은 듯 하다.
728x90
반응형
'인터넷 배움 > 코뮤니티- 모각코(HTMLㆍCSS 심화편)' 카테고리의 다른 글
| [HTML/CSS][모각코][15] Github으로 내 미니홈피 호스팅하기 (0) | 2022.02.24 |
|---|---|
| [HTML/CSS][모각코][14] 나의 Github 만들기 (0) | 2022.02.24 |
| [HTML/CSS][모각코][12] 비밀글(txt 파일) 불러오기 (0) | 2022.02.23 |
| [HTML/CSS][모각코][11] 미니홈피 다이어리 만들기 (0) | 2022.02.21 |
| [HTML/CSS][모각코][10] 미니홈피 사진첩 만들기 (0) | 2022.02.18 |
'인터넷 배움/코뮤니티- 모각코(HTMLㆍCSS 심화편)' Related Articles
more
