📢 시작 한마디
나는 제우스다.
왜냐하면 벼락을 치기 때문이지.
-⚡internet Zeus⚡-
미루고 미루던 개발일지 쓰는 날... 증말 미쵸보료 🤪 머리로는 기록해야 한다는 걸 알고 있지만, 강의 듣느라 생각나지 않았다는 핑계를 대본다. 그래서 결국 5주차 강의를 다 듣고 나서, 또 다른 강의를 듣기 전 서둘러 복습하며 끄적여 본다.
+이런 나의 MBTI는 우습게도 J다. 정확히 20 대 80으로 J의 완승이다. 풉 😎
✅ 1주차 진행 및 완료 사항
- 서버와 클라이언트 역할에 대해 이해
- HTML, CSS 기초 지식 습득하기
- 부트스트랩 가져다 쓰기
- 로그인 페이지 만들기
- 포스팅 박스 완성하기
- javascript 기초 문법 익히기
- 1주차 숙제 : 팬명록 메인 페이지 만들기
✅ 필수 프로그램 설치
- Pycharm Professional 설치 & 등록
- JetBrains 회원가입
- AWS 가입
✅ 발생한 문제, 고민 또는 이를 해결한 과정
📌 문제 & 고민
포스팅 박스 CSS에서 돌고래 배경 이미지가 화면 창 크기를 늘리면 덩달아 커진다...
🔎 해결
고정시키는 방법을 즉문즉답에 물어도, 구글에 물어도 찾을 수가 없다^^
내가 검색을 잘 못하는 건가... 하하 계속 찾아봐야지.
<style> 태그 안에
.mytitle {width, height, background-image, background-position, background-size}
여기를 손 봐야할 것 같은데, 아닌가...? 감이 안온다.
썸바디 헬프미 플리즈 암 고잉 크레이지
✅ 오늘 배운 내용
📍 서버 / 클라이언트 / 웹의 동작 개념
- 서버 : 서비스를 제공하는 측
- 클라이언트 : 서비스를 요청하는 측
- HTML 뼈대, CSS 꾸미기, javascript 움직이기
- 웹의 동작 개념 :
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 '받아서', '그려주는' 것
→HTML을 받는 경우
1) 서버가 만들어 놓은 'API'라는 창구에 요청을 보내고, 2) 받은 HTML 파일을 그려준다.
→데이터만 받는 경우
1) 보던 페이지가 리프레시 되면 난감한 경우, 데이터(JSON 형식)만 받아서 끼운다.
📍 HTML, CSS 기본 내용
- HTML과 CSS의 개념
- HTML은 구역과 텍스트를 나타내는 코드
- CSS는 잡은 구역을 꾸며주는 것
→ CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역 - 태그는 무조건 외우지 말고, 기본적인 것 외에는 필요할 때마다 구글링!
- 코드 정렬의 중요성!! Pycharm 자동 정렬 기능 →
ctrl+alt+L
- HTML 기초
- head 안에는 페이지의 속성 정보, 필요한 스크립트, body 작업에 필요한 정보
→meta, link, script, title, style - body 안에는 페이지의 내용
→h1~h6, div, p, ol, ul, li, br, a, img, span, table 등
- head 안에는 페이지의 속성 정보, 필요한 스크립트, body 작업에 필요한 정보
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML 기초</title>
</head>
<body>
<!-- 구역을 나누는 태그들 -->
<div>나는 구역</div>
<p>나는 문단</p>
<ul>
<li>리스트1</li>
<li>리스트2</li>
</ul>
<!-- 구역 내 콘텐츠 태그들 -->
<h1>
h1은 제목을 나타내는 태그
<!-- 페이지마다 하나씩 써두면 구글 검색 굿 -->
</h1>
<h2>h2는 소제목</h2>
<h3>h3~h6 비중작지만, 각자의 역할 O</h3>
<hr/>
span 태그: 특정 <span style="color: red">글자</span>를 꾸밀 때
<hr/>
a 태그: <a href="http://naver.com/"> 하이퍼링크 </a>
<hr/>
img 태그:
<img
src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
/>
<hr/>
input 태그: <input type="text"/>
<!-- type 유형에 따라 다양하게 화면에 구현 -->
<hr/>
button 태그:
<button>버튼</button>
<hr/>
textarea 태그: <textarea>여러줄 입력창</textarea>
</body>
</html>
- CSS 기초
- 웹 페이지의 색상, 폰트, 레이아웃 등을 표현하기 위해 사용하는 스타일 시트 언어
- CSS는
선택자(selector)와선언부(declaration)로 구성 - 자주 쓰이는 CSS
1) 배경 관련 :
background-color
background-image
background-size
background-position
2) 사이즈 :
width, height
3) 폰트 :
font-size
font-weight
font-family
color
4) 간격 :
margin (바깥 여백), padding (안쪽 여백) - HTML 부모-자식 구조 살펴보기
→ html 태그는, '누가 누구 안에 있느냐'를 이해하는 것이 가장 중요
- CSS 사용
- 인라인 스타일 : HTML 요소 태그에 직접 스타일을 지정
- 내부 스타일 시트 : head 태그 안에 style 태그 공간을 만들어 작성
- 외부 스타일 시트 : head 태그 안에
1) link 요소를 이용한 외부 CSS 파일
2) import를 이용한 외부 CSS 파일
📍 로그인 페이지 만들기
- 간단한 로그인 페이지
- HTML 기초에서 봤던 코드들로 조합하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button>로그인하기</button>
</body>
</html>- 로그인 페이지 꾸미기🎄
- 모서리 둥글게
border-radius - 만들어둔 로그인 화면을 가운데로 가져오기
width: 300px, margin: auto - 구글 웹 폰트에서 :
1) 폰트 골라 link 복사해서 head 태그 안에 붙여넣기
2) link 밑에 font-fmaily도 복사해서 style 태그 안에 * {붙여넣기}
→*은 모든 태그에 적용하겠다는 뜻 - 부트스트랩 시작 템플릿 head 태그 안에 넣기
- 부트스트랩 컴포넌트 5.0에서 마음에 드는 버튼 골라서 button 태그에 붙여넣기
→ 부트스트랩(bootstrap) : 예쁜 CSS를 미리 모아둔 것
- 모서리 둥글게
<!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>
<link
href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap"
rel="stylesheet"
/>
<style>
* {
font-family: "Yeon Sung", cursive;
}
.mytitle {
width: 300px;
height: 250px;
color: white;
text-align: center;
background-image: url("https://png.pngtree.com/thumb_back/fh260/background/20221028/pngtree-merry-christmas-red-background-image_1469281.jpg");
background-size: cover;
background-position: center;
border-radius: 10px;
padding-top: 80px;
margin-top: 20px;
margin-bottom: 20px;
}
.btn {
float: right;
}
.wrap {
width: 300px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<div class="btn">
<button type="button" class="btn btn-outline-success">로그인하기</button>
</div>
</div>
</div>
</body>
</html>
📍 포스팅 박스 완성하기
- 내 생애 최고의 영화들📺 CSS 꾸미기
- 배경 어둡게 하기
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('') - 내용물 정렬
display: flex
flex-direction: column
align-items: center
justify-content: center - '영화 기록하기' 버튼에 마우스를 올리면 반응
button:hover
- 배경 어둡게 하기
- 포스터💌 CSS 꾸미기
- 부트스트랩 카테고리
카드 박스 : Components의 Card의 Grid cards 참고 - img, title, text, star 넣고, card부분 div로 묶어주기
- 이미지 개수 조절
row-cols-md-3 → row-cols-md-4
- 부트스트랩 카테고리
- 포스팅 박스📝 CSS 꾸미기
- 큰 박스 먼저 만들기
1) 그림자 효과
box-shadow: 0px 0px 3px 0px gray
2) 안쪽으로 띄우기
padding: 20px - 부트스트랩 카테고리
영화 URL : Forms의 Floating Labels의 Example 참고
별점 박스 : Forms의 Input group의 Custom forms 참고
코멘트 URL : Forms의 Floating Labels의 Textareas 참고 - 기록하기, 닫기 버튼
1) 부트스트랩 버튼 가져오고, 버튼 두 개를 div로 묶기
2) 내용물 정렬 후, 버튼 두 개 간격 맞추기 - 약간의 모바일 처리
1) 모바일에서는 '가로 사이즈'가 가장 문제!
2) 화면 폭 500px 전에는 95%로 맞추다가, 넘으면 500px로 보여주기
width: 95%
max-width: 500px
- 큰 박스 먼저 만들기
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
width: 100%;
height: 250px;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://cdn.pixabay.com/photo/2019/01/12/14/19/whale-3928638__480.jpg');
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle > h1 {
font-size: 25px;
}
.mytitle > button {
width: 120px;
height: 38px;
font-size: 15px;
background-color: transparent;
color: white;
border-radius: 50px;
border: 2px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
color: pink;
border: 2px solid pink;
}
.wrap {
max-width: 1200px;
width: 95%;
margin: 20px auto 20px auto;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px grey;
padding: 20px;
}
.mybtns {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
padding-top: 20px;
}
.mybtns > button {
margin-right: 10px;
}
</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="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 100px"></textarea>
<label for="floatingTextarea2">코멘트</label>
</div>
<div class="mybtns">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>
</div>
</div>
<div class="wrap">
<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>📍 javascript 맛보기
-
프로그래밍 언어 중 하나, 브라우저가 알아들을 수 있는 언어
-
Java와 Javascript 차이
1) 인도와 인도네시아... 하...
2) 바다와 바다코끼리... 후...
3) 오스트리아와 오스트레일리아... 후우하...
→ 즉, 아무 관련 없음 ㅋㅋㅋㅋ🔫😏 -
HTML 연결, 버튼 클릭하면 경고창 뜨게하기
1) 함수 만들어두기
2) 버튼에 함수를 연결하기
3) '영화 기록하기' 버튼 누르면 경고창
📍 javascript 기초 문법 (1)
-
변수 & 기본연산
1) 변수 대입의 의미 (a=2) : 오른쪽에 있는 것을 외쪽에 넣는 것 (2를 a라는 변수에 넣는다)
2) let으로 변수를 선언
→변수는 값을 저장하는 박스. 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다
3) 사칙연산, 문자열 더하기가 기본적으로 가능
4) 변수명은 알아볼 수 있게 쓰는 게 중요 (특수문자, 띄워쓰기 X)
-
리스트 & 딕셔너리
1) 리스트 : 순서를 지켜서 가지고 있는 형태
2) 딕셔너리 : 키(key)-밸류(value)값의 묶음
3) 리스트와 딕셔너리 조합
-
기본 함수들
→사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재
📍 javascript 기초 문법 (2)
- 함수
1) 만들기
→function 함수이름(필요한 변수들) {내릴 명렬들을 순차적으로 작성}
2) 사용하기
→함수이름(필요한 변수들)
- 조건문
→20보다 작으면 작다고, 크면 크다고 알려주는 함수
- 반복문
1) 반복문을 이용하면 긴 출력을 아래와 같이 단 세줄로 출력 가능
→for (1. 시작조건; 2. 반복조건; 3. 더하기) {4. 매번실행}
2) 반복문 예제1for (let i = 0; i < 100; i++) { console.log(i); } 1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 -> 2체크하고 -> (괜찮으면) -> 4 -> 3 위 같은 순서로 실행 i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옴
3) 반복문 예제2
→리스트 내의 딕셔너리를 하나씩 출력 가능
→만약 70점 넘는 사람들의 이름만 출력하고 싶다면?
📍 javascript 연습하기
-
전형적인 패턴 연습
→서울시 미세먼지 값 출력
→
미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력
✅ 회고
웹 개발 종합반 수업을 시작할 때, 코딩에 '코'자도 모르는 상태로 시작한 게 아니라서 1주차는 예전에 공부했던 걸 복습한다는 생각으로 들었다. 그럼에도 여전히 헷갈리는 javascript문법... 예전에 학교 프로그램에서 Java수업을 들었던 악몽이 자꾸 떠오른다.
이것이 자바다? 노노😱 이것은 걍 멍 때리며 따라 쓰기. 이때야말로 코딩에 '코'자도 모르던 시절이라... 교수님 스크린 보면서 주구장창 따라만 썼다ㅎㅎ 그래도 이 수업 덕분에 내가 프론트엔드 쪽에 더 흥미와 재미가 있다는 사실을 알게 됐으니 어쩌면 아리가또지👍🏻
그러니 5주차 수업을 이미 다 수강한 입장으로서 2주차 강의도 복습하며 앞으로 열심히 기록을 해보자!! 코딩은 '욜~ 좀 쉬운데? 이건 이제 껌이지~!'라고 생각하는 순간, 머릿속은 백지가 된다^^ 웃긴 건 복습하면 또 손가락이 익숙하다는 듯이 움직인단 말이지...?
출처 : 영화_맨 인 블랙 / Giphy
근데 진짜 기록을 하니 마음이 산뜻해지고 내 머릿속에 저-장~! 되는 것 같다... 가 아니라 정리하는데 너무 힘들어서 어깨 빠질 듯. 처음엔 마크다운 집어치우고 싶었는데, 하다 보니 은근 재밌다규ㅎㅎ
이게 회고인지 주저리인지 모르겠지만, 마지막으로...
결과가 안 좋다고 포기하지 말고,
실패가 아니라 경험이라 생각하고,
망설일 때는 두려워하지 말고 일단 도전하고,
무엇이든 100% 완벽하게 하려고 시간 낭비하지 말고,
남들과 비교하지 말고 내가 할 수 있는 선에서 최선을 다해 나의 길을 가자!! 화이팅!!
그럼, 진짜 아디오스! 뿅 🖐🏻🖐🏻🖐🏻
✅ homework
📍 팬명록 메인 페이지 만들기
-
웹 개발 1주차 내용 복습
-
부트스트랩 카테고리
닉네임 :Forms의Floating Labels의Example참고
응원댓글 :Forms의Floating Labels의Textareas참고
응원카드 :Card의Header and footer의Quote참고
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
body {
background-color: lightcyan;
}
.mytitle {
width: 100%;
height: 300px;
color: white;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjEwMTJfMjU5%2FMDAxNjY1NTA1MTUwNDI5.l57z0PaI6ypMd3STNeDcZVSWD6mnEVGevZ2RP3kOpsYg.YccOJ0N8OJ8EbOPxdXjSNSeY2ciDNlZ13Ufi5IoP1xkg.JPEG.sorry4beingperfect%2FIMG_7610.JPG&type=sc960_832');
background-position: center top;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle > h1 {
font-size: 32px;
margin-bottom: 25px;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 20px auto;
background-color: lightyellow;
box-shadow: 0px 0px 3px 0px lightgrey;
padding: 20px;
}
.mypost > button {
margin-top: 15px;
}
.mycards {
max-width: 500px;
width: 95%;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>NewJeans 팬명록🐇</h1>
</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">닉네임</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button type="button" class="btn btn-secondary">응원 남기기</button>
</div>
<div class="mycards">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 수록곡 너무 좋아요!</p>
<footer class="blockquote-footer">버니즈 1</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 수록곡 너무 좋아요!</p>
<footer class="blockquote-footer">버니즈 1</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 수록곡 너무 좋아요!</p>
<footer class="blockquote-footer">버니즈 1</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>
할 수 있다고 믿는 사람은 결국 그렇게 된다 😄😊
배경 이미지 고정하는 방법은
이미지를 감싸주는 컨테이너의 최대 넓이를 설정하셔서 그 이상으로 커지지않게 구현하는 방법이 있습니다.
어떤식으로 만들고 싶은지에 따라 방법은 달라지기때문에 정답은 없습니당.
로그인 화면 구현하실때
p 태그 안에 inuput을 사용하기 보다는
ㅣabel태그로 묶어서 사용하시는걸 추천 드립니다.
이미지 태그를 이용하면서 하단에 내용들도 작성해야하는 경우는 figure태그를 이용하여 구현하시는걸 추천드립니다 !