Sparta/What I Learned

22.10.31

코딩하는 또롱이 2022. 10. 31. 21:00

내배캠 4기의 첫 시작날❤️

 

오전 내내 프로그램의 취지와 목적, 해야할 것들, 지켜야할 것들에 대해 듣고, 조를 배정받았다.

처음 보는 조원들과 어색어색하게 말문을 트고, 조별 과제를 바로 시...작 하기 전에

 

강민철 선생님이랑 함께 깃과 깃허브에 대해 특강을 들었다. 올 상반기 다른 국비 수업으로 듣긴 했으나, 진짜 짧은 시간내에 여러가지 언어들과 다양한 것들을 배운다고 제대로 된 설명도 없이 그냥 무작정 가입하고 명령어만 들었었는데, 이번 기회를 통해 좀 더 자세히 알게됐다. (심지어 깃과 깃허브의 차이도 몰랐었음;;)

 

제일 중요한 건 git bush에서 내가 베이스 캠프로 이용할 빈 폴더로 이동하여 git init이라는 명령어를 넣으면 .git이라는 숨김 폴더가 생기는데 그 곳이 바로 작업 디렉토리이고 이 디렉토리에서 수정, 삭제, 생성 등 다양한 변경 사항들을 스테이지에 올려 버전을 만들 수 있게 된다.

 

아무튼❗ 베이스캠프인 작업 디렉토리를 설정하고 나면

 

git remote add origin https://github.com/dorong0226/teamSpartaCoding.git
git branch -M main
git push -u origin main

이 명령어를 git bush에 넣으면 깃허브와 연동되게 한다.

 

하 ,,, 😥이 간단한 원리를 이제야 알게 된 것도 너무 아쉽고, 설명을 잘해주신 선생님께 치얼스 >.~!

 

암튼 여차저차 깃과 깃허브에 관련된 특강이 끝나고 다시 zep(메타버스임. 겁나 신기함. 재밌음!)으로 돌아가 우리 팀원들고ㅏ 미니 프로젝트를 시작해야 하는데 처음이라 뭐가 뭔지 하나도 모르겠고, 어떻게 해야할 지도 모르겠고, 근데 난 팀장이고,,,, 😭🤯😰😱😵‍💫💀

 

그래도 조원분들 다들 잘 도와주셔서 정말 수월하게(?) 나름 넘어간 거 같다. 

 

앞으로 나아갈 일이 정말 까마득하지만 오늘 배운 개념들과 강의를 통해 얻은 것들을 같이 콜라보하여 첫 프로젝트 <Sharkly>를 성공적으로 수행해내고 말테야...!

 

 

 

 

여기서부터는 내배단 내용!

앞의 강의는 다 아는 거라 뛰어넘고 헷갈리는 부분 위주로~ 였는데 전부 다가 되어버린;;

css

 

--login 페이지

내가 힘들어 했던 padding, margin 정리를 너무 쉽게 해주셨음

margin은 div 바깥쪽에서 , padding은 div 안쪽에서!

div에 색을 넣고 확인해보면 쉽게 알 수 있다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
    
    <style>
        
        .mytitle {
            width: 300px;
            height: 200px;

            color: white;

            text-align: center;

            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
            background-size: cover;
            background-position: center;

            border-radius: 10px;

            padding-top: 40px;
        }

        .wrap{
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>

    <div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>ID, 비밀번호를 입력해주세요.</h5>
        </div>
        <p>ID : <input type="text"/></p>
        <p>PW : <input type="password"/></p>
        <input type="button" value="로그인하기"/></br>
    </div>
<!--    </br>선생님은 <button>로그인하기</button> 이렇게 함-->
</body>
</html>

--폰트

++위와 상동 내용에서 폰트 추가

1) https://fonts.google.com/?subset=korean 에서 맘에 드는 폰트 선택

2) 3가지의 링크 중 마지막꺼 복사해서  TITLE 밑에 붙여넣기

3) 다시 구글폰트 사이트로 돌아가서 CSS rules to specify families 의 코드를 <style> 아래에 *{} 여기 중괄호 사이에 넣기

        ㄴ*은 모든 태그에 적용하겠다는 의미

<title>Login</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300&display=swap" rel="stylesheet">
<style>
    * {
        font-family: 'Noto Serif KR', serif;
    }

 

주석처리 : ctrl+/

 

 style을 아예 따른 파일로 떼어내서 불러오기 할 수 있다. 이건 이클립스하면서 배웠던 파일 분리랑 같은 내용 다른 코!

  <link rel="stylesheet" type="text/css" href = "(css파일이름).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>
</head>
<style>
  .mytitle {
    background-color: aqua;

    height: 250px;
    width: 100%;

    background-image: url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
    background-position: center;
    background-size: cover;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

<body>
<div class="mytitle">
  <h1>내 생애 최고의 영화들</h1>
  <button>영화 기록하기</button>

</div>
</body>

</html>

백그라운드가 3줄씩 다닌다고 했듯이, display:flex;도 4줄이 짝꿍! 항상 같이 써주기❤️

 

이렇게 이뻐지게 만들려면?

<!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">
</head>
<style>
  * {
    font-family: 'Gowun Dodum', sans-serif;
  }
  .mytitle {
    background-color: aqua;

    height: 250px;
    width: 100%;

    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;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mytitle > button {
    width: 200px;
    height: 50px;

    background-color: transparent;
    color: white;

    border-radius: 50px;
    border: 1px solid white;

    margin-top: 10px;
  }

  .mytitle > button:hover {
    border: 2px solid white;
  }
</style>

<body>
<div class="mytitle">
  <h1>내 생애 최고의 영화들</h1>
  <button>영화 기록하기</button>

</div>
</body>

</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>
  <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
</head>
<style>
  * {
    font-family: 'Gowun Dodum', sans-serif;
  }
  .mytitle {
    background-color: aqua;

    height: 250px;
    width: 100%;

    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;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mytitle > button {
    width: 200px;
    height: 50px;

    background-color: transparent;
    color: white;

    border-radius: 50px;
    border: 1px solid white;

    margin-top: 10px;
  }

  .mytitle > button:hover {
    border: 2px solid white;
  }

  .mycomment {
    color : gray;
  }

  .wrap {
    width: 1200px;

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

<body>
  <div class="mytitle">
    <h1>내 생애 최고의 영화들</h1>
    <button>영화 기록하기</button>
  </div>

  <div class="wrap">
    <div class="row row-cols-1 row-cols-md-4 g-4">
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

 

 *이모티콘 꿀팁!

https://kr.piliapp.com/facebook-symbols/

부트스트랩으로 만들어보기 최종!

<!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">
</head>
<style>
  * {
    font-family: 'Gowun Dodum', sans-serif;
  }
  .mytitle {
    background-color: aqua;

    height: 250px;
    width: 100%;

    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;

    color: white;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .mytitle > button {
    width: 200px;
    height: 50px;

    background-color: transparent;
    color: white;

    border-radius: 50px;
    border: 1px solid white;

    margin-top: 10px;
  }

  .mytitle > button:hover {
    border: 2px solid white;
  }

  .mycomment {
    color : gray;
  }

  .wrap {
    width: 1200px;

    margin: 20px auto 0px auto;
  }

  .mypost {
    width: 500px;

    margin: 20px auto 0px auto;
    padding: 20px;

    box-shadow: 0px 0px 3px 0px gray;
  }

  .btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .mypost > input-group mb-3 {
    margin-top: 10px;
  }

  .btn > button {
    margin-right: 10px;
  }
</style>

<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="btn">
      <button type="button" class="btn btn-dark">기록하기</button>
      <button type="button" class="btn btn-light">닫기</button>
    </div>

  </div>

  <div class="wrap">
    <div class="row row-cols-1 row-cols-md-4 g-4">
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
      <div class="col">
        <div class="card h-100">
          <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">영화 title 넣는 곳</h5>
            <p class="card-text">영화 내용</p>
            <p>⭐⭐⭐</p>
            <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
          </div>
        </div>
      </div>
    </div>
  </div>


</body>

</html>

 

**모바일 처리 완전 쉬움!

.wrap {
  max-width: 1200px;
  width: 95%;

  margin: 20px auto 0px auto;
}

.mypost {
  max-width: 500px;
  width: 95%;

  margin: 20px auto 0px auto;
  padding: 20px;

  box-shadow: 0px 0px 3px 0px gray;
}

이렇게 width를 95퍼센트만 주고, max-width를 내가 주고싶은 사이즈로 주면 된다!!

 

      (모바일로 보고싶으면 브라우저에서 우클릭 후 검사를 누르다음 모바일 그림누르면 확인 가능하다!

 

'Sparta > What I Learned' 카테고리의 다른 글

22.11.6  (0) 2022.11.07
22.11.4  (0) 2022.11.04
22.11.3  (0) 2022.11.03
22.11.2  (0) 2022.11.02
22.11.1  (2) 2022.11.01

'Sparta/What I Learned'의 다른글

  • 현재글22.10.31

관련글

티스토리툴바