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를 사용해서 기본 레이아웃 만들기를 단계를 밟아가며 해봤다.
사이트의 기본적인 레이아웃.
만들면서 알게된 것은 flex는 자식까지만 영향을 끼친다. 후손은 영향을 받지 않는다.
그리고 min-hight는 최소 크기를 결정한다.
이제 flex를 배워서 앞서 계속 했던 메뉴 만들기에 또 활용할 수 있다.
다음으로 폰트로 들어갔다.
폰트는 크게 두가지로 나뉘는데 로컬폰트와 웹폰트다.
우리가 사용할 것은 웹폰트다. google fonts에서 원하는 폰트를 가져와서 사용하면 된다.
한글 폰트는 눈누에서 가져와서 사용하면 된다. 폰트에는 저작권이 있기 때문에 무료 폰트만 사용해야한다. 한글 웹폰트는 용량이 무거워서 하나만 정해서 사용하는 것이 좋다.
드디어 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;
}이게 자바에서의 함수.
아무튼 간단하게 뭔가 만들어보면 이렇게 만들 수 있다.
그냥 js 문법으로는 불가능 하고 jquery를 사용해야지 가능하다! 그래서 html에 jquery를 적용시켜준 코드도 보인다.
종합적으로 약간씩 활용해서 팝업 창의 띄우고 없애고를 구현해 보았다.
팝업 버튼을 클릭하면 팝업창이 뜬다. 다시 누르면 팝업 창은 사라진다.
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);이게 제이쿼리 팝업과 관련된 코드이다.
