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 | 31 |
Tags
- localstorage
- getMinutes
- 웹개발종합반
- SQL
- LEFTJOIN
- 백준3052번
- appendChild
- classname
- padStart
- sanitize-html
- javascropt
- gethours
- 시간보여주기
- 스택큐
- 스파르타코딩클럽
- Login
- MySQL
- node.js
- dateobject
- 자바스크립트
- 프로그래머스
- JavaScript
- JavaScript#조건문#conditional
- function
- classList
- java기초
- 올바른괄호
- padEnd
- JOIN
- Database
Archives
- Today
- Total
just do it
웹개발종합반(영화모아놓은 웹페이지만들기, 부트스트랩 카드) 본문
영화 추가하는 페이지 메인부분 만들기
-div 안의 내용 가운데 정렬하기
-구글폰트가져오기
-배경색 어둡게
-배경색 넣기
-배경색 없애기
-마우스 댔을때 테두리 굵게하기
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- 남이만들어 놓은거 가져다 쓰는 부분임 -->
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
/* 구글폰트가져오기 */
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 위 네줄이 div안의 내용물 가운데로 정렬함, padding쓸필요없이 */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
/* 배경넣는 세줄 url 부분말고 그 앞에 ,앞부분은 배경어둡게하기 */
}
.mytitle>button {
width: 250px;
height: 50px;
background-color: transparent;
/*배경색 없애줘*/
border: 1px solid white;
/*버튼테두리굵기 1, 실선, 흰색*/
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle>button:hover {
/*마우스 갖다뎄을때만, 테두리 더굵게*/
border: 2px solid white;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생의 최고의 영화들</h1>
<button>영화 추가하기</button>
</div>
</body>
</html>
|
cs |
이제 부트스트랩이용해서 아래에 카드만들기
https://getbootstrap.com/docs/5.0/components/card/
Cards
Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
getbootstrap.com
html의 코드가 복잡해지면 > 버튼으로 숨기고 코드위계살피기
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
|
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
</div>
</div>
|
cs |
포스팅박스 완성하기
위와 같은 부트스트랩 폼 이용
코멘트등록하는 부분 까지 완성해보았다.
|
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<!-- 남이만들어 놓은거 가져다 쓰는 부분임 -->
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
/* 구글폰트가져오기 */
.mytitle {
background-color: green;
color: white;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
/* 위 네줄이 div안의 내용물 가운데로 정렬함, padding쓸필요없이 */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
background-position: center;
background-size: cover;
/* 배경넣는 세줄 url 부분말고 그 앞에 ,앞부분은 배경어둡게하기 */
}
.mytitle>button {
width: 250px;
height: 50px;
background-color: transparent;
/*배경색 없애줘*/
border: 1px solid white;
/*버튼테두리굵기 1, 실선, 흰색*/
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle>button:hover {
/*마우스 갖다뎄을때만, 테두리 더굵게*/
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1200px;
margin: 20px auto 20px auto;
}
.mypost{
width: 500px;
margin : 20px auto 20px auto;
padding : 20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn{
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.mybtn > button{
margin-right: 20px; /*버튼 두개 사이에 공간만듦*/
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생의 최고의 영화들</h1>
<button>영화 추가하기</button>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화url</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">영화제목</h5>
<p class="card-text">코멘트가들어갑니다</p>
<p>⭐⭐⭐</p>
<p class="mycomment">나의 의견을 쓰면 돼요</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
cs |
정적페이지 최종 완성본
'언어&프레임워크' 카테고리의 다른 글
| [웹개발종합반] fetch 연습하기 (0) | 2023.02.06 |
|---|---|
| 웹개발종합반(자바스크립트, 제이쿼리, forEach, append) (1) | 2023.01.29 |
| 숫자와연산/문자열(쉽게 배우는 자바1, 생활코딩) (0) | 2022.06.30 |
| 필수코딩용어 (0) | 2022.06.29 |
| 데이터입력방식(쉽게배우는자바1,생활코딩) (0) | 2022.06.29 |
'언어&프레임워크' Related Articles
more
