오즈코딩 스쿨 사업개발 캠프 28일차

Chapter 5-26. jQuery 심화

jQuery란
- 웹사이트에 동적인 것을 동작하게 하기 위한 요소.
- button 태그
  - <h1>.html() 메소드</h1>
    <p>아래의 버튼을 누르면 다음 단락에 새로운 텍스트를 설정할 수 있어요!!</p>
    <button>새로운 텍스트!</button>
    <p id="text"></p>
    => 스타일에 입혀져서 나온다. 그리고 p태그는 없는 것 처럼 보임.
  - #000,.000,
- $("#text").html(newText); => <p id="text"></p> 서로 같이 연결 되어 있음.
- <script>
  $(document).ready(() {
  
  $("button").on("click", ()=> {
  
  let a ($("h1").html());
  
  alert(a);
  
              });
  });
  </script>
  ---------------------------------------------
  <body>
  
  <h1>반가워요</h1>
  <p>아래의 버튼을 누르면 다음 단락에 새로운 텍스트를 설정할 수 있어요!!</p>
  <button>새로운 텍스트!</button>
  <p id="text"></p>
  
  </body>
  => 이것을 불러오기 위한 것. 서로가 상호작용하고 있음.
<script>
$(document).ready(() {

$("button").on("click", ()=> {

let a ($("h1").html());

           $("#text").html(newtext);

            });
});
</script>
--------------------------------------------------
<h1>반가워요</h1>
<p>아래의 버튼을 누르면 다음 단락에 새로운 텍스트를 설정할 수 있어요!!</p>
<button>새로운 텍스트!</button>
<p id="text"></p>
=> 이것을 불러내기 위함.
그냥 소괄호만 닫으면 불러오기만 하는 역할.
,text를 넣어주면 실제 값을 태그 안에 넣어주는 역할을 한다.
getter 메소드와 setter 메소드
- 값을 넣고 안넣고에 따라서 달라짐.
- getter 메소드 : 선택된 요소에 접근하여 그 값을 읽어오기 위한 메소드입니다.(값을 가져오는 메소드)
- setter 메소드 : 선택된 요소에 접근하여 그 값을 설정하기 위한 메소드입니다.
.append() 메소드
- <h1>.append() 메소드</h1>
  <ul id="list">
  <li>첫 번째 아이템이에요!</li>
  <li>두 번째 아이템이에요!</li>
  <li>두 번째 아이템이에요!</li>
  <li>세 번째 아이템이에요!</li>
  </ul>
  <button>아이템 추가</button>
  => 채팅 보내기 버튼
  - 버튼을 누를 때 마다 계속 추가 되는 시스템.
    - ex) $("#list").append("<li>새로 추가된 아이템이에요!</li>");
      - <h1>.append() 메소드</h1>
        <ul id="list">
        <li>첫 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>두 번째 아이템이에요!</li>
        <li>세 번째 아이템이에요!</li>
        </ul>
        <button>아이템 추가</button>
        => <li></li> 없으면 라인이 엉망이 되어버림.
    - $("chatlist").append("<div>"+child.val()+"</div>);
      - 채팅앱을 만들때 많이 쓰이고 있음.
      - sendMsg.(파이어베이스로 데이터를 전송)
      - loadMsg (모든 메시지를 불러오는 것)
  - .prepend() 메소드는 선택한 요소의 '처음'에 새로운 요소나 콘텐츠를 추가합니다.
    - $("ui").prepend("새로 추가된 콘텐츠에요!");
      - ex) 새로 추가된 콘텐츠에요!새로 추가된 콘텐츠에요!새로 추가된 콘텐츠에요!첫 번째 아이템이에요!
  - 페이드 인과 페이드 아웃
    - .fadeIn() 메소드는 선택한 요소를 서서히 사라지게 하고, .fadeOut() 메소드는 서서히 나타나게 합니다.
    - <script>
      $(function() {
      $("#fadeInBtn").on("click", function() {
      $("#divBox").fadeIn(); // id가 "divBox"인 요소를 점점 나타나게 함.
      });
      $("#fadeOutBtn").on("click", function() {
      $("#divBox").fadeOut(); // id가 "divBox"인 요소를 점점 사라지게 함.
      });
      });
      </script>
      -----------------------------------------------------------------------------------------
      <h1>페이드 인과 페이드 아웃</h1>
      <button id="fadeInBtn">페이드 인</button>
      <button id="fadeOutBtn">페이드 아웃</button>
      <div id="divBox"></div>
      -------------------------------------------------------------------------------------------
      #divBox {
      width: 100px;
      height: 100px;
      background-color: yellow;
      border: 5px solid orange;
      margin-top: 20px;
      ----------------------------------------------------------------------------------------------------------------------
      <p>제이쿼리에서 페이드 효과는 CSS opacity 속성값을 빠르게 변경하여 표현해요!</p>
    - 슬라이드 업(slide up)과 슬라이드 다운(slide down)
      - .slideUp() 메소드 : 선택한 요소가 서서히 올라가면서 사라지는 효과를 보여줍니다.
      - .slideDown() 메소드 : 선택한 요소가 서서히 내려오면서 나타나는 효과를 보여줍니다.
        
        <script>
        $(function() {
        $("#slideUpBtn").on("click", function() {
        $("#divBox").slideUp(); // id가 "divBox"인 요소를 올라가면서 사라지게 함.
        });
        $("#slideDownBtn").on("click", function() {
        $("#divBox").slideDown(); // id가 "divBox"인 요소를 내려오면서 나타나게 함.
        });
        });
        </script>
        --------------------------------------------------------------------------------------------------------
        <body>
        
        <h1>슬라이드 업과 슬라이드 다운</h1>
        <button id="slideUpBtn">슬라이드 업</button>
        <button id="slideDownBtn">슬라이드 다운</button>
        <div id="divBox"></div>
        
        </body>
        -------------------------------------------------------------------------------------------------------------
        
        제이쿼리가 아니라 자바스크립트로 재현하려고 했으면 엄청 긴 요소들을 써야 했음.
      - 요소의 표시와 숨김
        
        .hide() 메소드는 선택한 요소를 순간적으로 사라지게 한다.
        
        .show() 메소드는 나타나게 합니다.
        
        팝업 띄우는 것과 많이 비슷하게 생각하면 됨.
        
        핀으로 박아 버린다.
        
        ex) #popup {
                position:fixed;
                width:200px;
                height:200px;
                border:2px solid yellow;
                background-color:red;
                left: 0;
                top: 0;
              }
        -------------------------------------------------------
        <h1>요소의 표시와 숨김</h1>
        <button id="showBtn">요소 표시하기!</button>
        <button id="hideBtn">요소 숨기기!</button>
        <p>CSS의 display 속성값이 none으로 설정되기 때문에 웹 페이지의 레이아웃에서 아예 사라져 버려요!</p>
        <p id="text">이 단락을 숨기거나 나타나게 할 거에요!</p>
           <div id="popup">
              <div id="exit">

Chapter 5-27. Bootstrap 템플릿 활용

부트스트랩
- 의미 : 기본적인 스타일에 입혀져서 디자이너가 없는 상태로 웹사이트를 만들어야 된다고 했을 때, 활용하기 쉽고 퀄리티 있는 서비스를 만들수 있는 도구.
- ex) 네비게이션 바:
- 미리 css를 잘 입혀 놓은 것임.
- https://startbootstrap.com/ 참조
  - 포트폴리오 사이트는 템플릿 하나로 만들 수 있음.
  - 공식으로 들어가보면 class, css등이 엄청나게 많은 요소로 자리잡고 있음.
    - 모두 스타일에 다 적용이 되어 있기 때문.(미리 전부 꾸며 놓은 것임.)
    - 고치고 싶은 부분이 있으면
      - 사이트에서 오른쪽 버튼-> 검사
      - 그 이미지나 파일을 찾아서 고치면 됨.(with CSS)
      - styles.css:7809 => css 폴더의 7809번 줄에 있다는 뜻.

Chapter 5-28. Bootstrap 심화

스타터 탬플릿
- 페이지가 최신 디자인 및 개발 표준을 준수하고 있는지 확인해보세요.
  즉, HTML5 doctype과 적절한 반응형 동작을 위해 뷰포트 메타 태그를 사용해야 합니다.
- ex)
  - <!doctype html>
    <html lang="en">
      <head>
        
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    
        <title>Hello, world!</title>
      </head>
      <body>
        <h1>Hello, world!</h1>
    
        
    
        
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
    
        
        
      </body>
    </html>
    -----------------------------------------------------------------------------------------------------------------------------------------------
  - 모든 부스트스트랩 템플릿 사이트는 반응형으로 되어 있음.
  - 브라우저의 크기에 따라서 보기 좋게 만들어져 있다는 것을 의미
  - <div class="col">test1</div>
    <div class="col">test2</div>
    <div class="col">test3</div>
    => 이 칸 12칸까지 첨부 가능
  - 'container','row','column' 등 이미 css에 다 첨부되어 있음.
  - row 1개당 3줄씩 첨부 가능(테이블 구조를 만들때 쓰임)
    => <div class="container">
      <div class="row align-items-start">
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
      <div class="row align-items-center">
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
      <div class="row align-items-end">
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
        <div class="col">
          One of three columns
        </div>
      </div>
    </div>
    -------------------------------------------------------------------------------------
  - 그리드 구조
    - <div class="container">
        <div class="row justify-content-start">
          <div class="col-4">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-4">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-end">
          <div class="col-4">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-around">
          <div class="col-4">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-between">
          <div class="col-4">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
        <div class="row justify-content-evenly">
          <div class="col-4">
            One of two columns
          </div>
          <div class="col-4">
            One of two columns
          </div>
        </div>
      </div>
      --------------------------------------------------
      => 총 12칸 중 4칸을 차지 하겠다는 뜻.
      (- 칸수)넣으면 칸을 지정해서 넣을 수 있다.
    - 스타일이 이미 입혀져 있는 상태.

사업전략가203

오즈코딩 스쿨 사업개발 캠프 28일차

Chapter 5-26. jQuery 심화

Chapter 5-27. Bootstrap 템플릿 활용

Chapter 5-28. Bootstrap 심화

티스토리툴바