$$config title: 웹3 keywords: - IT - ... $$ #웹3

☆★컨트롤+e 눌러서 작성자모드로 바꾸기, 코드가 적용되어 보이지 않는 것임☆★

스크립트<,script src=""> 하고 상단 오른쪽에 세팅(Settings) 누르고 js에 들어가서 중간 칸에 jq 눌러서 그대로 복사하기 마켓컬리[클릭](https://codepen.io/kimhyeji324/pen/wvmOeZr?editors=0100) #단축키 저장: 컨트롤+s 미리보기: 컨트롤+e 다시 글쓰기: 컨트롤+e 전체복사: 컨트롤+a 컨트롤+S -> 디버그 모드 div > section 화살표 보시는 div 안에 있는 section, 그래서 section만 적용됨. div section 화살표 표시 없는건 div와 section 함께 적용 HTML *별빼고 ->css랑다르게 표가 만들어짐(화면에) 공지사항 *별빼고

공지사항
번호	제목 td 대신 th쓰면 가운데 정렬됨, 굵어지면서 테이블 안에 마진 안 먹음 td는 하나만 줘도 그 줄에 있는 거 다 먹음(넓이 쓸때) caption CSS ㄴtable테이블 넓이 설정해야 함 rem 내가 원하는 폰트 나누기 브라우저크기 .table { 패딩: 20; } border-collapse: collapse; <굵은표없애기, 여백사라짐 바디 안에 있는tr thead tr { border-바텀: 11px 솔리드 red; } < 칸 나눠지게 보여줌 .da-1 { display: block; } -> 그 칸만 블럭처리된다 a가 아니고 그 칸만이면 text-align 주면 됨 테이블 기본 속성 코드 별빼고
번호	제목	날짜
1	2	3

*transition트랜지션(전체적용할때): 5s; <얘는 div에, 전체 적용 할 수 있는 엘리먼트에 trnsform: translate(20px, 20px); <호버 적용하는 곳에 *블럭요소를 움직이게 하는 마진0 오토; ㄴnav, ul는 블럭이다. -ul 3개 쓰면 그리드 3개

*그리드 계산 + 탑바만들기(플렉스써서) 1080은 양옆에 10px 제외하고 버터값20(마진:0 20px)은 가운데 여백 1080-20-20 나누기 2 = 520(가운데 칸) (왼쪽,오른쪽 250) *디스플레이:플렉스는 텍스트얼라인이 안 먹는다(칸이 작아짐) 그래서 justify-content 이거 써야함 텍스트이동 nav .box-1 li {justify-content: end; } 얼라인-아이템: 센터(텍스트 위아래 공백 생기며 가운데로 이동) *포지션:릴리티브 ㄴ네비 위에 엘리먼트 추가로 적고 거기에 릴리티브 넣어야 함 div section class="box-1" nav css .box-1 { 포지션:릴리티브 } nav > ul > li > ul { 포지션: 앱솔루트 } *화면 작아질수록 사진이 하나둘씩 사라지는 거 section > .img-box { width: calc((100% - 60px)/4); /*플렉스-그로우flex-grow 쓰면 이상하게 되서 calc를 써야한다*/ /*버터값 60, 마이너스 쓸 땐 가운데 떼어줘야 함*/ /*이미지 1440-60나누기4 *100 나누기 1440=에서 나오는 */ } *버터값 60px은 칸 사이에 있는 갯수다 @media (max-width: 1079px) and (min-width: 768px) { section > .img-box { width: calc((100% - 40px)/ 3); } /*화면 사이즈를 줄였을 때 4개에서 3개로 계산되어 가장 끝에 있는 엘리먼트가 줄바꿈되어 아래로 빠진다(부모를 벗어났기 떄문)*/ *사라지는 그리드는 플렉스flex 쓰는 것이 낫다. ★자바 자바는 무조건 위에서부터 시작한다. 그래서 순서가 중요하다. console.clear(); -> 코드펜 쓸 때는 늘 있는 코드(VOS는 안 써도 됨) console.log("텍스트"); *따옴표 안에 있는 건 문자(숫자써도 문자로 인식한다) ex)"안10" -> 문자 ex) "10"+"10" -> 1010 (숫자가 아니고 문자로 인식하여 안에 있는 부호가 삭제되어 1010이 되는 것이다. ex)"안"+10*2 -> "안20" (따옴표없는 숫자가 먼저 계산되어 "20"이 된다, 그래서 안20 문자로 인식되는 것이다. let(변수를 선언한다는 뜻) 변수명이 똑같이 여러 개 있을 수 없고, 하나의 값만 선언 할 수 있다. ex) let x; x = 10; console.log("x"); <엑스 문자가 된다 console.log(x); <이건 10이 된다 let변수선언, x변수명 console.log("10" + 10); 문자와 숫자 같이 쓸 때 -> "1010"로 나타남 값을 수정하려면(a와 b값을 교체할 때) console.clear(); let a = 10; let b = 5; a = 10; b = 5; 다시 값을 바꾸려면 a = 10; b = 5; 없애고 let c = a ->10(a에 10이 저장되어 있다, 그래서 값을 수정해도 안 바뀐다. 이미 실행된 값이기 때문에) a = b ->5 b = c ->10 console.log(a); console.log(b); 로 바꾼다 변수명(a,b,c..) 여러 번 쓸 수 없다 *if조건문 console.clear(); let age = 115; /*let age변수명, 115변수값*/ /*조건을 걸 수 있는 게 if 소괄호가 진짜면 중괄호가 실행됨*/ if ( age >= 20 ) { /*소괄호 안에 있는 게 진짜면 실행되라는 뜻, 조건을 걸어버리는 게 변수명이랑 변수값 */ console.log("성년"); } if ( age < 20 ) { /*소괄호 안에 있는 게 115보다 20이 클 때 실행될 때 -> 그래서 실행이 안 된다*/ console.log("미성년"); } if (false) 가짜 -> 실행 안 됨 if (true) 진짜 -> 실행됨 console.log("== 2단계, 조금 어리석은 단계 ==") if ( age >= 20 ) { console.log("성년입니다."); } else if { console.log("미성년입니다."); } /*else if가 있으면 묶여있어서 위 if와 함꼐인 거. 그래서 위에가 거짓이면 아래도 거짓. 실행되지 않는 else, if를 읽히기 위한 것*/ &&: 둘다 참이어야함 ||: 둘중 하나가 참이면 참 반전: 뒤집는 거 var c = a != b; /*!= 같거나 같지않다*/ 그래서 c는 거짓이다 ★if조건문 예시[직접보기](https://codepen.io/zxs4564/pen/OJZYYJG?editors=0010) // 문제 : 실행되는 출력문에는 참 그렇지 않으면 거짓 이라고 적어주세요. // 조건 : 넘버링을 해주세요. EX : 참2, 참3, 거짓2, 거짓3 ... console.clear(); if ( true ) { console.log("참"); } if ( false ) { console.log("거짓"); } var a = 10; // `==` => 같다. if ( a == 10 ) { console.log(""); } /*a는 10과 같다 -> 참*/ // `!=` => 같지 않다. if ( a != 10 ) { console.log(""); } /*a는 10과 같지 않다 -> 거짓*/ if ( a > 10 ) { console.log(""); } /*a는 10보다 크다 -> 거짓*/ if ( a >= 10 ) { console.log(""); } /*a는 10보다 크거나 같다 -> 참*/ var b = 10; if ( a == b ) { console.log(""); } /*a는 b와 같다 -> 참*/ // boolean c => c 에는 오직 true/false 만 담을 수 있다. var c = a != b; if ( c ) { console.log(""); } /*a는 b와 같지 않다 -> 거짓*/ if ( c == false ) { console.log(""); } /*c는 같다 -> 거짓*/ // `!` => 반전 if ( !c ) { console.log(""); } /*c는 같다 -> 참*/ // `!` => 반전 if ( !(!c) ) { console.log(""); } /*c는 같지 않다, 같다 -> 참*/ var d = true; if ( c != d ) { console.log(""); } /*c는 같지 않다 d와 -> 거짓*/ if ( c && d ) { console.log(""); } /*c는 같지 않다 d=10 둘 다 같아야 한다 -> 참*/ if ( c || d ) { console.log(""); } /*c는 같지 않다 d와 둘 중 하나 같으면 된다 -> 참*/ if ( c == false && d ) { console.log(""); } /*c는 같지 않고 같지 않으며 d와 둘 다 같다 ->거짓*/ if ( c || c ) { console.log(""); } /*c는 둘 다 같지 않지만 둘 중에 하나만 같으면 된다 -> 참*/ if ( false || false ) { console.log(""); } /*false와 false는 같지 않지만 둘 중 하나 같으면 된다 -> 참*/ if ( 1 == 1 && 2 == 2 && 3 == 3 && 4 == 5 ) { console.log(""); } /*1은 1과 같다, 2와 2는 같다, 3과 같은 같다, 4는 5와 같지 않다 그래서 둘 중 같아야 한다-> 거짓*/ if ( 1 == 1 && 2 == 2 && 3 == 3 && 4 == 5 || true ) { console.log(""); } 함수 let a = 10; function k() { } function k2() { } 소괄호와 중괄호가 꼭 붙어있어야 한다 k(); k2(); 마지막에 k(); k2() 붙여줘야 실행된다 *if와 다른 점 a변수선언 옆에 소괄호를 붙여줘야 한다 ex) console.clear(); function a() { console.log("하이요"); } function a1() { console.log("바이요"); } a(); a1(); *제이쿼리(자바를 요약하여 쓸 수 있는 언어이다)[직접보기](https://codepen.io/zxs4564/pen/eYraaNg) *함수가 없으면 사이트 들어가자마자 리액션이 실행됨. 그래서 함수를 사용해 조건을 걸어서 클릭이 됐을 때만 리액션이 실행되도록 하는 것. 온클릭은 호버와 같은 속성이다. 마우스를 올렸거나 클릭했을 때 실행되는 것. 하지만 js에 걸 수 없기에 온클릭을 사용하는 것이다. ex) function a() { $("button").css("color", "red"); <제이커리식. ("속성", "속성값"); } ㄴ이 식을 사용하기 위해 function a()를 쓰는 것이다. ㄴcss 대신 click를 사용한다. 그래서 html에 집을 만들어줘야 하는데 js에 함수를 거는 거다 ex) function a)( { console.log("실행"); *온클릭은 안에 더 이상 이벤트를 걸 수 없다. 그래서 js에서 클릭을 걸어주는 것이다. HTMI div 위에 ㄴjs에 $("button").click(bag); 이 식을 넣어주면 html에 온클릭 넣지 않아도 된다. 하지만 $("button").click(bag);가 없으면 css ▼ body.active { 백그라운드-컬러: red; 바디 안에 있는 액티브가 백그라운드-레드로 바뀌어라 } ㄴ(클래스를 가진 바디) ㄴ여기서 액티브는 호버처럼 사용되는 것이다. js ▼ ex) 애드클래스, 리무버클래스를 사용한 식 console.clear(); $("body").addClass("active") ; html ▼ 스크립트 추가