sp 1 2 css

24 Jul 2022

Sparta coding

웹개발 종합반 1주차

CSS 기초

CSS는 html문서를 꾸미는데 사용하는데,
무언가를 꾸미려면 가리킬 수 있어야 함

<head>
  <!--붙여놓은 이름표 통해 head, style 에서 변경-->
  <style>
    .mytitle {
      color: red;
    }
  </style>
</head>

<body>
  <h1 class="mytitle">로그인 페이지</h1>
  <!-- class 로 이름표 부착 -->
</body>

CSS의 부모자식 관계
부모에 종속된 자식이 선언을 계승하지만 (밖에서 안으로) 자식을 따로 정의해주면 따로 적용됨

실습

margin : 바깥여백
padding : 안쪽여백

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

<div class="wrap">
  <div class="mytitle">
    <h1>로그인 페이지</h1>
    <h5>아이디, 비밀번호를 입력해주세요</h5>
  </div>
  <p>ID: <input type="text" /></p>
  <p>PW: <input type="text" /></p>
  <p>
    <button>로그인하기</button>
  </p>
</div>

웹폰트

[구글웹폰트]https://fonts.google.com/?subset=korean
’*’ : 모든tag에 적용하겠다
주석처리 : ctrl + /
CSS파일 분리 : 필요하면 CSS와 HTML을 분리하고 tag로 링크할 수 있음

Boot strap / CSS 꾸러미

미리 작성된 CSS의 모음집
CSS를 다루는것과 미적감각을 발휘하여 예쁘게 만드는 것은 별개
현업에서는 Bootstrap을 가져다 쓰는경우가 대부분
Bootstrap 템플릿
https://getbootstrap.com/docs/5.0/components/buttons/

Bootstrap적용법

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