국비 지원 IT(웹앱개발) 취업반 강의 36일차 (HTML, CSS, JS)

flex로 시작한다.

Flex 참고 사이트
1분 코딩 Flex

컨테이너에 영향을 주는 코드

• flex-direction (정렬하는 방향을 정함)

  • row:(기본값) row-reverse: column: column-reverse:

• flex-wrap (압축 풀기, 압축하기)

  • nowrap:(기본값) wrap: wrap-reverse:

• align-items (세로를 기준으로 위치 정하기)

  • flex-start: flex-end: center: baseline: stretch:(기본값)

• justify-content (가로를 기준으로 위치 정하기)
  • flex-start:(기본값) flex-end: space-between: center: space-around:

• align-content (컨테이너 안에 있는 아이템들에 영향)
  • flex-start: flex-end: center: space-between: space-around: stretch:(기본값)

---

아이템에 영향

• align-self ( property for flex items )

  • auto:(기본값) flex-start: flex-end: center: baseline: stretch:

• flex-grow (상대 값으로 영역 비율 정하는데 빈공간이 없어짐.)

• flex-shrink (상대 값으로 수축 값 정함.)

• flex (축약해서 사용할 수 있게.)

• order (우선순위)

flex를 사용해서 기본 레이아웃 만들기를 단계를 밟아가며 해봤다.

See the Pen 레이아웃 만들기 by qBlackBirdp (@qBlackBirdp) on CodePen.

사이트의 기본적인 레이아웃.

만들면서 알게된 것은 flex는 자식까지만 영향을 끼친다. 후손은 영향을 받지 않는다.
그리고 min-hight는 최소 크기를 결정한다.

이제 flex를 배워서 앞서 계속 했던 메뉴 만들기에 또 활용할 수 있다.

다음으로 폰트로 들어갔다.

폰트는 크게 두가지로 나뉘는데 로컬폰트와 웹폰트다.
우리가 사용할 것은 웹폰트다. google fonts에서 원하는 폰트를 가져와서 사용하면 된다.

See the Pen 구글 폰트에서 폰트 가져오기 by qBlackBirdp (@qBlackBirdp) on CodePen.

한글 폰트는 눈누에서 가져와서 사용하면 된다. 폰트에는 저작권이 있기 때문에 무료 폰트만 사용해야한다. 한글 웹폰트는 용량이 무거워서 하나만 정해서 사용하는 것이 좋다.

---

드디어 js 시작이다.

console.log("Hellow World");

js는 java와 달리 String, int 같이 변수 선언을 안해도 된다. 변수 선언을 할 때는 let, 또는 const를 사용하고, 뒤의 값에 따라 알아서 문장인지 정수인지 판단한다.

let x = 10;
console.log(x + 10);

이런 느낌인데, let과 const는 기본적으로 변수를 선언한다는 것은 같지만 다른 점이 있다.

let은 재선언은 불가능하지만 변수 값을 바꾸는 것은 가능하다.

const는 재선언도, 변수 값을 바꾸는 것도 불가능하다. 그래서 절대적인 값을 선언할 때 사용한다.

• JS 데이터 타입

Type	typeof return value	Object wrapper
Null 타입	"object"	N/A
Undefined 타입	"undefined"	N/A
Boolean 타입	"boolean"	Boolean
Number 타입	"number"	Number
BigInt 타입	"bigint"	BigInt
String 타입	"string"	String
Symbol 타입	"symbol"	Symbol

조건문, 반복문 또한 사용가능하다.

for (let i = 0; i <= 10; i++) {
  console.log(i)
}

이러면 0부터 10까지 출력하는 반복문이 된다. 자바랑 비슷하다.

js에서 함수는

function() {

}

이런 모양이다. 함수명이 없으면, 익명함수라고 한다.

() => {
  statements
}

이런 화살표 모양을 갖고 있으면 화살표 함수나, 애로우 함수하고 한다.

public static void t1() {
    return 1;
}

이게 자바에서의 함수.

아무튼 간단하게 뭔가 만들어보면 이렇게 만들 수 있다.

See the Pen js 간단 연동 by qBlackBirdp (@qBlackBirdp) on CodePen.

그냥 js 문법으로는 불가능 하고 jquery를 사용해야지 가능하다! 그래서 html에 jquery를 적용시켜준 코드도 보인다.

종합적으로 약간씩 활용해서 팝업 창의 띄우고 없애고를 구현해 보았다.

See the Pen 팝업창 띄우기 JS by qBlackBirdp (@qBlackBirdp) on CodePen.

팝업 버튼을 클릭하면 팝업창이 뜬다. 다시 누르면 팝업 창은 사라진다.

let isPop = true;

function Popup1__show() {
  if (isPop) {
    console.log("Popup1__show 실행됨");
    $(".popup-1").css("display", "block");
  } else {
    console.log("Popup1__show 실행됨2");
    $(".popup-1").css("display", "none");
  }

  isPop = !isPop;
}
$(".btn-popup-1").css("color", "red");
$(".btn-popup-1").click(Popup1__show);

이게 제이쿼리 팝업과 관련된 코드이다.