1-16_1주차 끝 & 숙제 설명

250x250

Recent Posts

« 2024/10 »
일	월	화	수	목	금	토
		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

관리 메뉴

Hello creators 🙌

1-16_1주차 끝 & 숙제 설명 본문

[WEB & AI] 취준 공부 기록/스파르타코딩클럽_웹개발종합반

1-16_1주차 끝 & 숙제 설명

부시매나_HA 2023. 10. 2. 08:59

728x90

이번 회차 학습 목표 (goal)

이해 하고자 하는 것
- 'html, css, Javascript 문법' 에 대한 이해
- 부트스트랩 쓰기

만들고자 하는 것
- 팬명록

숙제

1️⃣ 사전 준비

homework.html 파일 만들기
부트스트랩 시작 템플릿 넣기
- 부트스트랩 시작 템플릿 코드🔗

<!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>
</head>

<body>
<h1>이걸로 시작해보죠!</h1>
</body>

</html>

2️⃣ 이전 작업 결과물에서 가져오기

스파르타피디아 에서 가져오기

필요 없는 기능들 삭제

핵심은
- 외워서 쓰는게 아니라
- 가져와서, 구조 파악하고, 필요한거, 바꿔 끼는거 ⭐⭐⭐⭐⭐⭐⭐⭐
- 파친코 사진 하고 싶으니까, 그걸로 바꾸는거 ⭐⭐⭐⭐⭐

🎊 DJ 작업 시작

✅ 사진 바꾸기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("https://occ-0-778-38.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABaFmXjrqmeZ6Nz5cuXsJil5_g5oOHxj2r8ITHUWq_zzf8jnaWsCH8nA4lVWYqatpXfQnSX4h-_JT2aMFi5TTGRot-A8UZ8jqDR2A.jpg?r=6dd");

✅ 구글 폰트

여기에서 '폰트' 부분 참고!
[[1-7_폰트, 주석, 파일분리]]

✅ 이전 스파르타피디아 포스팅 BOX 수정

mypost class 를 가져와서 수정

처음엔 background color 를 녹색으로 하고 box 를 확인했음

아직 살짝 당황 스러움 📛📛📛

<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>

  <p> </p>

  <!-- 버튼 -->
  <div class="mybtn">
      <button type="button" class="btn btn-dark"> 응원 남기기👐 </button>
  </div>
</div>


<br>

2. style 태그 안에서 mypost 를 css 수정 
```css
.mypost {

    /* 모바일 최적화 과정 : 화면 변화에 안 깨지는 화면 만들기
    /* 커지면 최대 1200px 까지만 커질 수 있어! */
    max-width: 1200px;
    /* 그 이전에는 95% 만 커질 수 있어.*/
    width: 95%;

    /* div 영역 잡을 때, 백 그라운드 영역 잡고 하는게 좋음 ⭐⭐  */
    /* background-color: green; */
    width: 500px;


    /* 위에 살짝 띄우고 div 영역 잡고 싶음 -> 10px, 0px 만듦 */
    margin: 20px auto 0px auto;
    /* margin: auto */
    /* 박스 shadow 넣기 */
    box-shadow: 0px 0px 3px 0px gray;

    padding: 20px;

}

- 결과물

3️⃣ card - quote

부트스트랩 컴포넌트 5.0 URL 🔗
https://getbootstrap.com/docs/5.0/components/buttons/

Card - Quote 들어가서 > 이 부분 지우면 > 원하는 모양이 나올거야

전체 코드 스니펫 🔗

<div class="card">
<div class="card-header">
  Quote
</div>
<div class="card-body">
  <blockquote class="blockquote mb-0">
    <p>A well-known quote, contained in a blockquote element.</p>
    <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
  </blockquote>
</div>
</div>

🎊 DJ 작업 시작

✅ Card - quote 수정하기

❓ 궁금한거는, class 이름이 card 로 동일한데 괜찮은건가❓❓❓❓❓❓❓❓❓❓


<!-- 카드 -->
    <!-- 궁금한건, class 이름이 card 도 동일한데 괜찮나? ❓❓❓  -->
<div class="card">
    <!-- <div class="card-header">
      Quote
    </div> -->
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p> Victory, Victory, Victory </p>
            <footer class="blockquote-footer"> 첫 연설 in <cite title="Source Title">darkest hour </cite></footer>
        </blockquote>
    </div>

</div>

<div class="card">
    <!-- <div class="card-header">
      Quote
    </div> -->
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p> 처칠: (여자아이 쪽으로 앉으며) 안 되지, 절대로 안 돼. 너도 절대 포기 안 할 거니? 여자아이: 네, 절대 안 해요.
            </p>
            <footer class="blockquote-footer"> 지하철 in <cite title="Source Title"> darkest hour </cite>
            </footer>
        </blockquote>
    </div>
</div>

<div class="card">
    <!-- <div class="card-header">
      Quote
    </div> -->
    <div class="card-body">
        <blockquote class="blockquote mb-0">
            <p> 성공도 실패도 영원하지 않다. 중요한 건 굴복하지 않는 용기다. </p>
            <footer class="blockquote-footer"> 윈스턴 처칠 in <cite title="Source Title"> darkest hour </cite></footer>
        </blockquote>
    </div>

</div>

🔹 결과물

사진

전체 코드 🔗

<!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>

    <!-- 폰트 : Yeon Sung -->
    <link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap" rel="stylesheet">

    <style>
        /* Yeon Sung */
        * {
            font-family: 'Hahmlet', serif;
        }

        .mytitle {
            /* div 박스 자체 배경 색 */
            /* background-color: green; */

            /* div 박스 자체 크기 조절 */
            width: 100%;
            height: 250px;

            /* 이미지 넣기 */
            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("https://occ-0-778-38.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABaFmXjrqmeZ6Nz5cuXsJil5_g5oOHxj2r8ITHUWq_zzf8jnaWsCH8nA4lVWYqatpXfQnSX4h-_JT2aMFi5TTGRot-A8UZ8jqDR2A.jpg?r=6dd");
            background-position: center;
            background-size: cover;

            /* 글씨 흰색 */
            color: white;

            /* ⭐⭐⭐ div 안 내용물을 가운데로 손쉽게 정렬하기 (4가지 set) */
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .mypost {
            /* 모바일 최적화 과정 : 화면 변화에 안 깨지는 화면 만들기
            /* 커지면 최대 1200px 까지만 커질 수 있어! */
            max-width: 1200px;
            /* 그 이전에는 95% 만 커질 수 있어.*/
            width: 95%;

            /* div 영역 잡을 때, 백 그라운드 영역 잡고 하는게 좋음 ⭐⭐  */
            /* background-color: green; */
            width: 500px;


            /* 위에 살짝 띄우고 div 영역 잡고 싶음 -> 10px, 0px 만듦 */
            margin: 20px auto 0px auto;
            /* margin: auto */
            /* 박스 shadow 넣기 */
            box-shadow: 0px 0px 3px 0px gray;

            padding: 20px;
        }

        .card {
            /* background-color: green; */

            width: 500px;
            margin: 20px auto 0px auto;
        }
    </style>

</head>

<body>

    <div class="mytitle">
        <h1> 다키스트아워 팬명록 ⚔ </h1>
        <!-- ⭐⭐⭐ click 하면 -> hey() 함수 실행하게 하기 -->
        <!-- <button onclick="hey()"> 영화 기록하기 ✍️ </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">닉네임</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>

        <p> </p>

        <!-- 버튼 -->
        <div class="mybtn">
            <button type="button" class="btn btn-dark"> 응원 남기기👐 </button>
        </div>
    </div>

    <!-- 카드 -->
    <!-- 궁금한건, class 이름이 card 도 동일한데 괜찮나? ❓❓❓  -->
    <div class="card">
        <!-- <div class="card-header">
          Quote
        </div> -->
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p> Victory, Victory, Victory </p>
                <footer class="blockquote-footer"> 첫 연설 in <cite title="Source Title">darkest hour </cite></footer>
            </blockquote>
        </div>

    </div>

    <div class="card">
        <!-- <div class="card-header">
          Quote
        </div> -->
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p> 처칠: (여자아이 쪽으로 앉으며) 안 되지, 절대로 안 돼. 너도 절대 포기 안 할 거니? 여자아이: 네, 절대 안 해요.
                </p>
                <footer class="blockquote-footer"> 지하철 in <cite title="Source Title"> darkest hour </cite>
                </footer>
            </blockquote>
        </div>
    </div>

    <div class="card">
        <!-- <div class="card-header">
          Quote
        </div> -->
        <div class="card-body">
            <blockquote class="blockquote mb-0">
                <p> 성공도 실패도 영원하지 않다. 중요한 건 굴복하지 않는 용기다. </p>
                <footer class="blockquote-footer"> 윈스턴 처칠 in <cite title="Source Title"> darkest hour </cite></footer>
            </blockquote>
        </div>

    </div>

</body>

</html>

🔸 해설 영상 들으면서 배운 것 #아직낮설다 ⭐⭐⭐

사진 움직이게 하려면 이렇게 퍼센트 기재
center 40%

텍스트를 남길 때 띄어쓰기 하지 않는 쪽으로
ex) 닉네임 쓰고 바로 </label> 오는 식으로

붙어있는 버튼을 띄울 때
나는 p태그 를 썼는데, 이게 아니라, margin-top 을 썼었어야

card 가 여러개니까, 각 card 를 감싸는 cards class 를 하나 만들어주네
mycards css 꾸미는 부분도 조금 다름
card 들 간격 주는 것도 조금 다르게 했음

(배울 만한 부분이 있음.)

⭐ 조금 부족한 이해로 때려 맞춘게 있음. 다시 해보면 좋을 거 같음.

💁‍♀️ 그래도 잘했다는 소문이 있음.

728x90

저작자표시 비영리 변경금지

'[WEB & AI] 취준 공부 기록 > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

2-2_JQuery 시작하기 (0)	2023.10.02
2-1_2주차 오늘 배울 것 (0)	2023.10.02
1-15_Javascript 연습하기 1 (2)	2023.10.02
1-14_Javascript 기초 문법 배우기(2) (0)	2023.10.02
1-13_Javascript 기초 문법 배우기(1) (0)	2023.09.28

'[WEB & AI] 취준 공부 기록/스파르타코딩클럽_웹개발종합반' Related Articles

Comments

Hello creators 🙌

1-16_1주차 끝 & 숙제 설명 본문

1-16_1주차 끝 & 숙제 설명

이번 회차 학습 목표 (goal)

숙제

1️⃣ 사전 준비

2️⃣ 이전 작업 결과물에서 가져오기

🎊 DJ 작업 시작

✅ 사진 바꾸기

✅ 구글 폰트

✅ 이전 스파르타피디아 포스팅 BOX 수정

3️⃣ card - quote

🎊 DJ 작업 시작

✅ Card - quote 수정하기

🔹 결과물

전체 코드 🔗

🔸 해설 영상 들으면서 배운 것 #아직낮설다 ⭐⭐⭐

'[WEB & AI] 취준 공부 기록 > 스파르타코딩클럽_웹개발종합반' 카테고리의 다른 글

티스토리툴바