2회차에서는 노트 필기를 좀 하면서 개념정리를 하려고 합니다.

1회차에서는 복붙하면서 따라가기에 급급했다면 2회차에는 정리를 할 수 있는 여유가 생겼습니다.

배운 것들을 tistory 블로그에도 적용하면서 써보도록 하겠습니다. 

css

Cascading Style Sheet

  • background-color: green;
  • width: 300px;
  • height: 200px;
  • color: white;
  • text-align: center;
  • background-image: url("");
  • background-position: center;
  • background-size: cover;
  • border-radius: 10px; 
  • padding (들여쓰기)
  • padding-top: 40px;
  • margin (여백)
  • margin: auto; (상하좌우 최대한 밀기)

 

구글 폰트 가져오기

  • https://fonts.google.com/?subset=korean
  • font 고르기 -> select this style -> 세번째 링크 복사 -> <title> 밑에 붙여넣기
  • CSS rules to specify families 복사 -> <style> 밑에 *{붙여넣기}

주석 달기

  • command + /
  • 1) 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
  • 2) 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
  • 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요.
  • 즉, 개발자 본인 또는 동료를 위해 붙여두는 것!

부트스트랩 (css 꾸러미)

 

 

가운데로 위치하기

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

마우스 올렸을 때 스타일 변경 hover

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

 

이미지 어둡게 하기

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("이미지url넣기")

JavaScript

  • 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
  • <script></script>
  • 검사 -> Console 
  • let 으로 변수를 선언
  • .push. -> 추가
  • .length -> 리스트의 길이 구하기
  • '나눗셈의나머지'를 구하고 싶은 경우 let a = 20 let b = 7 a % b = 6
  • .split('나누는기준문자') -> 특정문자로 문자열 나누기

 

1주차 숙제

<!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=Poor+Story&display=swap" rel="stylesheet">
  <style>
    *{font-family: 'Poor Story', cursive;}
    .mytitle{
      color: white;
      width: 100%;
      height: 250px;

      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;

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .box{
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
      box-shadow: 0px 0px 3px 0px gray;
      padding: 20px;
    }
    .box > button {
      margin-top: 10px;
    }
    .card {
      max-width: 500px;
      width: 95%;
      margin: 20px auto 0px auto;
    }
  </style>
</head>

<body>
    <div class="mytitle">
      <h1>선셋 팬명록</h1>
    </div>
    <div class="box">
      <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-dark">응원 남기기</button>

    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
    <div class="card">
      <div class="card-body">
        <blockquote class="blockquote mb-0">
          <p>너무 멋저요!</p>
          <footer class="blockquote-footer">지농</footer>
        </blockquote>
      </div>
    </div>
</body>

</html>
저작자표시 비영리 변경금지

'사전스터디_부트캠프' 카테고리의 다른 글

2회차 웹개발 종합반 3주차 Python package requests venv beautifulsoup database MongoDB  (0) 2022.10.19
2회차 웹개발 종합반 2주차 JavaScript JQuery Ajax JSON  (0) 2022.10.18
비전공자 개발자 도전기 5주차 웹개발 서버연결하기  (0) 2022.10.18
비전공자 개발자 도전기 4주차 웹개발 "GET" "POST"  (0) 2022.10.14
비전공자 개발자 도전기 3주차 웹개발 MongoDB Beautifulsoup  (1) 2022.10.12

+ Recent posts

티스토리툴바