Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 |
Tags
- 네이버클라우드
- 프롬프트
- 네이버
- ai기획
- IT
- 자바스크립트
- 코딩
- 생성형AI
- 챗GPT
- pm취준
- CSS
- 띵동코딩 #띵동코딩후기 #코딩공부 #코딩초보 #파이썬
- AI활용
- 기획자
- 웹사이트
- JavaScript
- 자바스크립트 #코딩 #띵동코딩 #기획자 #코딩공부
- ai기획자
- java
- 코딩공부
- 띵동코딩
- 자바
- 띵동코딩 #코딩공부 #자바스크립트 #fetch
- ChatGPT
- PM
- HTML
- AI
- 하이퍼클로바
Archives
- Today
- Total
슬기로운 AI생활 - 집요한 PM 에릭
띵동코딩 7주차 - 부트스트랩 활용 인스타그램 카피코딩 본문
스스로 해보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title> 띵동코딩-부트스트랩_인스타그램</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
body,h1,h2,h3,p,a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
.name{
color: gray;
font-size: 12px;
margin-bottom: 5px;
}
.title {
font-size: 14px;
}
.wrap{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
margin: 20px auto 0px auto;
}
.card-text{
font-size: 14px;
}
.user{
font-size: 14px;
font-weight: 500px;
}
.card-body > input {
border: none;
margin-top: 10px;
font-weight: 400;
}
.icons{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.icons > .bi-send{
margin-right: auto;
}
.icons > .bi-suit-heart{
margin-right: 10px;
}
.icons > .bi-chat{
margin-right: 10px;
}
.me{
width: 280px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 5px;
margin-bottom: 5px;
}
.me > img{
width: 25px;
height: 25px;
border-radius: 100%;
margin-right: 10px;
}
.me > span{
font-size: 14px;
font-weight: 500;
margin-right: auto;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="name">SKUUKZKY</h1>
<p class="title">게시물</p>
<div class="me">
<span>SKUUKZKY</span>
<i class="bi bi-three-dots"></i>
</div>
<div class="card" style="width: 18rem;">
<img src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/10/18/a706569b-e8db-4c05-bbd1-2c48a53a0f2f.jpg" class="card-img-top" alt="...">
<div class="card-body">
<div class="icons">
<i class="bi bi-suit-heart"></i>
<i class="bi bi-chat"></i>
<i class="bi bi-send"></i>
<i class="bi bi-bookmark"></i>
</div>
<p class="card-text">1500명이 좋아합니다</p>
<p class="user">SKUUZKY</p>
<input class="form-control form-control-sm" type="text" placeholder="...댓글 달기" aria-label=".form-control-sm example">
</div>
</div>
</div>
</body>
</html>
한 걸음 더 : 댓글 내용 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.0/font/bootstrap-icons.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<title> 띵동코딩-부트스트랩_인스타그램</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
* {
font-family: 'Noto Sans KR', sans-serif;
}
body,h1,h2,h3,p,a {
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
.name{
color: gray;
font-size: 12px;
margin-bottom: 5px;
}
.title {
font-size: 14px;
}
.wrap{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 300px;
margin: 20px auto 0px auto;
}
.card-text{
font-size: 14px;
}
.user{
font-size: 14px;
font-weight: 500px;
}
.card-body > input {
border: none;
margin-top: 10px;
font-weight: 400;
}
.icons{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.icons > .bi-send{
margin-right: auto;
}
.icons > .bi-suit-heart{
margin-right: 10px;
}
.icons > .bi-chat{
margin-right: 10px;
}
.me{
width: 280px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-top: 5px;
margin-bottom: 5px;
}
.me > img{
width: 25px;
height: 25px;
border-radius: 100%;
margin-right: 10px;
}
.me > span{
font-size: 14px;
font-weight: 500;
margin-right: auto;
}
.comment{
font-size: 12px;
color: gray;
margin-top: 5px;
font-weight: normal;
margin-bottom: 5px;
}
.last{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 14px;
}
.comment-name{
margin-right: 10px;
}
.comment-msg{
margin-right: auto;
}
.last > i {
color: red;
margin-left: auto;
}
</style>
</head>
<body>
<div class="wrap">
<h1 class="name">SKUUKZKY</h1>
<p class="title">게시물</p>
<div class="me">
<span>SKUUKZKY</span>
<i class="bi bi-three-dots"></i>
</div>
<div class="card" style="width: 18rem;">
<img src="http://talkimg.imbc.com/TVianUpload/tvian/TViews/image/2021/10/18/a706569b-e8db-4c05-bbd1-2c48a53a0f2f.jpg" class="card-img-top" alt="...">
<div class="card-body">
<div class="icons">
<i class="bi bi-suit-heart"></i>
<i class="bi bi-chat"></i>
<i class="bi bi-send"></i>
<i class="bi bi-bookmark"></i>
</div>
<p class="card-text">1500명이 좋아합니다</p>
<p class="user">SKUUZKY</p>
<p class="comment">댓글 400개 모두 보기</p>
<div class="last">
<span class="comment-name">ddingdong</span>
<span class="comment-msg">너무 예쁘세요!</span>
<i class="bi bi-suit-heart"></i>
</div>
<input class="form-control form-control-sm" type="text" placeholder="...댓글달기" aria-label=".form-control-sm example">
</div>
</div>
</div>
</body>
</html>
'코딩공부' 카테고리의 다른 글
| 띵동코딩 10주차 개발 일지 : Javascript 복습 (0) | 2022.08.08 |
|---|---|
| 띵동코딩 9주차 개발 일지 : Javascript 기초 (0) | 2022.08.02 |
| 띵동코딩 8주차 - 부트스트랩 활용 파타고니아 홈페이지 카피코딩 (0) | 2022.07.25 |
| 띵동코딩 6주차 웹 사이트 카피코딩 - 개발일지 (0) | 2022.07.11 |
| 띵동코딩 5주차 웹 사이트 카피코딩 - 개발일지 (0) | 2022.07.04 |
'코딩공부' Related Articles
more
