yujeong.log https://velog.io/ 언제나 조금이라도 나아가기 위해 Sun, 04 Jul 2021 15:00:46 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Copyright (C) 2019. yujeong.log. All rights reserved. <![CDATA[웹개발 종합 - Ajax]]> https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-Ajax https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-Ajax Sun, 04 Jul 2021 15:00:46 GMT Ajax

[Point] Ajax는 jQuery를 임포트한 페이지에서만 동작 가능합니다.

즉, http://google.com/ 과 같은 화면에서 개발자도구를 열면, jQuery가 임포트 되어있지 않기 때문에 아래와 같은 에러가 뜹니다.

Uncaught TypeError: $.ajax is not a function → ajax라는 게 없다는 뜻

Ajax 기본 골격

  • Ajax 기본 골격

      $.ajax({
    type: "GET",
    url: "여기에URL을입력",
    data: {},
    success: function(response){
      console.log(response)
    }
  })

  • Ajax 코드 해설

      $.ajax({
    type: "GET", // GET 방식으로 요청한다.
    url: "http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99",
    data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
    success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
      console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
    }
  })
]]> <![CDATA[웹개발 종합 - JQuery]]> https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-JQuery https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-JQuery Sun, 04 Jul 2021 14:41:57 GMT JQuery

Javascript를 미리 작성해둔 것

Javascript로도 모든 기능(예 - 버튼 글씨 바꾸기 등)을 구현할 수는 있지만,

1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려해야해서,
**j**Query라는 라이브러리가 등장하게 되었답니다.

jQuery와 Javascript

jQuery는 Javascript와 다른 특별한 소프트웨어가 아니라 미리 작성된 Javascript 코드입니다. 전문 개발자들이 짜둔 코드를 잘 가져와서 사용하는 것~ point~!! (그렇게 때문에, 쓰기 전에 "임포트"를 해야합니다!)

Javascript로 길고 복잡하게 써야 하는 것을
document.getElementById("element").style.display = "none";
jQuery로 보다 직관적으로 쓸 수 있어요. 편리하죠? :-)
$('#element').hide();

jQuery 사용하기

미리 작성된 Javascript 코드를 가져오기 위해서는 와 사이에 아래를 넣으면 끝!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
]]> <![CDATA[웹개발 종합 - Javascript]]> https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8-Javascript https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8-Javascript Sun, 27 Jun 2021 08:05:33 GMT 자바스크립트란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다.

  • (예) alert 함수

      function hey(){
      alert('안녕!');
  }
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성합니다.

<script> ~ </script> 내에 자바스크립트를 작성하는 것이죠
아래 코드를 통해 간단한 사용방법을 알아봅니다.

    • 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불립니다.
      <button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

  • [크롬 개발자도구]를 열어서, console 탭에 작성합니다!

    • 그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능!

      • 크롬 개발자도구 콘솔창은 어떤 의미?

        띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다. 새로고침하면 모두 사라진다는 사실!

    • 윈도우: F12

    • 맥: alt(option) + command + i

]]> <![CDATA[웹개발 종합 - 부트스트랩]]> https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8-%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9 https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8-%EB%B6%80%ED%8A%B8%EC%8A%A4%ED%8A%B8%EB%9E%A9 Sun, 27 Jun 2021 07:52:56 GMT 부트스트립

만들어진 다양한 CSS style들을 미리 모아둔 곳

  • ** 부트스트랩 시작 템플릿**

      <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
          integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
          crossorigin="anonymous"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
          integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
          crossorigin="anonymous"></script>

      <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
  </head>

  • ** 부트스트랩 사이트 주소**

      https://getbootstrap.com/docs/4.0/components/alerts/
]]> <![CDATA[웹개발 종합 - CSS]]> https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8-CSS https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8-CSS Sun, 27 Jun 2021 07:38:07 GMT CSS

  • HTML은 뼈대, CSS는 꾸미기!

    HTML은 구역과 텍스트를 나타내는 코드라면, CSS는 HTML 내 style 속성을 주어 HTML을 좀 더 입체감있고 디테일하게 꾸며줄 수 있다. ** HTML 코드 내에 CSS 파일을 불러와서 적용합니다.

  • CSS 기초

    • CSS는 어떻게 사용하나요?
   <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다.
    아래 코드를 통해 간단한 사용 방법을 알아봅니다.

    mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하기!
    • HTML 구조 상 원하는 대상을 영역과, 대상을 class로 정의하고, 정의한 class는 "head"태크 안에 "style"태그로 원하는 부분을 꾸미기 해주면 된답니다~!
    • 자주 쓰이는 기본 CSS~!

      [배경관련] 

      background-image, background-size, background-position, background-color . . .

[사이즈]
width, height . .  

[폰트]
font-size, font-weight, font-famliy, color, h1 ~ h5 . . 

[테두리]
border: __(굵기) soild(선의 형태) #____(color), border-radius . . 

[간격]
margin, padding . .
    • (예) 원하는 대상을 div로 part별로 묶어주고, 부분별 div를 꾸며주면 됩니다.

  • Check Point

    • 원하는 대상을 가운데로 위치시키려면?
      1. width를 주고,
      2. margin: auto를 사용하자!
      3. 그래도 안되면? display:block을 추가! * Memo *------- text는 'OOO글자를 가운데로 옮겨달라'는 식으로 지정을 할 수가 없기때문에 block처리를 해주어 가운데로 정렬을 해주어야 한다
]]> <![CDATA[웹개발 종합 - HTML]]> https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8 https://velog.io/@yujeong_27/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%83%80%EC%BD%94%EB%94%A9-%EC%9B%B9%EA%B0%9C%EB%B0%9C-%EC%A2%85%ED%95%A9-1%EC%A3%BC%EC%B0%A8 Sat, 26 Jun 2021 21:37:15 GMT

HTML

head안에는 - HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.

  • head 안에 들어가는 대표적인 요소들: meta, script, link, title 등

페이지의 속성을 정의하거나, 필요한 스크립트들을 부릅니다. 즉, 눈에 안 보이는 필요한 것들을 담는 것. 나중에 body 작업을 하면서 필요한 정보들을 넣어보겠습니다.

body

  • [코드스니펫] HTML기초

      <!DOCTYPE html>
  <html lang="en">

  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>스파르타코딩클럽 | HTML 기초</title>
  </head>

  <body>
      <!-- 구역을 나누는 태그들 -->
      <div>나는 구역을 나누죠</div>
      <p>나는 문단이에요</p>
      <ul>
          <li> bullet point!1 </li>
          <li> bullet point!2 </li>
      </ul>

      <!-- 구역 내 콘텐츠 태그들 -->
      <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
      <h2>h2는 소제목입니다.</h2>
      <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
      <hr>
      span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
      <hr>
      a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
      <hr>
      img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
      <hr>
      input 태그입니다: <input type="text" />
      <hr>
      button 태그입니다: <button> 버튼입니다</button>
      <hr>
      textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
  </body>

  </html>

잠깐! 정렬의 중요성 코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 무척 어려워집니다. Pycharm에서 ctrl+alt+L (맥은 cmd+alt+L) 로 자동정렬 기능을 사용해보세요. : 코드의 가독성과 편의를 위해 Pycharm 사용!!!

  • Q. (windows) ctrl + alt + L 을 누르면 자동정렬이 아니라 관리 비밀번호 화면이 뜹니다. → 단축키 설정 변경하기

  • 아래처럼 해당 단축키에 이미 다른 기능이 엮어져 있는 경우랍니다. ctrl + alt+ L 을 누르면 관리 비밀번호 입력창이 떠버리죠?

  • 컴퓨터마다 설치된 프로그램이 다르니 간혹 단축키 설정이 겹치는 경우가 있어요. 이럴 때에는 아래처럼 단축키 설정을 바꿔주면 됩니다.

      1. File - settings 로 설정에 들어갑니다. 
  2. 설정 창이 뜨면 왼쪽바에서 keymap 을 누르면 단축키(keymap) 설정창으로 들어가세요.      
  3. Reformat Code 부분을 클릭해서 다른 키 조합으로 단축키를 바꿔주세요. 겹치지 않는 키여야합니다! 동작하지 않으면 다른 조합으로 다시 바꿔주세요!

]]>