imyour_juu.log

01_Python

Tue, 21 Jun 2022 06:37:57 GMT

Python이란?

1990년 암스테르담의 귀도 반 로섬(Guido Van Rossum)이 개발한 인터프리터 언어이다.
인터프리터 언어란 프로그래밍 언어의 소스 코드를 바로 실행하는 컴퓨터 프로그램이라고 한다.

Python이 주목받고 있는 이유

초보자가 ㄱ배우기 쉽다.
다양한 라이브러리 및 툴을 가지고 있다.
머신러닝(ML), 인공지능(AI) 및 데이터 과학 라이브러리와 프레임워크를 활용할 수 있다. Python을 필요로 하는 기업의 수요가 증가하고 있다.

jupyter notebook 사용법

셀추가

변수명 규칙

영문자, 숫자, 언더바를 사용할 수 있다. - 단, 영문자는 대문자와 소문자를 다르게 인식한다.

숫자로 시작할 수 없다.
키워드 사용이 불가능하다.
권장사항

변수명의 첫글자는 항상 소문자로 만든다.
두가지의 문자를 섞어서 변수명을 만들 경우 두단어를 구분할 수 있게 한다 ex_numberList, number_list

Python 자료형 종류

이스케이프 코드 프로그래밍 할때

문자열 포매팅(Formatting)

문자열 포맷 코드

연산자 종류

산술연산자 - 자바에서는 보지 못했던 '//'가 추가됐다

산술연산자 예제 #1. num1이라는 변수에 숫자데이터 하나를 입력받기 #2. num2라는 변수에 숫자데이터 하나를 입력받기 #3. num1에서 num2를 나눈 몫을 출력하기

num1 = int(input('숫자1 입력')) num2 = int(input('숫자2 입력')) print(num1//num2)

int()를 붙이지 않으면

지수연산자 예제

#1. num3라는 변수 선언, 숫자데이터 입력받기 #2. num4라는 변수 선언, 숫자데이터 입력받기 #3. num3의 num4제곱 결과를 출력

num3 = int(input()) num4 = int(input()) num3**num4

Maven_사용하기

Fri, 13 May 2022 02:09:24 GMT

Maven

java용 프로젝트 관리 도구
필요한 라이브러리를 pom.xml에 정의
라이브러리의 동작에 필요한 라이브러리도 자동 다운로드

Maven 사용 전 설정!

Project Exploer에서 마우스 우클릭 New -> Other 선택

Maven 폴더에서 Maven Project 선택

Workspace위치를 설정하는 곳

filter에 maven-archetype-webapp 1.0을 선택

Gruop ID와 Artifact ID를 설정

기다리면 폴더 생성이 되지만 오류표시가 뜬다!

프로젝트에서 오른쪽 마우스버튼 누른 후 build path -> configure build path 선택

아래에서 세번째 server runtime 선택 후 본인 서버 선택 (나는 아파치 톰캣 사용중이라 아파치톰캣을 선택했다)

web app libraries선택 후 프로젝트 명 선택해주면 되는 것 같다

그 후 build path 에서 maven하단 project facets 에서 다이나믹 웹 프로젝트 버전을 4.0으로 변경하고 자바 버전도 올려주면 되는데,,,,,,,,,,,,

구버전.. 이클립스를 사용하는 사람은 .. 이 방법으로 다이나믹 웹 프로젝트 버젼이 4.0으로 변경이 안된다.. (사실 나 ) 하단의 방법으로

다이나믹 웹 프로젝트를 만들어 준 후

configure 선택 후 convert to maven project 선택

아까 위 방법처럼

groupId와 artifactId를 설정해주면 끝

01_Java_script

Wed, 11 May 2022 07:41:58 GMT

JavaScript

웹페이지를 동적으로, 프로그래밍적으로 제어하가 위해서 고안된 객체 기반의 스크립트 언어

모든 웹 브라우저에서 동작할 수 있는 언어가 필요해서 발전

javascript 사용방법

JavaScript 입출력

입력하기

document.write();

html 문서 내에 출력

console.log();

console창에 출력
console 창이란 웹페이지에서 f12를 누르면 나오는 개발자도구!

console.log() 외에도 경고 오류 정보 등이 있다.

alert();

알림 팝업창으로 출력

출력하기

prompt("출력문 작성", "입력내용") -> return 타입 : string 뒤 입력내용은 생략이 가능하다 (생략하면 공백) 입력 내용에 입력한 값이 리턴되는 형태

confirm("출력문 작성") -> return 타입 : boolean 확인 시 TRUE 취소 시 FALSE를 리턴함

Java와 JavaScript의 차이점

ECMAScript6 표준안에서 새로운 변수 키워드 등장

기존 java에서 보지 못했던 let(변수)과 const(상수) java처럼 자료형을 다르게 표기하는 것이 아닌 var나 let 등으로 선언해줄 수 있다.

여기서 ECMAScript란 브라우저에서 동작하는 언어를 만들 때, 문법적인 사항들을 정리한 문서

입출력문과 변수 활용 예제

name변수에 prompt로 입력받은 데이터를 저장 console.log를 이용하여 name에 저장된 데이터 출력

결과 ↓

JavaScript의 자료형

*null * -> 의도적으로 비어있는 상태 타입을 확인하면 object 형태

let num ; = undefined

*undefined * -> 변수를 선언하고 값을 할당하지 않은 상태 타입을 확인하면 undefined 형태

let abc = 1; abc = null; => null

number

var num1 =65; var num2 =99.9

String var name = 'wonju'; var fruit = '사과';

boolean var isChecked = true; var isPlaying = false;

JavaScript연산자

비교연산자

== 과 ===의 차이!

답은 순서대로!

true false -> 자료형 상관 없이 값만 동일하면 true 반환 5 == 5 false true -> 자료형과 값 둘다 일치해야 true 반환 5 === 5 or '5'==='5' true false -> '5'를 문자열로 형변환 했기 때문에 5 === 5 가 성립한다

연산자 실습

JSP/Servlet

Wed, 11 May 2022 00:49:45 GMT

MVC Pattern

MVC란?

M -> Model : 어플리케이션의 정보, 데이터

실행에 직접적인 관여하지 않음
데이터를 담거나, 데이터를 보내거나, 수정, 삭제하는 객체

V -> View : 사용자가 보게 될 결과 화면 출력

어플리케이션의 행위를 정의
Logic 결과에 따라 적절한 View를 선택하여 응답

C -> Controller : 사용자의 입력처리와 흐름 제어 담당

Model 데이터를 기반으로 실제 사용자에게 보여지는 페이지

MVC 동작방법

MVC패턴 두가지 방식

MVC Model1 방식

JSP에서 출력과 로직을 전부 컨트롤 하는 방식

MVC Model2 방식

JSP에서는 출력만 처리

Model1	Model2
View와 Controller가 같은 JSP에서 실행	View와 Controller가 엄격히 구분 View는 어떠한 처리 Logic도 포함하지 않음
개발기간 단축	초기 구조 설계에서 많은 시간이 필요
유지 보수 어려움	유지 보수, 확장이 용이
디자이너와 개발자간 소통 필요	디자이너와 개발자의 작업분리
간단한 웹 애플리케이션 구현에 용이	중 대형 프로젝트에 적합

Cookie & Session

Mon, 09 May 2022 02:20:22 GMT

세션 (Session)

: 비연결성 (connectionless) 클라이언트가 요청을 한 후 응답을 받으면 그 연결을 끊어버리는 특징 : 무상태 (stateless) 통신이 끝나면 상태를 유지하지 않는 특징

: 클라이언트(브라우저)에 저장되는 키와 값이 들어있는 작은 데이터파일

session 브라우저를 꺼버리면 사라지는 정보들 그 외에 날짜가 입력돼있는 것은 그 날짜까지 유지가 됨

Cookie 동작방식

Cookie 사용 예

ID저장, 로그인 상태 유지
일주일간 다시 보지 않기
쇼핑몰 장바구니 기능

Cookie 단점

보안에 취약
작은 허용 용량 (약 쿠키 당 4byte, 도메인 당 30개, 웹브라우저 당 300개)

-> 허용 용량 범위가 넘어서면 오래된 순으로 사라짐 3. 다른 브라우저에서 저장한 값 사용 불가

Client 　　 　　 　　 　　요청 ->  　　 　　 　　 　　 Server
Client 　　　           <- 응답                   Server

1. 클라이언트가 페이지 요청
2. 상태를 유지하고 싶은 갚을 쿠키로 생성
3. http 헤더에 쿠키를 포함시켜 응답
4. 브라우저가 종료되어도 쿠키만료기간이 있다면 클라이언트에서 보관
5. 같은 요청을 할 경우 http해더에 쿠키를 함게 보냄
6. 서버에서 쿠키를 읽어 이전 상태 정보를 변경할 필요가 있을 때 쿠키를 업데이트 하여 변경된 쿠키를 http헤더에 포함시켜 응답

쿠키 만들기

쿠키 객체 생성 Cookie cookie = new Cookie("id","쿠키몬스터");
쿠키의 만료기한 설정 초단위로 설정 해야함 -> 아래는 1년의 만료기한 설정 cookie.setMaxAge(606024*365);
1. 쿠키를 웹브라우저로 전송 response.addCookie(cookie);

만든 쿠키 가져오기

쿠키 가져오기 -> 전부 가져오는 작업을 해야한다. Cookie[] cookies = request.getCookies();
name, value값 확인하기 for(Cookie c : cookies) { out.print(c.getName() + " : " + c.getValue() +
)%>

}

세션 (session)

브라우저가 종료되기 전까지 클라이언트의 정보를 유지하게 해주는 기술 사용자 정보 파일을 서버 에서 관리 http세션

Session 동작방식

session 사용 예

: 로그인 같이 보안상 중요한 작업을 수행할 때 사용

session 특징

각 client 에게 고유 ID 부여
보안 면에서 쿠키보다 우수
사용자가 많아지면 서버 메모리 많이 차지하게 됨

session 만들기

session 생성

session.setAttribute("id", "wonjuzzzang");
session.setAttribute("age", 20);

괄호 내에 차례로 String, Object 형태로 값을 넣어줘야 함

① 내장객체이기 때문에 별도로 생성해 줄 필요가 없음

② 서버상에 데이터가 저장되기 때문에 응답하면서 다시 되돌려 줄 필요가 없음

세션 가져오기

　2-1 각각의 session 가져오기

object 형태로 받아오기 때문에 원하는 형태로 downcasting 필요함

String id = (String)session.getAttribute("id");
int age = (int)session.getAttribute("age");

　2-2 모든 session 가져오기

　① 모든 session의 이름을 가져오기

Enumeration names = session.getAttributeNames();

Enumeratino 열거형 : 가지고 올 때 사용하기 편한 메소드들이 기본적응로 설계 돼 있음 : 객체들을 하나씩 처리하기에 용이

② 키값에 맞는 데이터 꺼내오기

반복해서 데이터 유무 확인

while (names.hasMoreElements()) {

데이터 꺼내오기 object 형태로 돌려주기 때문에 downcasting 필요

String name = (String)names.nextElement();

session 안에 있는 정보 가져오기

 String data = (String)session.getAttribute(name);
 out.print(data);
 out.print("
");

** session 실습하기**

우선

loginform.jsp
logincheck.jsp
main.jsp
logout.jsp

총 4개의 jsp 파일을 만들어 준다.

jsp파일 이동은 위의 그림 순서대로

loginform.jsp에서 id, pw 데이터를 사용자에게 입력 받는다.



  

    아이디 : 
    비밀번호 :

↓

logincheck.jsp에서 id,pw가 test/12345와 일치하는지 판별한다.



    <%
        String id = request.getParameter("id");
        String pw = request.getParameter("pw");

        if (id.equals("test")&&pw.equals("12345")) {

            session.setAttribute("name", "쿠키몬스터");
            response.sendRedirect("ex04main.jsp");

        } else {

            response.sendRedirect("ex04loginform.jsp");

        }
     %>

2-1. 일치한다면 main.jsp로 이동한다.



    <%

    String name = (String)session.getAttribute("name");

    %>

    <%=name%>님 환영합니다.
    로그아웃

2-2. 일치하지 않는다면 다시 loginform.jsp로 되돌려 보낸다.

↓

main.jsp에서 로그아웃을 누르면 logout.jsp로 이동하여 세션을 삭제시켜 주고, loginform.jsp으로 다시 되돌아온다.

위에서 session 만들기와 받아오기는 설명을 했지만, session 지우는 것은 따로 설명을 안했기 때문에 간략하게 설명하자면

session을 지우는 방법은 두가지이다.

3-1. 내가 지우고싶은 session만 선택해서 삭제하는 방법 session.removeAttribute("session이름");

3-2. session을 모두 삭제하는 방법 session.invalidate();

  

    <%
      session.invalidate();
      response.sendRedirect("ex04loginform.jsp");
    %>

jsp 내장객체 기본영역 (Scope)

02_Arduino

Fri, 06 May 2022 07:36:01 GMT

수정예쩡

INPUT예제

digitalRead 예제

analogRead 예제

OUTPUT예제

digitalWrite 예제 analogWrite 예제

~ 아날로그

가변저항 예제

  void setup() {

  pinMode(9, OUTPUT);

}

void loop() {

  int sensorValue =analogRead(A0);

  int s = sensorValue/4;
  analogWrite(9,s);

}
sensorValue 의 최대값은 1023이고
analogWrite의 최대값은 255이므로,

범위를 맞춰주기 위해 변수 s에 sensorValue를 4로 나눈 값을 담아서
 analogWrite의 최댓값과 유사하게 맞춰준다!

 또는 sensorValue를 1023.0으로 나누고 *255를 해주면 좀 더 정확한 값을 얻을 수 있다.

 int s = sensorValue/1023.0*255;

method map을 이용하면 더 정확하게 가능하다.

map (sensorValue, 0, 1023, 0, 255);

map 안에 들어갈 값은 순서대로,

변환해야하는 센서의 값 변환해야하는 센서의 최소값 변환해야하는 센서의 최대값 표현해야하는 센서의 최소값 표현해야하는 센서의 최대값

piezo buzzer : ?

** 피에조부저 예제**

void setup() {

Serial.begin(9600);

}

void loop() {

int buttonState1 = digitalRead(4);
int buttonState2 = digitalRead(5);
int buttonState3 = digitalRead(6);

if ( buttonState1 == 1) {

 tone (13, 262, 300);
 delay (300);

  } else if ( buttonState2 == 1) {

 tone (13, 294, 300);
 delay (300);

  }  else if ( buttonState3 == 1) {

 tone (13, 330, 300);
 delay (300);


  }

}

피에조부저와 버튼을 이용해서 피아노 만들기
위 표를 보고 4번 선과 연결된 버튼을 눌렀을 때 도, 순서대로 레, 미 소리가 나오게 되는 코드

Servo Motor : ?

Servo Motor 예제

servo Motor를 사용하기 위한 라이브러리!

#include -> 라이브러리를 사용하기 위해 선언
Servo myServo; -> Servo 타입의 변수 선언 (setup, loop 둘다 사용을 위해 전역변수로 선언)
myServo.attach(pin번호);  servoMotor와 연결 돼 있는
myServo.write(각도); -> 각도는 1 - 179 범ㅋ위

릴레이모듈

dc+ dc- in => 아두이노 연결

//릴레이 모듈

void setup() {
  pinMode(13,OUTPUT);

}

int cnt = 0;
boolean check = false;

void loop() {
  int btnState = digitalRead(11);

  if (btnState == 1) {

    if (check) {
        cnt++;
        check= false;

      if (cnt == 1) {

        digitalWrite(13,1);

        } else if (cnt == 2) {

          digitalWrite(13,0);
          cnt =0;
        }
    }

  } else {

    check = true;


  }

}

01_Arduino

Mon, 02 May 2022 05:37:28 GMT

Arduino란?

아두이노란 오픈소스를 기반으로 한 대표적인 하드웨어이다. 2000년대 초반 IDII라는 교육기관의 Massimo 교수가 쉽고 저렴하게 피지컬 컴퓨팅을 가르치기 위해 만들었다. 즉 쉽고 저렴하며, 오픈소스 기반이기 때문에 접근성이 높다는 장점을 가지고 있다.

Arduin의 종류

간단히 책에 나와있는 여섯가지 종류만 나열 해 보겠다.

uno 현재 내가 사용하고 있는 보드로 가장 표준적인 모델이다. 아두이노를 접하는 사람들에게 추천하는 보드로 아주 기본적인 성능을 갖추고 있다.
mega 우노보드로는 아주 기본적 기능만을 이용할 수 있기에, 복잡한 것을 만들 때 부족함을 느끼게 될 것 이다. 이때 이용하는것이 메가보드이다. 우노보드에 비해 크기가 크고 부품도 더 많이 연결할 수 있으며 용량도 더 크기 때문에 우노보드보다 좀 더 전문적인 프로젝트 분야에서 사용한다.
esplora 탐험이란 뜻을 가진 esplora보드는 하드웨어를 잘 다루지 못하고, 부품을 연결하는 것 조차도 어려워 하는 사람들을 위한 보드이다. rgb led나 마이크 등이 기본적으로 연결 돼 있다.
lilypad 옷이나 신발처럼 착용 가능한 웨어러블 기능을 가진 보드로, 옷이나 천에 릴리패드를 바느질 해 사용할 수 있다. 또 전기가 통하는 실을 이용해 원하는 부품을 연결 해 사용할 수 있다.
mini/ nano 부피가 작은 물건에 넣고 사용할 수 있도록 만든 보드이다. 성능은 우노보드와 비슷하며 mini보드에 부품을 연결하기 위해선 납땜을 할 줄 알아야 하며, 9v이상의 전원이 연결되지 않도록 해야한다.
yun 구름이란 뜻을 가진 yun은 사물인터넷을 위한 보드이다. 인터넷에 구름으로 많이 비유되기 때문에 이와같은 이름이 지어졌다. 이더넷과 wifi가 있어 랜선을 꼽거나 무선인터넷을 통해 쉽게 인터넷에 연결이 가능하다.

이것은 내가 사용하는 우노보드이다. 우노보드는 전기를 이용해 동작한다. 기본적으로 유에스비선을 이용해 우노보드와 컴퓨터를 연결하지만 건전지로 연결도 가능하다.

출처 : https://roots2019.tistory.com/336

우노보드의 구성은 위의 그림으로 대체하겠다.

아두이노 보드와 컴퓨터를 연결하면 코드를 업로드 하여 보드를 원하는대로 작동하게 할 수 있는데, 그러하기 위해서 아두이노 IDE를 다운받아야 한다.

아두이노 IDE 다운받기!

위 링크로 접속 후 본인 컴퓨터의 운영체제에 맞는 설치 파일을 다운받으면 된다.

아두이노는 c언어를 기반으로 하고 있으며, 우리가 보드에 여러 부품을 연결했을 때 코드를 작성하기 위해서는 sensor와 actuator를 구분할 수 있어야 한다.

*Sensor * 감각하여 알아내는 장치 말 그대로 센서는 외부의 반응을 읽어오는 부품들을 말한다. 버튼을 눌렀는지 안눌렀는지, 빛이 들어오고 있는지 아님 어두운지 등 정보를 확인 후 컴퓨터에게 정보를 제공하는 역할을 한다. ex) button, 조도센서, 온도센서, 거리센서

Actuator 시스템을 움직이거나 제어하는 기계 장치 센서와는 반대로 내가 원하는 신호를 주어 원하는 활동을 할 수 있도록 만들어주는 부품이다. 일정 조건을 충족하면 빛을 내게 해준다거나, 소리를 나게 한다거나, 모터가 돌아가게 한다거나 등 외부의 반응을 읽어오는 것이 아닌 내가 컴퓨터에 명령을 하는 것이라고 생각하면 쉬울 것 같다. ex) led, 모터

sensor와 actuator을 기준으로 작성되는 코드가 나뉜다.

	Sensor	Actuator
PinMode	Input	Output
Digital	DigitalRead	DigitalWrite
Analog	AnalogRead	AnalogWrite

sensor와 actuator을 기준으로 코드가 나뉘는데, pinmode는 신호를 읽어오는지 밖으로 내보내는지의 차이, digital신호 analog신호는 전등으로 비교해보자면 digital은 껐다, 켰다 기능만 있는 전등이고, analog는 빛의 밝기를 조절할 수 있는 전등이라고 생각하면 쉽다.

01_HTML 개요

Thu, 28 Apr 2022 08:41:46 GMT

#20220425

#Web

WWW (World Wide Web)

인터넷에 연결된 컴퓨터들을 통해 사람들이 정보를 공유할 수 있는 전 세계적인 정보 공간

웹 브라우저 (Web Browser)

웹 서버에서 이동하여 쌍방향으로 통신하고 HTML문서나 파일을 출력하는 프로그램!

HTTP (Hyper Text Transfer Protocol) ?!

-> 월드 와이드 웹 (World Wide Web)을위한 데이터 통신수단 텍스트 기반의 통신 규약으로 인터넷에서 하이퍼텍스트 (Hypertext) 문서를 주고받을 수 있음

요청 : Client → Server 응답 : Client ← Server

Client 클릭한 페이지를 요청하는 pc

-> 네트워크로 연결된 서버로부터 정보를 제공받는 컴퓨터

Server 클릭된 페이지를 제공하는 pc -> 클라이언트에게 네트워크를 통해 서비스를 제공하는 컴퓨터

https는 HTTP + Security => 좀 더 보안이 강화된 것,,?!

HTML (Hyper Text Markup Language)

팀 버너스리가 창시한 웹페이지에 정보를 담아 표시하기 위한 마크업 언어

- Hyper Text

현재 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트

- Markup

어딘가에 Mark, 즉 표시를 해두는 것

** html의 구성요소**

 -> html문서형식정의
     -> html문서의 머릿글
         ->html문서의 정보정의
         -> html문서 제목 정의
    
     -> html문서의 본문 정의
        환영합니다
    


안녕하세요  
=======> Element (요소) <========

시작태그 
컨텐츠  안녕하세요
끝태그 
속성(attribute) align 
값(value) center

01_JSP/Servlet

Thu, 28 Apr 2022 03:52:58 GMT

#수정중

node

중간노드 (host) : 노드 중에서 애플리케이션을 실행할 수 있는 컴퓨팅 시스템을 갖춘 기기

client와 server => 호스트 사이에 제공되는 서비스를 기준으로 호스트를 세분화 임의의 호스트가 클라이언트나 서버로 고정되지 않고 이용하는 서비스의 종류에 따라 클라이언트가 될 수도 있고 서버가 될수도 있음

client : 서비스를 요청하고 사용하는 호스트 => web browser ↓ 요청 　　　　　　　↑ 응답 server : 서비스를 제공하는 호스트 => web server

대표적인 web server의 종류

Microsoft IIS
APACHE HTTP SERVER

1). 오픈소스 2). 다양한 모듈 제공 3). 강력한 커뮤니티, 다양한자료 4). 확장성 좋음 5). 보안 수준 높음

NGINX

정적 페이지 (Static Web Page)

서버에 미리 저장된 파일(HTML, 이미지, JavaScript)이 그대로 전달되는 웹페이지
사용자는 서버에 저장된 데이터가 변경되지 않는 한 고정된 웹 페이지를 보게됨

동적페이지 (Dynamic Web Page)

서버사이드 스크립트 언어

프로그램이 동작되기 위한 작업을 서버에서 제공

서버측에서 내부로직을

php

JSP

ASP.NET

Servlet

Server +Applet 서버상에서 작동하는 응용프로그램

java를 기반으로 하는 web application programming 기술 client 요청에 동적으로 작동, 응답은 html 형식으로 제공

Web Server : 정적인 컨텐츠를 제공하는 서버 : 요청을 컨테이너로 전달하고 결과를 넘겨주는 역할

WAS (웹서버 + 웹컨테이너) : 동적인 컨텐츠를 제공하는 서버

Web Container : JSP와 Servlet을 실행할 수 있는 SW

Client Tier(Presentation Layer) 사용자 인터페이스 지원 주로 웹서버를 뜻함 ex) HTML, JavaScript,CSS,image ** Application Tier(Business Layer)** 정보처리의 규칙을 가짐(동적 데이터 제공 주로 어플리케이션을 뜻함(was 서버) ex) java EE, ASP.NET, PHP

Data Tier(Data Layer) DB또는 File System을 접근 및 관리 주로 DB서버를 뜻함 (DB서버) ex) MYSQL DB, Oracle DB

Servlet이란?

✔.java 확장자를 가짐

✔java Multi Thread를 이용하여 동작함 -> 속도와 메모리 면에서 효율적임

✔객체지향적 -> 대규모 Application 개발에 적합함

✔HttpServlet 클래스를 상속받음

Java Multi Thread

CGI프로그램은 프로세스 단위로 실행 사용자의 요청이 많을 땨는 서버에 바하가 크게감

프로세스 하나당 자원을 할당

Servlet은 스레드 단위로 실행 서버의 부하를 줄일 수 있음 (자바 기반이며 ,자바가 다중 스레드를 지원)

객체생성 ↓ init() : 초기화 ↓ service()　　doget 　　ㅡ　로직 ↓　　　　　dopost()　　／ destory() :파괴

URL Mapping 방법1 : annotation 사용

클라이언트 -> server 서버 servletResponse interface

request 클라이언ㅇ트의 요청정보를 서블릿으로 넘겨주기 위한 객체ㅔ ( 요청에 대한 정보를 가진 객체)

01_CSS 선택자

Wed, 27 Apr 2022 07:14:02 GMT

#20220426

선택자의 종류

예시! 아래 코드를 기준으로 설명 해 보겠다.

1. 전체선택자 => 위 코드 전체에 적용된다.

* { }

2. 태그선택자 (타입선택자) 태그명 { }

p { }
li { }

3. 클래스선택자 => 중복, 재사용이 가능하다 .클래스명 { }

.div { }

4. 아이디선택자 => 한개의 html문서 내에서 동일한 id는 중복사용이 불가능하다. #아이디명 { }

#li_1 { }

5. 계층선택자

✔ 얘는 처음보는 선택자였다..! 이 친구는 계층선택자와 클래스선택자 사이정도의 순위가 적용된다.

위의 코드를 기준으로, div가 제일 큰 상위태그이고 그 하위로 p태그와 ol태그, ol태그 하위로 li태그가 세개 존재한다.

계층선택자에는 이렇게 네가지가 있다.

5-1. 자식 선택자 > => 말 그대로 하위의 태그를 의미! div를 기준으로 p와 ol태그가 자식 선택자이다.

div>p
div>ol

5-2. 자손 선택자 블링크 => 한 태그를 기준으로 하위태그의 하위태그를 의미! div를 기준으로 li태그 세개가 자손 선택자 이다.

div li

5-3. 후행선택자 ~ => 하위, 상위 태그가 아닌 동등한 태그들 li태그가 세개기 때문에 id로 값을 줬다.

id값이 #li_1을 기준으로 순서에 상관 없이 아래에 있는 #li_2, #li_3 태그들이 후행 선택자 이다! 형제 개념으로 생각하면 될 것 같다.

#li_1~#li_2
#li_1~#li_3

5-4. 근접후행선택자 + => 후행선택자와 비슷한 개념이나 바로 근접해있는 태그!

#li_1을 기준으로 #li_2가 근접후행 선택자이다.

#li-1+#li_2

+ nth:child(순위) 이거는 바로 예시로 들어보자면 li:nth-child(2) => 는 아이디가 li_2인 li태그를 의미한다..

이건 내가 보려고 정리한,,짱구가족으로 비유한 계층선택자

Ex 짱구가족 : 
신조상,
신용달 
신형만
신짱구 신짱아 신흰둥 
= 짱구를 기준으로 짱아는 후행이자 근접후행 흰둥이는 후행 

  1-1. 자식선택자 >
   신형만 > 신짱구 
   신용달 > 신형만 

   1-2. 자손 선택자 -> 띄어쓰기
    신용달 신짱구
    신조상 신짱구

   1-3. 후행선택자 -> ~
      신짱구 ~ 신흰둥 
      신짱구 ~ 신짱아 => 짱아는 후행이면서 근접후행선택자 */

   1-4. 근접후행선택자 -> + 
       신짱구 + 신흰둥 
       신짱아 + 신흰둥

*6. 그룹선택자 * =>선택자들을 중복으로 묶어서 같은 스타일을 적용할 수 있다. 태그 , 태그 { }

p, li { }
#li_1, #li_2 { }

style 시트 내 코드는 위에서 아래로 흐르지만,

전체선택자 0 < 타입선택자 1 = 그룹선택자 1 < 계층선택자 3 < 클래스선택자 10 < 아이디선택자 100 순으로 가중치가 적용 된다 (우선순위)

!important > 인라인 > 내부 > 외부 > id > class > type > 전체

다 같을때 나중에 선언 > 먼저선언

반응선택자

1. hover : 마우스를 올려놓으면 스타일 적용

선택자:hover { }

 #h:hover {
  color : yellow;
  }

안녕 나는 hover야~ 마우스를 올려봐

2. active : 마우스로 클릭시 스타일 적용

선택자:active { }

 #a:active {
  color : pink;
  }

안녕 나는 active야~ 눌러봐

3. visited : 1번이상 방문한 링크에 대해서 적용

선택자:visited { }

 #v:visited {
  color : orange;
  }

안녕 나는 visited야~

4. link : 방문을 하지 않은 링크에다가 스타일 적용

선택자 : link { }

#l:link {
  color : skyblue;
  }

안녕 나는 link야~

5. not : ()내 선택자를 제외하고 스타일 적용

선택자 : not() {}








.h>p:not(#n2) {
color : deeppink;
}

안녕 나는 not1이야~

안녕 나는 not2이야~

안녕 나는 not3이야~

💨 div내에 not1, not2, not3 중에 not2에만 style을 미적용!!

// 엥,,? 왜css가 안먹지 .. 미리보기로는 먹히는데 ㅠ

01_JAVA_기본자료형

Tue, 26 Apr 2022 13:40:48 GMT

두달만에,, 올리는 Velog! 2월에 인강을 듣다가,, ㅎㅎ 3월에 퇴사 후에 현재 스마트인재개발원에서 IoT과정을 수료중이다! 처음 접해보는 지식들이 휘몰아쳐서 벨로그는 거의 잊고있다가.. css랑 html 배우면서 숨돌리는 틈에 그동안 배웠던 것을 정리해보려고 한다!

#20220315

자바의 기본 자료형 (Primitive Data Type)

논리형 - boolean : 참과 거짓 / 1byte
```
 boolean a = true;
 boolean b = false;
```
문자형 - char : character를 의미하며 유니코드 문자를 표현 / 2byte
```
 char c = 'a';
```

정수형 - byte, short, int, long

 byte : -128~127 / 1byte
 short : -32,768 ~ 32,767 / 2byte    
  int : -2,147,483,648 ~ 2,147,483,647 / 4byte
  long: -9,223,372,036,854,775,808 ~ 9,223,372,036,854,775,807 /8byte

 => 보편적으로 integer을 의미하는 int를 많이 쓴다.

   int d = 8;

실수형

 float : +-(1.40x10^-45 ~ 3.40x10^38)    / 4byte
 double : +-(4.94x10^-324 ~ 1.79x10^308) / 8byte

 => 크기의 차이로 정밀도를 기준으로 선택하면 된다. double이 손실값이 더 적다!

  double e = 3.14;

  // 강제형변환 (명시적형변환)
  => 큰 자료형에서 작은 자료형으로 이동할 때 오류가 발생하는것을 막기위해서 강제적으로 형변환 해주는 것!

  float h = (float) 3.14
  float f = 1.5f;

 // 묵시적형변환(자동형변환) 
 => 작은자료형에서 작은자료형으로 이동할때 자동으로 형변환을 시켜줌!

   double g = e;

✔ 레퍼런스형인 String : 기본 데이터타입은 아니지만 자주쓰기 때문에 미리 적어놓겠다!

   char은 한글자밖에 표현을 못하기 때문에 String을 사용한다

    String name7 = "abc";

위 예시들은 기본데이터형을 사용하여 변수를 선언한 것이다.

변수 : variable 변할 수 있는 수로 프로그래밍에서는 데이터를 저장하는 공간을 의미한다.

변수를 선언할 때는 자료형 변수명 = 값; ex) int a = 0;

형태를 띈다. 현재 a에는 0이라는 값이 할당 돼 있다.

a의 값을 재할당할때는 자료형 없이

변수명 = 값; ex) a = 1; 이렇게 작성하면 된다.

그와 반대되는 개념으로 상수가 있다.

상수 : constant 변하지 않는 수이고, 데이터를 담을 수는 있지만 한번 넣으면 변하지 않는다.

즉 절때 변하면 안되는 중요한 데이터는 상수로 표현한다!

final 자료형 변수명 = 값; ex) final b = 10;

변수명을 지정해줄때는 규칙이 존재한다.

예약어 사용 불가능

java내에서 사용되고 있는 키워드들은 사용이 불가능 하다. (위 표 참조)

대소문자가 구분되며 길이제한이 없다 . (int true; != int TRUE;)
숫자로 시작할 수 없다.
특수문자는 _와$만 허용된다.

그 외에도 필수는 아니지만 프로그래머들간의 규칙이 있다.

변수 이름의 첫 글자는 항상 소문자 ex) int sum = 0;
변수 이름이 여러단어로 구성 돼 있을 시 단어의 첫글자를 대문자 ex) int maxValue = 0;

08_JQuery

Sun, 20 Feb 2022 18:13:24 GMT

새로 배우는거,, 이제 인강 선생님은 재밌다고 하시는데 일단 시작도 전에 전태휘가 겁줘서 무섭다 갑자기 왜 벌써 이거 배우냐고,,,

이렇다는데..? ㅋㅋㅋㅋㅋㅋㅋㅋ 아무튼 사실 아직 배우기도 전에 작성한거라 이제 공부하고 다시 작성하러 오겠습니다...

1. JQuery 란?!

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

1) 코드가 복잡하고, 2) 브라우저 간 호환성 문제도 고려

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

css의 부트스트랩과 유사하다고 생각하면 되겠다!

부트스트랩을 사용하기 위해 부트스트랩 템플릿을 사용했던 것처럼

JQuery 도 w3schools 여기서 가지고 왔고, 출처 쓰는 나 제법 젠틀해요..

이걸 넣어줘야 한다. (부트스트랩 템플릿 사용 시 이미 있으므로 안넣어줘도 됨)

2. input 박스 값 가져오기

그때 만든 나홀로메모장에서 콘솔창을 열어봅시다

아 파이참에서


             
                 아티클 URL

요 친구들 원래 id 이름이 다른거였는데 article-url 로 바꿔줬음

현재 박스의 상태는

요롷고

 $('article-url').val()

를 입력했을때 저 input 박스 안의 세종대왕이 출력된걸 보니

대충 기능이 유추 가능함, val()안에 다른 글자를 넣으면 그 글자가 input 박스 안에 출력된다.

간단코멘트에도 똑같이

$('#simple-comment').val('이단추는 짱기여워');

하면 됨!

3. div 보이기/숨기기

별거 없다. 예를 들어 box를 없애고 싶으면

div에 이름을 주고, 콘솔창에

$('#postbox').hide()

입력해주면

짠 사라졌다.

보이게 하려면 .hide() 대신에

$('#postbox').show()

를 입력하면 된다

('#postbox').css ('width','700px')
S.fn.init [div#postbox.box]

$('#postbox').css ('display')
'block'

$('#postbox').hide()
S.fn.init [div#postbox.box]

$('#postbox').css ('display')
'none'

이거는 뭐,, postbox 의 width 를 700px 로 조정 postbox의 display 값은 block 이고 postbox를 숨겼을때 display 값은 none!

4. 태그 내 텍스트 입력하기

위에서 배웠던거 응용 버젼인듯,,?

포스팅박스에 id 값을 주고

$('#btn-posting-box').text('hi')

이렇게 하면

하이로 바뀜!

.text()는 글씨를 바꾸는 것,,

5. 태그 내 html 입력하기

'`' 이 친구의 이름은 백틱

그 일단.. 선생님이 재밌다고 하는거는 어려운거라고 생각하면 될 것 같다. ㅇㅅㅇ 이 표정으로 봤음

일단.. 저 card columns 친구에게 id 값을 주고,,

let temp_html = ``
undefined

$('#card-columns').append(temp_html)
S.fn.init [div#card-columns.card-columns]

저렇게 하면 card-columns 에 button 이 생긴다.

$('#card-columns').append(temp_html)

많이 하면

많이 생김 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

응용하기!!!

button 태그는 짧아서 쉬우니까 card-columns 안에 있는

요 친구를 복사해 보자

똑같이 let temp_html 에 저 코드를 복사해서 넣자

let temp_html = `
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            
`

고 담에 똑같이

$('#card-columns').append(temp_html)

애를 입력해주면

짠짠 복사 됨!

이건 ,, 좀 심화버전인데

변수 넣기!

let tittle ='아무거나 제목'

let temp_html = `
                
                
                    ${tittle}
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            `

저기 달라진 부분이

${tittle}

card-tittle 옆에 ${tittle} 변수를 집어 넣어 주고 원제목을 삭제했다

고 다음에 똑같이

$('#card-columns').append(temp_html)

이거 입력해주믄

왜 난 오른쪽으로 생기는지 의문이긴 한데 아무튼 되긴한다... ㅋㅋㅋㅋㅋㅋ

이제 실습! 기능 구현하기

포스팅박스 열고 닫기

~~는 졸려서,, 내일 수정하도록 하겠습니다.....~~

'포스팅박스 열기'를 누르면 포스팅박스가 나타나면서 버튼이 '포스팅박스 닫기'로 바뀌면서 포스팅박스가 사라지는 기능을 넣어 보겠다!

여기서 잠시,, 주석처리 하는 방법!

JS랑 CSS

// 는 한줄
/* */은 여러줄!

HTML은

복습이기 때문에.. 주석처리 해놓고

onclick="hi" 이름을 openclose 로 바꿔주겠따!

function openclose() {
            alert ('되나?')
        }

잘되나 한번 확인해보기...

잘되네욤

콘솔창 열어서

$('#postbox').css('display') 상태 확인해보기

근데 나는 왜 block 이라고 안뜨고 none 이라고 뜨지 ,,? 당황스럽다...

아무튼

let status = $('#postbox').css('display') 애를 function 안에 집어 넣어주고,

이제 만약에 postbox 의 상태가 block 이면, postbox를 hide 하고 아니면 show 하게 만들어 보겠다.

 if (status == 'block'){
                $('#postbox').hide();
            } else {
                $('#postbox').show();
            }

짠 이렇게 열고 닫기 완성

왜 none 인데 되는지는 모르겠지만 ^^,,ㅋㅋㅋㅋㅋㅋㅋ

~~보니까 내가 display none 설정해놓고 왜 안되냐고 찡찡대고있었네..~~

이제 포스팅박스가 열렸을 때 박스가 닫기로 바뀌게 만들어 보겠다.

$('#btn-posting-box').text('');

를 사용해서 postbox 가 hide 상태일때는 당연히 포스팅박스 열기 를/ show 일때는 포스팅박스 닫기가 나타나야 하기때문에

 function openclose() {
            let status = $('#postbox').css('display')
            if (status == 'block') {
                $('#postbox').hide()
                $('#btn-posting-box').text('포스팅박스 열기');
            } else {
                $('#postbox').show()
                $('#btn-posting-box').text('포스팅박스 닫기');
            }

요로케!

처음부터 posting box가 닫혀있는게 깔끔하므로

postbox 안에 display : none 설정 해주면 끝!!

07_자바스크립트 3

Sun, 20 Feb 2022 16:48:48 GMT

지금까지 배운거 복습!

1. 서울시내 미세먼지 리스트

너무 길기 때문에

mise_list
(25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '중구', PM10: 22, PM25: 14, …}
1: {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '종로구', PM10: 24, PM25: 18, …}
2: {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '용산구', PM10: 0, PM25: 15, …}
3: {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '은평구', PM10: 36, PM25: 14, …}
4: {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '서대문구', PM10: 28, PM25: 9, …}
5: {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '마포구', PM10: 26, PM25: 8, …}
6: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '광진구', PM10: 17, PM25: 9, …}
7: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '성동구', PM10: 21, PM25: 12, …}
8: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '중랑구', PM10: 27, PM25: 10, …}
9: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '동대문구', PM10: 26, PM25: 9, …}
10: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '성북구', PM10: 27, PM25: 8, …}
11: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '도봉구', PM10: 25, PM25: 12, …}
12: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '강북구', PM10: 30, PM25: 15, …}
13: {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '노원구', PM10: 21, PM25: 14, …}
14: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '강서구', PM10: 36, PM25: 16, …}
15: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '구로구', PM10: 23, PM25: 10, …}
16: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '영등포구', PM10: 29, PM25: 15, …}
17: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '동작구', PM10: 29, PM25: 15, …}
18: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '관악구', PM10: 27, PM25: 12, …}
19: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '금천구', PM10: 25, PM25: 15, …}
20: {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '양천구', PM10: 0, PM25: 14, …}
21: {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강남구', PM10: 31, PM25: 16, …}
22: {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '서초구', PM10: 34, PM25: 13, …}
23: {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '송파구', PM10: 25, PM25: 6, …}
24: {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강동구', PM10: 24, PM25: 14, …}
length: 25
[[Prototype]]: Array(0)

고냥 이 mise_list 로 대체하겠다

for (let i =0; i

아까 했던것처럼, 숫자 대신 mise_list의 length 를 넣으면

이런식으로 불러오는데 너무 길어서 짤렸다.. 내가 원하는 정보만 보고싶을땐,

화살표를 열어서

{MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강동구', PM10: 24, PM25: 14, …} ARPLT_MAIN: "PM25" CO: 0.4 IDEX_MVL: 39 IDEX_NM: "좋음" MSRDT: "201912052100" MSRRGN_NM: "동남권" MSRSTE_NM: "강동구" NO2: 0.02 O3: 0.016 PM10: 24 PM25: 14 SO2: 0.002 [[Prototype]]: Object

확인 해 볼수 있다.

예를들어, 구와 미세먼지 수치를 보고싶다면

for (let i =0; i

이렇게 입력하면 짜라란 ,,,


if를 이용해 40보다 수치가 작은 구만 보고싶을 때는
for (let i =0; i 
이렇게 입력해주면 된다.

2.서울시 따릉이 현황
얘는 ,, 길어도 넘 길어서 그냥 캡쳐로 생략,,^^

for (let i =0; i 
parkingBikeTotCnt: "9"
rackTotCnt: "37"
shared: "0"
stationId: "ST-58"
stationLatitude: "37.52136230"
stationLongitude: "126.92346191"
stationName: "212. 여의도역 1번출구 옆"
[[Prototype]]: Object
dict 구성은 이렇다.
parkingBikeTotCnt 이게 bike 의 수량이고
stationName 이게해당 역 이름
for (let i =0; i 
이걸 입력해주면 역 이름과 자전거의 수량이 나온다.

이런식으로!
만약 bike 가 5개 미만인 곳을 알고 싶으면 
if (bike <5) 만 넣어주면 된다.
for (let i =0; i 
3. 파이참에서 사용해보기
그때 만든 나홀로링크 메모장에서
포스팅 박스열기를 눌렀을때,
홀수로 클릭시 '홀수입니다'
짝수로 클릭시 '짝수입니다'
팝업 뜨게하기
전에 사용했던 
funtion hey() {
    alert('안녕');
}
바꿔보자
홀수랑 짝수는,, 오 신박하게
나눴을 때 나머지가 있는지 없는지로 판단한다.
function hey() {
           if (count % 2 == 0) {
               alert('짝수입니다')
           } else {
               alert('홀수입니다')
           }          
요롷게! 이제 버튼 누를때마다 count 를 1 씩 늘려야 하기때문에
count += 1;
이걸 이용해 준다
count = count + 1;
이거랑 같다. count에 1씩 더해준다는 뜻

       function hey() {
               let count = 1;
           if (count % 2 == 0) {
               alert('짝수입니다')
           } else {
               alert('홀수입니다')
           }
           count +=1;
       }
이렇게 하면
홀수입니다. 팝업이 뜨기는 하는데 count가 +1이 되지 않는다!
왜냐?! 함수가 한번 작동할때마다 count 가 초기화 돼서 새로운 count 가 생긴다고,, 이해 했다. 
그렇기 때문에 let count = 1;를 function 밖으로 보내줘야 한다.
let count = 1;
       function hey() {

           if (count % 2 == 0) {
               alert('짝수입니다')
           } else {
               alert('홀수입니다')
           }
           count +=1;
 요로케
 그러면 누르는 횟수가 증가할때마다
 

팝업이 뜬다.
아무튼 function 밖으로 보내면 script 전체에 적용이 된다! 라고 이해하면 될듯 싶다.
요로케 js 끗~



06_자바스크립트 2
Sun, 20 Feb 2022 15:07:52 GMT
놀다가... 이제왔다.. 이번주 내내 이벤트가 넘 많았어..
오늘도 인강을 안들으면 너무 쓰레기 같기 때문에 꾸역꾸역 들으러 왔다.
자바스크립트는 왜이렇게 어렵지,,,? 함수는 진짜 도라버릴것같다
function sum(num1,num2){
    return num1+num2
}
오늘 함수를 배웠는데 ,, 이게 그래도 전에 숙제할 때 한번 해봤던 기억이 있어서 어찌저찌 이해는 갔지만 'return'의 쓰임은 진짜 봐도 모르겠다. 블로그를 읽어봐도 return 뒤에 따라오는 값을 함수의 결과로 반환한다. 함수를 종료한다. 주어진 값을 함수 호출 지점으로 반환한다. 이러는데 진짜 무슨말인지 1도 이해가 안간다
하.. 아무튼
이제 뭐.. 
let result sum(2,3)
을 입력하면 저 식 안에 2,3 이 대입되는 것 까지는 이해 간다.
result를 입력하면 당연히 5가 나오겠ㅈㅣ
function mysum(num1,num2){
    alert('안녕!')
    return num1+num2
}
이제 뭐 그다음으로 전에 사용했던 alert ! 넘 반갑다 갑자기.. 쫘식...
아무튼 result 는 이미 사용했으니 result2를 사용해
let result2 sum (2,3)
을 입력하면

짜란 팝업이 생긴다.

모르고 밀어서 새로 만들었는데, 확인을 해야 result 에 8이 들어간다.
그러니까 순서대로 5,3을 넣고/alert로 알람을 띄우고/return 을 하라는 의미 란다... 
언젠간 이해가겠지 return..?
아무것도 안받을때는

funtion mysum(){
    alert('hi')
}
저번에 했던것처럼 하면 된다!
let age = 24

if (age > 20){
    console.log('성인입니다')
} else {
    console.log ('청소년입니다')
}
이거는 이제 조건문!
age 가 24살 이기 때문에
성인입니다. 라고 뜨겠죠?
이번에는 성별도 같이!
let age = '24'
let sex = '남성'

if (age > 20&& sex == '남성'){
    console.log('성인 남성입니다')
} else {
    console.log ('청소년입니다')
}
24살 남성이기 때문에 당연히 '성인 남성입니다'가 뜨겠죠?
or은 || <백스페이스바 하단에 있는것 을 사용한다.
응용해서
if age = 20
if sex = '남성'

if (age > 20&& sex == '남성'){
    alert('성인 남성입니다')
} else {
    alert ('청소년입니다')
}

짠 이렇게 팝업 띄우기
이거는 else if 문인데
let age = 5

if (age > 20){
    console.log('성인입니다')
} else if (age > 7) {
    console.log ('청소년입니다')
} else {
    console.log ('아동입니다')
}
5살이기 때문에 '아동입니다' 
여기까지는 할 만 하다.
이제 쫌 어려운 반복문 ,,,,,
0부터 99까지 출력을 원할때 
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)
이렇게 써도 되지만,, 우리는 컴퓨터를 이용하기 때문에
for (let i = 0; i < 10; i++){
    console.log(i)
}
i가 0부터, 10보다 작을때, i가 1개씩 커진다 라는 뜻

자 이제 응용해서
let people = ['철수','영희','민수','형준','기남','동희']
people.length
사람들 리스트를 불러와보자
people이라는 list의 길이는 6이다. 6명이니깐..
아까 i 대신 peolpe.length를 대입해보면
for (let i=0; i < people.length; i++){
    console.log(people[i])
}
i가 0보다 크고, people.length 보다 작을때 i 가 1씩 커진다.

짠 리스트가 나온다
따라해보기!
let pet = ['단추','몽이','둥둥','나리','미미','살구','보루','푸리','설탕','치즈']
pet의 length는 10이다 10마리기때문에... 생각나는 동물칭구칭긔들 다넣었음,,
i대신 pet.length를 넣어주면

짠 pet의 리스트가 나온다
let scores = [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
  {'name':'형준', 'score':50},
  {'name':'기남', 'score':68},
  {'name':'동희', 'score':30},
]
자 다음은 애네,,,
사실 방금 return에 대ㅐ해 물어보고 왔는데 더 복잡해졌다 흑흑... 그래서 기운이 없을 예정..
아무튼 scores라는 이름의 list 인데,
scores 의 list의 length는 6이죠,,?
scores[0]번째는 {'name':'철수', 'score':90} 당연히 이 친구들이다.
scores[0]['name'] 은 철수! 
for (let i = 0; i < scores.length; i++){
    console.log(scores[i])
}
이걸 이용하면 scores의 list가 뜬다

이로케!
for (let i = 0; i < scores.length; i++){
    console.log(scores[i])
}
를 응용하면 scores의 name 이나 score 만 볼수도있다.

이런식으로!

name 에 scores의 name을 정의해주고
score에 scores의 score을 정의 해준 뒤에
console.log(name,score) 을 입력해주면
저렇게 이름과 스코어 갖고오기도 가능!
if문도 
for (let i = 0; i < scores.length; i++){
    let name = scores[i]['name']
    let score = scores[i]['score']
   요친구들 뒤에 만약 50점이 넘는 친구들과 점수만 불러와줘~ 
   if (score > 50) {
    console.log(name,score)
}

이렇게 50점이 넘는 친구들만 불러온다. 
같거나 크다, 같거나 작다를 입력하고 싶으면 부등호 뒤에 =을 붙여주면 됨
<= 같거나 작다/>= 같거나 크다
다음편엔,,, 이제 정말 본편으루



05_자바스크립트
Wed, 16 Feb 2022 15:36:06 GMT
ha... 자바스크립트.. 이름만 봐도 갑자기 눈물이 줄줄 나온다.. 왜이렇게 어렵지
분명히 그때는 이해했는데 시간지나면 1도 모르겠음
내가 이해한 유일한 하나
script 안에 java script를 넣는다. 
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
아 팝업창 띄우기랑 하이퍼링크도 생각은 난다.
alert 랑 location
자고 일어나면 까먹었을지도 ...
근데 이제 콘솔창으로 가면 갑자기 머리가 하얘짐..
하 얘는 따라하기도 벅차서 대충 기억나는것만 적어보자면 ..
//변수, 자료형, 함수, 조건문, 반복문
일단 이정도만 ..
변수
let a=1
a+3 = 4
숫자가 아닌 문자열도 가능하다.
let first_name ='wonju'
let last_name ='lee'
first_name + last_name =wonjulee
문자열은 ''가 붙어야 함!
근데 의문인거 a=1 을 해도 사칙연산 사용할때는 문제가 없던데 뭔차인지 ?
일단 a=1은 그냥 단순히 a에 1을 대입해라 라는것까지는 이해갔음
근데 let a=1 은 이해가 안감 ..
암튼 내생각에 오류창 보고 느낀건데 let a=1은 a를 1로 정의해라 정도의.. 차이가 아닐까 싶다
아직까지는 큰 차이는 모르겠다.
자료형
let a_list = ['수박','참외','배']
라고 정의했을때
이제 컴퓨터는 0부터 인식을 하기 때문에
a_list[0] = 수박
a_list[1] = 참외
a_list[2] = 배
이렇게 된다.
추가를 윈할때는
a_list.push('감')
이렇게 .push를 이용! 
'동적으로 추가된다'라고 이야기 한다고 함
dictionary 형은
let a_dict = {'name':'juju','age':'26'}
이렇게..
a_dict['name'] = juju
a_dict['age'] = 26
이렇게 되는 것이다 

고쥐몽한테 이거 보여줬더니 몽이가 왜 고양이냐고 혼났다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그러더니 이거 해달라고 조름...
나도 웃겨서ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

일단 리스트로 각각 구분주고

혼자 오류나서 승질냈는데 보니까 a랑dict사이에 언더바 빼먹었네.. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
암튼 부끄러우니까..^^ 중간오류 좀 빼먹고

짜라란 ,,, 실력 점점 늘어~
보여줬더니 더 어려운거 해주란다

연습할겸 둥둥이도 추가해봤다... 정둥둥 기여워
머 이제 그 외에도

%는 나머지구하기

곱하기


/ 나누기

부등호도 가능하다.


==은 같다
!= 다르다

마지막으로 분리하기!
split('') '' 안의 문자를 기준으로 나눠짐

짠 이런식으로!
그나마 한번 더 복습했더니 저번보다는 할만하다 ㅠ.. 하 자바스크립트 너무 어려워
근데 이게 쉬운거고.. js2편이 정말 어려웠다.... 
오늘은 좀 쉬고 내일 다시 복습하고 강의들어야지!!!!



04_부트스트랩2
Wed, 16 Feb 2022 13:38:55 GMT
어제는 너무 피곤해서.. 암것도 안하구 그냥 8시에 잠들었다. 그랬더니 애매하게 깨서 잠을 더 못잠 ....
아무튼 전 포스팅에서  

이렇게 메모장을 완성했는데,
이번에는 추가로 가운데에 추가로 박스를 만들어 볼 예정이다.

예시!


자 부트스트랩에 들어가서

https://getbootstrap.com/docs/4.0/components/forms/

forms 탭을 열어보면
유사한 형식을 찾을 수 있다. 

'간단 코멘트'는 네모박스 모양이 좀 달라서

맨 하단 example textarea 를 이용하겠다.

  
    Email address
    
    We'll never share your email with anyone else.
  
  
    Password
    
  
  
    
    Check me out
  
  
일단 비밀번호 태그랑 체크박스 태그는 쓸모가 없기 때문에 잘 지워주고, 아까 example textarea 태그를 비밀번호 태그 자리에 넣어준다.

    Example textarea
    
  
그 후에 각 태그에 맞게 아티클 url/ 간단코멘트/ 기사저장을 넣어주면

             
                 아티클 URL
                 
             

             
                 간단 코멘트
                 
             

             
         

대충 비슷한 형식이 나온다.
이제 테두리를 만들어 줘야하는데,,,
div로 쟤들을 묶어주고,
border-style로 꾸며주면

허접하게 테두리가 생긴다 ㅋㅋㅋㅋㅋㅋㅋ
그러면 이제 
    .box {
        border-style: solid;
        border-radius: 5px;

        width: 500px;
        padding: 50px;

        margin: auto;
        margin-bottom: 50px;
    }
border-radius 로 태두리를 둥글게 만들어주고
width로 크기를 준 후 padding으로 내부 여백을 만들어 준다.
margin을 두번 쓴 이유는 
margin 10px 10px 10px 10px;
이렇게 입력하면 순서대로 위 오른쪽 아래 왼쪽 이렇게 적용된다는게 기억은 나는데,,,
문제는 다른데는 auto로 두고 하단만 띄우고 싶은데 그게 기억이 안난다....
내 코딩선생님은 아파서 물어보기 쩜 미안;; 네이버도 안알랴줌 ,,, 
그래서 그냥 margin-bottom 으로 여백을 줬다.. 되기만 하면 되지 뭐..
+ ㅇ ㅓ.. 인강 듣고 왔는데 그냥 auto 주면 되네
margin 0px auto 50px auto;
아무래도 위 아래/ 오른쪽 왼쪽은 맞춰줘야 돼서 오 왼은 오토를 주고 하단은 0px 50px로 맞추지 않았나 싶다.
*그리고 border 도 *
borer: 3px solid black
*이렇게 순서대로 두께, 선스타일, 컬러를 입력해줘도 된다. *

아무튼 짠 완성~
잊지말자.. border-style



03_부트스트랩 
Mon, 14 Feb 2022 15:42:17 GMT
복습을 내일 하려고 했는데 ,, 자바스크립트 복습을 안하면 도저히 못할 것 같아서..
울면서 복습을 하러 왔다.
하 오늘 복습할 내용은 부트스트랩 이용해서 

짠 이걸 만드는건데 ...
사실 자바스크립트가 너무너무 어려워서 내가 멍청한가..? 라는 마음을 갖고 지금 복습을 하는중이라 기운이 없다..
그래서 이왕 하는거 저기에 쓸 사진에 울 댕댕 사진을 너무 넣고싶은데, 네이버 블로그 사진주소 복사는 계속 오류가 나고.. 인스타그램은 주소복사가 안되고~! 
근데 또 내가 이상하게 집요한 부분이 있어서 죽어도 댕댕사진 안되면 내사진이라도 넣어야겠다 싶어서 구글에 내인스타그램 아이디 검색하고 블로그 해시태그, 제목 아이디 다검색해도 안되더니 ㅋㅋㅋㅋㅋㅋ 호호,,, 페북은 또 되네,, 그래서 얼레벌레 내사진을 넣었다.
암튼 이게 중요한게 아닌데, !! 아무튼 부트스트랩 가장 기본적인 걸 이용해서 만들거다.
사실 요정도는 이제 혼자서 만들 수 있을 것 같은 자만도 든다 킥킥 (방금까지 자바스크립트때문에 울었음 ,,)

부트스트랩 홈페이지
https://getbootstrap.com/docs/4.0/components/jumbotron/

맨 위 틀은 jumbotron 항목에서 찾았다.

  Hello, world!
  This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
  
  It uses utility classes for typography and spacing to space content out within the larger container.
  
    Learn more
  
이걸 붙여넣으면

짜잔 아무것도 안했는데 그럴싸한게 나온다.
이제 하단의 카드를 만들어야하는데
card 항목에서

요로코롬 뭉탱이로 있는 친구들을 복사해준다

  
    
    
      Card title
      This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
    
    
      Last updated 3 mins ago
    
  
  
    
    
      Card title
      This card has supporting text below as a natural lead-in to additional content.
    
    
      Last updated 3 mins ago
    
  
  
    
    
      Card title
      This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.
    
    
      Last updated 3 mins ago
    
  
이제 내가 필요한 카드는 상단 맨 왼쪽카드기 때문에 불필요한 카드들을 지워줘야 하는데,
콘솔창을 켜서 태그들에 가져다 대면

마우스를 대고있는 태그에 해당하는 항목을 알 수가 있다!
해당하는 태그는

맨 윗줄 태그였고 나머지는 지우면 되겠다.
저렇게 접고 지우는게 좋은게... 저번에 모르고 div 태그까지 같이 지워서 혼자 당황했었던 기억이 있다 ...

아무튼 그럼 이렇게 카드가 남는다.
 
        
            
            
                Card title that wraps to a new line
                This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.
            
        
    
이미지 링크를 넣으면
 
        
            
            
                Card title that wraps to a new line
                This is a longer card with supporting text below as a natural lead-in to additional
                    content. This content is a little bit longer.
            
        
    

짜라란~ 내사진이 나온다 ㅋㅋㅋㅋㅋㅋㅋㅋ
스물한살때 도쿄 디즈니랜드에서 찍은 사진이다.
아무튼 처음 형식에 맞추려면 카드가 여섯개가 필요하기 때문에 그대로 ctrl+c/ctrl+v 해주면 되겠다.
완전 커서 가독성이 떨어지게 보이는데,
div로 jumbotron이랑 card-columns 를 묶어주자
.wrap {
            width: 1000px;
            height: 300px;
            margin: auto;
    }
나는 일단 강의 안보고 내마음대로 이렇게 했는데 완성작 보니까 뭐 얼추된거같다.

비슷 하네용 선생님은 height 는 안주셨다.

나홀로 링크 메모장 만들기!

자 방금 틀을 이용해서

이렇게 만들어주면 되겠다
뭐 크게 보면 버튼이랑 제목에 하이퍼링크 들어갔고, 코멘트 단락이 추가됐다.
뭐 전체적으로 영어 지우고, 한글로 바꿔줬다.
하이퍼링크가 약간 헷갈려서,, 
하이퍼링크 넣는 방법!

기존에 배웠던
하이퍼링크는 href=""

내가 h 태그 안에 1번 방법으로 하이퍼링크를 넣으려니까 안되길래 물어본 방법

태휘가 알려준건

이제 이거였는데
나 혼자 script 안에 넣으라고 하는 줄 알고
3.
> 

h1에 onclick을 붙여서

script에

 function hi() {
            location.href="http://www.naver.com"
        }
 이걸 넣어줬다.
naver.com 을 넣으라고 하셨지만 나는 이왕 내사진 넣은김에 내 인스타그램을 연결했다 
아래 코멘트 단락이 추가돼서 h6 태그로 코멘트 단락을 만들어줬다.

         
            나홀로 링크 메모장!
            중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다
            
            
                포스팅박스 열기
            
         
            
                
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            
                
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            
                
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            
                
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            
                
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            
                
                
                
                    여기 기사 제목이 들어가죠
                    기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...
                    여기에 코멘트가 들어갑니다.
                
            

            
    
body 안에 들어가는 전체적인 태그!
이제 코멘트 색 변경하기, 굵기!
나는 따로 comment에 class를 줘서 style 태그에 따로 꾸며줬는데
.comment {
            color: blue;
            font-weight: bold;
        }
인강쌤은 중첩을 사용하셨다.
안녕하세요
이걸 예시로 들면 저 card-text 옆에 comment만 넣어주면
안녕하세요
comment의 style이 같이 적용이 되는 방식이다.
아무튼 그렇게 해서

짠 완성~!
내가 원래 개발일지를 썼는데 아무리 읽어봐도 이거는.. 일지가 아니라 사담 반 복습 반 인 것 같아서.. 그냥 일기로 부르기로 했다..^^ 내일도 화이팅
내일은 자바스크립트 복습하고 새로운 강의 들어야겠음!



02_첫 주차 복습하기
Mon, 14 Feb 2022 10:04:28 GMT
두번째 개발일지..! 
사실 개발일지를 숙제하고 나서 일주일에 한번 정도만 작성하려고 했었다.
근데 생각보다 너무 재밌는것,, 그래서 이왕 복습 겸사겸사 배웠던 걸 작성해 놓으려고 한다!
html은 뼈대 css는 꾸미기 자바스크립트는 움직이는것!
전에 덕담만들기는 vs를 사용했고, 이번에는 파이참을 사용했다!
다음에 시간나면 덕담만들기 과정도 올려봐야겠다.강의 기간이 지나서 콘솔창 열어서 확인해봐야될듯 ,, ㅠㅠ

태그의 종류

나는 구역을 나누죠 division의 약자 
나는 문단이에요 paragraph의 약자

 bullet point!1 
 bullet point!2 




h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.
h2는 소제목입니다.
h3~h6도 각자의 역할이 있죠. 비중은 작지만..

span 태그입니다: 특정 글자를 꾸밀 때 써요

a 태그입니다:  하이퍼링크 

img 태그입니다: 

input 태그입니다: 

button 태그입니다: 

textarea 태그입니다: 나는 무엇일까요?
오 이거 어떻게 한거지?? 창으로 만들어졌네 넘좋다.
코드 정리할때는 ctrl+alt+l!
근데 나는 이거 쓰면 안예쁘게 정리돼서 내가 따로 탭쳐서 정리하는게 좋다.
태그 구분이 잘 안가게 정리됨 ㅠㅠ

첫번째 실습! 로그인 페이지 만들기


    로그인 페이지
    ID:
    PW:
    

짠~! 순간 input 태그 안에 타입 넣는게 헷갈렸는데 아무튼 성공!
꾸며줄때는 태그 안에 class="" 로 명찰 달아주기
헤드 태그 안에 스타일 태그 만들어서!
.클래스 이름 {} 이렇게!
 
    


두번째 실습! 발전한 로그인 페이지 만들기...


원래는 같이 해보는데 복습이니깐 혼자 시도해보았다!

짜잔~!
일단 가운데 정렬을 위해서 모든 태그를 디브로 한번 묶고,
맨 위 사진 안에 글이 들어가 있어서
div 태그로 글씨들을 

    

        
           로그인 페이지
            아이디, 비밀번호를 입력하세요.
        

        ID: 
        PW: 
        

    

이렇게 묶어줬다.
앗쉬 이거 ㅠㅠ 형식 적용 안되게 어떻게 하는거지 ? 벨로그부터 공부해야겠다..
헐 찾았다 다 눌러봤더니 상단 맨 위 <> 이거 누르면 됩니다...
.box {
            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg") ;
            background-size: cover;
            background-position: center;
            width: 300px;
            height: 200px;
            color: white;

            text-align: center;
            border-radius: 10px;

            padding-top: 20px;
            margin-top: 50px;
        }
이렇게 꾸며줬고!! 
background-image
background-size
background-position
늘 세트로!
높이(height)랑 너비(width) 조정 해 주고, 글씨가 위로 치우쳐져 있어서 padding 으로 상단 여백을 줬다. 
text-align 으로 문자를 가운데로 정렬해주고, border-radius 는 끝을 둥글게! 
margin-top 은 위에 여백이 없는게 보기싫어서 추가해줬다.
전체적으로
.wrap {
            margin: auto;
            width: 300px;

        }
margin으로 전체적인 틀을 가운데로 가지고 오기 앞서,, width를 안줘서 왜안오지?!!!!! 하다가
아차 싶어서 width로 너비 조정을 해줬더니 되더라 맨날 까먹는다..
뭐 다음은 글씨체 넣어주기!! 별거없다
https://fonts.google.com/?subset=korean
여기 들어가서 head 안에
요고 복사해주고 스타일 안에

(전체 꾸며주기) 를 사용해서

 *{font-family: 'Stylish', sans-serif;}
 이렇게 넣어주면 끗!
 일단 너무 힘들어서.. 여기까지만 복습하고 내일 부트스트랩이랑 자바스크립트 복습 정리해서 올려야겠다~
 조금만 쉬다가 오늘 강의 들어야지!



01_첫개발일기
Sun, 13 Feb 2022 16:21:03 GMT
코딩을 시작한지 딱 일주일째, 나는 아직도 코린이다..
뭐가 뭔지 아직은 모르겠는데 그래도 html이랑 css는 좀 재밌는 것 같다.
근데.. 자바스크립트는 진짜 1도 모르겠다.
흠흠,, 개발일지를 어떻게 쓰는지 아직 잘 모르겠어서 일단은 의식의 흐름대로 써봐야겠다.
일주일 간 퇴근하고 와서 강의듣는게 생각보다 너무 힘들더라 ㅠ.. 일주일에 두시간 강의쯤이야 싶었는데 피곤해가지고 미루고,, 술마신다고 미루고 또 말이 두시간이지 ㅠ 정지해놓고 따라한다고 시간 엄청 보냈던 것 같다.
아무튼 오늘은 숙제를 했는데,

짜잔 내가 만들었다.
지금까지 배운것을 응용해서 한건데
사실 html이랑 css 하면서 나는 천재인가 싶었는데.. 자바스크립트 기능 넣는순간 엥 이걸 내가 배웠다고 ??? 안배운거같은데 ??? 진짜? 이러면서 강의를 다시 들어봤더니 배웠던거네..^^
아무튼! 이미지는 그냥 이미지 태그를 썼다. 사실 백그라운드 이미지 적용하는게 생각안나서 이미지 태그 썼는데 생각난김에 백그라운드 이미지 넣는걸로 만들어봤다가

!!..?? 왜이러는거야 ㅠㅠ.... 
알고보니까 내가 따옴표를 같이 복사해서 오류가 났네..
정상적으로 했더니

이미지가 사라졌다... 
어떻게 해결했냐면!
   div class="img"
            
 
  p태그를 넣어줬고, 원래는 내가 백그라운드 이미지만 입력했었는데 전에 했던거 보니까 아래애들을 세트로 같이 넣어줘야 되더라,,
  background-image : url("https://blog.kakaocdn.net/dn/btsP6T/btqOS8g3zAi/QnjJk5sg54siVqij9MAh61/img.png");
  background-size: cover;
  background-position: center;
  아무튼! 이거보다는 이미지 태그 쓰는게 훨 쉽다
   img class="image" src="https://blog.kakaocdn.net/dn/btsP6T/btqOS8g3zAi/QnjJk5sg54siVqij9MAh61/img.png"
  이걸 이용했어용 
  아무튼 처음 기준으로 일지를 작성하겠다!
  아! 이미지태그랑 뭐 제목 아래 박스들은 다 div로 하나로 묶어서 가운데정렬 시켜줬다. 위에가 너무 붙어있는게 답답해서
    box {
        margin: 100px auto 100px auto;
        display: block;
        width: 500px;
    }
  약간 위 아래 여백을 줬고, 맨날 마진 헷갈리는데 시계방향 순서대로 위 오른쪽 아래 왼쪽!! 기억하기!! 아 첨에 이미지랑 글씨가 너무 딱붙어있어가지고 이미지에 마진을 줬다 글씨에 마진을 줬다 난리를 쳤는데 잘 안되가지고 ㅠ 어찌저찌 성공했다...
  내 코딩선생림이,, 게임을 하고계셔가지고 ㅋㅋㅋㅋ 물어볼 수가없었음
  그다음으론 이미지태그를 넣고! 아래 큰제목은
   p style="margin-top: 10px" h1양초를 팝니다 span style="font-size: 20px" 가격:3000원/개/p
요로케 span 태그를 적용해서 옆에 가격:3000원/개 를 작게 만들어줬다.
아래 설명글도 뭐 p태그에
p style="font-size: 15px"  양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무 향이 아주 좋아요/p
따로 꾸미진 않았다!
아래 박스들은 부트스트랩을 이용했는데!
input group에서
div class="input-group input-group-sm mb-3">
  div class="input-group-prepend">
    span class="input-group-text" id="inputGroup-sizing-sm">Small
  /div>
  input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
/div
이걸 이용했다. 
수량은
div class="input-group mb-3">
  div class="input-group-prepend">
    label class="input-group-text" for="inputGroupSelect01">Options
  /div>
  select class="custom-select" id="inputGroupSelect01">
    option selected>Choose...
    option value="1">One
    option value="2">Two
    option value="3">Three
  /select>
/div>
이거! 내용만 바꿔서 이용했음
아래 버튼은 처음에 부트스트랩 이용했는데 자꾸 가운데 정렬이 안되는거... 
marginL: auto 도 해보고 display:block 도 해봐도 안되길래 그냥 승질나서
지워버리고 내가 만들어서 썼다. ㅋㅋㅋㅋ 그래서 예시랑 색이 좀 다름...
button onclick="hey()" type="button" class="btn">주문하기
.btn {
        width: 100px;
        margin: auto;
        display: block;
        background-color: royalblue;
        color: white;
        }
 이렇게 꾸며줬음! 저 부트스트랩 버튼 가운데정렬 저번에도 안되더니 내가 뭘 못하는건가 ;;?? 왜그러지 ㅠ
 아무튼 제일제일 어려웠던 자바스크립트..! 사실 기억안나가지구 베꼈다...
 스크립트 태그 만들어서! 
 function hey(){
             alert ('주문이 완료되었습니다.');
        }
이거 넣어주기! 
아직도 전체적인 구성이 헷갈린다 
head 안에 style 태그를 넣어야하는데 첨에 바보같이 헤드 태그 아래에다가 스타일 태그 만들어놓고 ??? 적용은되는데 색이 왜이래 이러고 있었다 

  이게 정상...
  
   이게 나혼자 왜이래 하면서 원인 찾던거...
  하 아무튼 갈길이 멀지만..
  이게 예신데
  
  내가만든거!
  
  이만하면 코린이 치고는 짱 잘하는듯...!
  내일부터는 게임 조금만 하고 또 열심히,, 인강듣구 c언어 콘서트 책도 공부해야함
  
 마지막은 내 코딩센세으ㅣ 칭찬으로,,^^
 아 근데 인강선생님이 하신 코드에 비해 왜 내껀 짧고 단조롭지,,? ㅠㅠ 내일 퇴근하고 한번 다시 확인해봐야겠다
  이번주 개발일지 끗-! 
  아 이사이트 첨써봐서 태그넣고 하면 그대로 입력되는지 몰라가지구 다 수정했다 ㅠ.... 아무튼 진짜 끗

imyour_juu.log

01_Python

Python이란?

jupyter notebook 사용법

변수명 규칙

문자열 포맷 코드

연산자 종류

int()를 붙이지 않으면

Maven_사용하기

Maven

01_Java_script

JavaScript

javascript 사용방법

JavaScript 입출력

입력하기

출력하기

Java와 JavaScript의 차이점

입출력문과 변수 활용 예제

JavaScript의 자료형

JavaScript연산자

JSP/Servlet

MVC Pattern

MVC란?

MVC 동작방법

MVC패턴 두가지 방식

MVC Model1 방식

MVC Model2 방식

Cookie & Session

** 세션 (Session) **

** 쿠키 (Cookie) **

세션 (session)

02_Arduino

01_Arduino

Arduino란?

Arduin의 종류

01_HTML 개요

#20220425

HTML (Hyper Text Markup Language)

01_JSP/Servlet

#수정중

대표적인 web server의 종류

동적페이지 (Dynamic Web Page)

Servlet이란?

01_CSS 선택자

선택자의 종류

01_JAVA_기본자료형

#20220315

자바의 기본 자료형 (Primitive Data Type)

변수명을 지정해줄때는 규칙이 존재한다.

그 외에도 필수는 아니지만 프로그래머들간의 규칙이 있다.

08_JQuery

1. JQuery 란?!

2. input 박스 값 가져오기

3. div 보이기/숨기기

4. 태그 내 텍스트 입력하기

5. 태그 내 html 입력하기

여기에 코멘트가 들어갑니다.

여기에 코멘트가 들어갑니다.

포스팅박스 열고 닫기

07_자바스크립트 3

1. 서울시내 미세먼지 리스트

2.서울시 따릉이 현황

3. 파이참에서 사용해보기

06_자바스크립트 2

05_자바스크립트

변수

자료형

04_부트스트랩2

+ ㅇ ㅓ.. 인강 듣고 왔는데 그냥 auto 주면 되네

03_부트스트랩

Hello, world!

Card title

Card title

Card title

Card title that wraps to a new line

Card title that wraps to a new line

나홀로 링크 메모장!

여기에 코멘트가 들어갑니다.

여기에 코멘트가 들어갑니다.

여기에 코멘트가 들어갑니다.

세션 (Session)

쿠키 (Cookie)