HTML, CSS 정리

jaegeunsong97·2023년 9월 16일
CSShtml부트스트랩
0

Node.js

목록 보기
1/7

html(뼈대) -> css(살입히기) -> JS(기능추가)

html

  • 기본 골조 : html, head, body
<html>
  (문서의 시작과 끝을 알림)
  
  <head>
  	(문서의 기본 정보 작성)
  </head>
  
  <body>
    (문서의 화면에 보이는 내용 작성)
  </body>
  
</html>
<div></div> : 특정 영억 지정 -> 한 세트로 지정하기

<label></label> : 일반 텍스트 지정

<input></input> : 사용자가 데이터를 입력할 수 있는 컨트롤(타입 지정 필요)

<button></button> : 버튼
  • login.html
<html>
     <head>
     </head>
  
     <body>
       
          <div>
               <label>아이디</label>
               <input type="text">
          </div>
       
          <div>
               <label>비밀번호</label>
               <input type="password">
          </div>
       
          <button type="submit">로그인</button>
     </body>
  
</html>

css

  • 모든 css 코드 : <style></style>에 존재

  • css 사용방법

    • css 파일로 분리하여 사용할 수 있는 외부 스타일 시트
    • html 코드 내에 포함하여 사용하는 내부 스타일 시트(V)
    • 각 태그 문장마다 설정할 수 있는 케이스별 스타일 시트

  • css 선택자

    • 태그 선택자(전체 변경)
      - 앞에서 나온 html, head, body 등등
      - margin : 요소의 주변 여백
      - (외부) margin -> border -> padding (내부)

      <html>
   <head>
        <style type="text/css">
             div{
                  margin : 10px 10px; // 좌우 상하 여백 10px 가짐
             }
             button{
                  float : right; // 위치
                  background: red;  // 배경색
                  color : white; // 글자색
             }
             input{ 
                  width: 100%; // 비율 100%
             }
        </style>
   </head>
  
   <body>
        <div>
             <label>아이디</label>
             <input type="text">
        </div>
        <div>
             <label>비밀번호</label>
             <input type="password">
        </div>
        <button type="submit">로그인</button>
   </body>
</html>

    • 아이디 선택자(해당 부분만 변경) : 문서 안에서 1개의 특정 요소를 객체로 가져와서 스타일을 지정
      - <button id="아무개">, <p id="아무개">
      - 앞에 #이 들어감

      <html>
   <head>
        <style type="text/css">
             #divid, #divpw{ // 주목
                  margin: 10px, 10px;
             }
             #lblid{ // 주목
                  color: red;
             }
             #lblpw{ // 주목
                  color: blue;
             }
             #userid, #userpw{ // 주목
                  width: 100%;
             }
             #login{ // 주목
                  float: right;
                  background: red;
                  color: white;
             }
        </style>
   </head>

   <body>
        <div id="divid">
             <label id="lblid">아이디</label>
             <input type="text" id="userid">
        </div>

        <div id="divpw">
             <label id="lblpw">비밀번호</label>
             <input type="password" id="userpw">
        </div>
        <button type="submit" id="login">로그인</button>
   </body>
</html>

    • 클래스 선택자 : 특정 부분 묶어서 변경

      • <button class="아무개">, <div class="area">
      • 앞에 . 붙이기
      <html>
 <head>
      <style type="text/css">
           .account{
                margin: 10px, 10px;
           }
           .login{
                float: right;
                background: red;
                color: white;
           }
           .write{
                width: 100%;
           }
      </style>
 </head>
 <body>
      <div class="account">
           <label>아이디</label>
           <input type="text" class="write">
      </div>
      <div class="account">
           <label>비밀번호</label>
           <input type="password" class="write">
      </div>
      <button type="submit" class="login">로그인</button>
 </body>
</html>

  • 결론

    • 클래스 선택자 : 공통적인 여러 개의 요소
    • 태그 선택자 : 전체
    • 아이디 선택자 : 각각의 태그 개별

부트스트랩

  • 부트스트랩 : css + js 프래임워크

    • CDN 방식 : 캐시서버에서 캐싱해서 빠르게 콘텐츠를 전달
      • 효율적인 전송

  • 테이블

    • <table></table> 태그 사용
    • table-bordered : 테이블 경계선
    • table-hover : 테이블의 행에 마우스를 위채했을 때 선택 표시할 수 있는 기능
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
     <div class="container" style="padding-top: 50px">
          <table class="table table-borded table-hover">
               <tr>
                    <th>제목</th>
                    <th>작성일</th>
               </tr>
               <tr>
                    <td>자바스크립트란</td>
                    <td>2050-12-25</td>
               </tr>
          </table>     
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>
  • 버튼
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
     <div class="container" style="padding-top: 50px">
          <table class="table table-borded table-hover">
               <tr>
                    <th>제목</th>
                    <th>작성일</th>
               </tr>
               <tr>
                    <td>자바스크립트란</td>
                    <td>2050-12-25</td>
               </tr>
          </table>
          <a href="" class="btn btn-primary">작성하기</a>
          <a href="" class="btn btn-success">수정하기</a>
          <a href="" class="btn btn-danger">삭제하기</a>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>
  • 네비게이션 바`
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  </head>
  <body>
     <nav class="navbar navbar-expand-lg bg-light">
          <div class="container-fluid">
               <a class="navbar-brand" hred="#">나만의 블로그</a>
               <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                      <li class="nav-item">
                        <a class="nav-link" href="#">게시판</a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="#">사진첩</a>
                      </li>
                    </ul>
               </div>
          </div>

     </nav>

     <div class="container" style="padding-top: 50px">
          <table class="table table-borded table-hover">
               <tr>
                    <th>제목</th>
                    <th>작성일</th>
               </tr>
               <tr>
                    <td>자바스크립트란</td>
                    <td>2050-12-25</td>
               </tr>
          </table>
          <a href="" class="btn btn-primary">작성하기</a>
          <a href="" class="btn btn-success">수정하기</a>
          <a href="" class="btn btn-danger">삭제하기</a>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
  </body>
</html>
  • 로그인 화면 예시
<!doctype html>
<html lang="en" data-bs-theme="auto">
  <head><script src="../assets/js/color-modes.js"></script>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.115.4">
    <title>Signin Template · Bootstrap v5.3</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.3/examples/sign-in/">

    

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3">

<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
      body{
        background-color: burlywood;
      }

      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: white;
        border: solid rgba(0, 0, 0, .15);
        border-width: 1px 0;
        box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
      }

      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }

      .bi {
        vertical-align: -.125em;
        fill: currentColor;
      }

      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }

      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }

      .btn-bd-primary {
        --bd-violet-bg: #712cf9;
        --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

        --bs-btn-font-weight: 600;
        --bs-btn-color: var(--bs-white);
        --bs-btn-bg: var(--bd-violet-bg);
        --bs-btn-border-color: var(--bd-violet-bg);
        --bs-btn-hover-color: var(--bs-white);
        --bs-btn-hover-bg: #6528e0;
        --bs-btn-hover-border-color: #6528e0;
        --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
        --bs-btn-active-color: var(--bs-btn-hover-color);
        --bs-btn-active-bg: #5a23c8;
        --bs-btn-active-border-color: #5a23c8;
      }
      .bd-mode-toggle {
        z-index: 1500;
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">
  </head>
  <body class="text-center">
    
<main class="form-signin w-100 m-auto">
  <form>
    <img class="mb-4" src="../assets/brand/door-open-fill.svg" alt="" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">로그인</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">이메일, 전화번호</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">비밀번호</label>
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"> 아이디 기억하기
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-warning" type="submit">로그인</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2023–2050</p>
  </form>
</main>
    </body>
</html>
profile
jaegeunsong97
현재 블로그 : https://jasonsong97.tistory.com/
다음 포스트

자바스크립트-자료형, 연산자, 조건문, 반복문, 함수

0개의 댓글