TIL

(1)html의 어디 부분이 틀린지 알수있는 방법validator(https://validator.w3.org/ - validate by direct input클릭후 code를 복붙해라 (2)웹사이트 구조Document and website structure

1)Html,css,js 의미 = > html : 뼈대 css : 뼈대에 속성부여(간격,크기,색깔) Js : 이벤트부여(클릭,로그인시 특정행동에 특정결과를 부여, 클릭하면 클씨의 색깔이 바뀐다) 2)웹의 html,css,js 어떻게 구성되어있는지 확인할수있는 방법

1) = hello world hello world hello world hello world hello world hello world 2) = 안녕하세요 코딩을 배우고 있는 학생입니다. 그랩마켓 강의를 통

1) dispaly: flex;를 쓰지않고, 가운데 배치시키는 방법margin: 0 auto;가운데 배치키시고 싶은 자식 div에다가 css설정하면 된다.flex와 다른 점은 부모에다가 설정하고 싶은 것이 아닌 자식에다가 직접 설정하는 것이다

1) 가로로 배치되어있는 div들을 세로로 배치시키는 방법 = > 자식div들을 포함하는 부모 div에다가 설정해야 한다. flex-direction: column; 주축과 수직축의 방향이 바껴서 세로로 배치될 수 있는 것이다. 2) position: fixed;를

1) transform: 속성transform: scale(1.5);모습을 변화시킬 수 있는 속성이다. 크기를 1.5배 크게한다. transform: 속성에는 크기이외에도 바꿀 수 있는 것들이 많다.2) animation: 속성animation 만들기animation이

git터미널에서 명령어 입력터미널에서 문서 접근하는 방법cd 폴더명 입력cd Documentscd programmingcd boxiting\\ cat 필요한 폴더만 치는 것이 아니라 필요한 폴더를 포함하는 모든 폴더에 접근해야 한다. 폴더명을 다 입력할 필요없이 일부분

git1) 소스트리소스트리의 history에 가면, 커밋기록을 볼 수 있다.이때, origin/main과 main이 있다. 이 차이는 뭘 까?전자는 깃허브저장소, 후자는 로컬저장소. 푸쉬했냐? 안했냐? 차이이다.origin/HEAD의 의미? 해당 branch에서 작업하

TILinflearn 홈페이지 header의 nav clone문제상황힘들었던 것 : nav를 가운데 배치시키는 것처음 : nav을 만들고, margin을 좌우로 적용시켜서 가운데 배치시킴문제상황 : nav를 position: fixed;시키고, 나머지들이 nav에 의해

고민했던 점1)돋보기 icon을 input안에 넣고 싶다.한 물체를 다른 물체에 대해서 위치를 정할 때, position: absolute;를 떠올려라2)main css와 다른 css를 @import할때, 파일명뒤에 .css빼먹는 실수가 자주 발생한다.틀린 점 : @i

1) block, inline, inline-blockdisplay: block;옆에 다른 것이 오지못하게함display: inline;옆에 다른 것이 올 수 있음예시 : span, a , imgdisplay: inline-block;block옆에 다른 것이 올 수 있

제로초 js 강의2-7 ~1) 논리 연산자(and,or)&&(and)양쪽 모두 참이면, true이다. -> 한 쪽이라도 거짓이면, false이다.(10 > 5) && (6 < 8); ||(or)한 쪽만 참이어도 true이다.(10 > 5) || (6 > 8);!!

1) for 반복문

강좌2-22 / 배열const target = \['가','나','다','라','마'];마지막 요소 제거하기target.pop();첫번째 요소 제거하기target.shift();중간 요소 제거하기target.splice(1,2);1번째 요소부터 2개 지움 -> '나',

2-27 / 3-1 / 3-2 / 3-3객체와 원시값의 차이객체의 성질에 대한 나의 이해방식객체는 똑같이 생겨도, 따로 만들어져서, 메모리의 다른 공간에 배치변수 a에 객체를 넣고, b에 a를 넣으면, b와 a는 연결이 되어서, a만 수정해도, b도 바뀐다.객체끼리 비

=

발성 : 47분코딩영어

1)배열안에 객체넣을 수 있다. = 2)함수명 짓는 방법 = 직관적으로 지어라 배열의 갯수를 출력하는 함수 const getArrayLength = {} 3) 꼭 함수에 return을 넣지 않아도 된다. = 배열안에 객체의 price를 출력하는 함수를 만들

1)콜백 함수다른 함수의 매개 변수로 쓰이는 함수를 콜백 함수라고 합니다.2)익명 함수getHuman()함수안에 이름이 붙여지지않은 함수를 사용했다.3)콜백 함수를 알아야 하는 이유자바스크립트에서 기본적으로 제공하는 함수와 라이브러리를 사용하기 위해서setTimeout

kotlin의 장점정적 타입 언어데이터형 선언시 널가능과 널불가능형 구분 가능자바와 상호 운영이 가능하다간결하고, 효율적이다.함수형 프로그래밍과 객체지향 프로그래밍 모두 가능하다세미 콜론을 생략할 수 있다.

1).innerText / .textContent / js로 html안의 content 작성document.querySelector("h1").innerText = "welcome";document.querySelector("h1").textContent = "welc

1)node.js npm express 다운받기node.jsnode.js 홈페이지LTS버전 다운파일열고, 계속눌러라터미널에서 node -v 다운되었는지 알 수 있다.새 폴더을 만들고, 터미널로 그 폴더에 들어가라 cd 파일명npm터미널에서 명령어 입력 npm initv

1)javascript es6가장 대중적으로 사용되는 자바스크립트 문법이다.대부분 지원하지만, 100% 지원하는 것은 아니다.인터넷 익스프로러에서 promise객체(.then().catch())쓰면 오류난다.위 오류를 막기위해서 프론트엔드 개발자들은 바벨을 쓴다.자바스

1)기본적인 html tag 설정2)설치해야 하는 vsc 확장 프로그램Community Material ThemeMaterial Icon ThemeMaterial ThemeMaterial Theme IconsPrettier - Code formatter

html파일과 css파일 연결하기css적용모든 p tag에 css를 적용한다.class를 이용하여 css적용css 문법.이름{ 속성: 값;}반드시 이름 옆에 .(점)을 붙여라 안붙이면 모든 tag에 css를 적용하게 된다.class를 적용하기 위한 방법tag에다가 c

1)UI만드는 방법일단 만들고 숨긴다.특정 이벤트감지 했을 때, 드러나도록 한다.2)display: none; 안보이게 만들기display: none;3)이벤트감지했을 때, 안보이는 것을 다시 보이게 하기결론 : display: none;으로 안보이게 설정했을 경우에는

getElementsByClassName 개념getElementsByClassName 개념document.getElementsByClassName("box")0몇번째 box를 가져올지 \[]로 정해야 한다.0 : 1번째addEventListener 핵심핵심실행함수를 익

.fadeIn() & .fadeOut()숨겨놨던 것을 스무스하게 나타나게 한다.스무스하게 사라진다.

jQuery .animate({}) 애니메이션 설정animate({ css설정 , css설정 })css설정을 여러 개를 쓸 때는 ,로 구분한다.작동 시간도 설정할 수 있음animate({ css설정 , css설정 },1000)1000 -> 1초반드시 {}괄호 밖에 시간

UI / 이미지 슬라이드 만들기만든다.이미지를 가로로 배치한다.float: left;이미지 한 개를 담는 이미지 박스에 설정한다.이미지가 한 개만 뜨도록 한다.overflow: hidden이미지 슬라이더를 div tag에 복붙하고, 그 div에 설정한다.애니메이션변화t

웹 UI 라이브러리이미지 슬라이드차트nav-bar스크롤 바스크롤 바2전체화면 스크롤 사이트

jQuery / 해당 class 갯수 세기의미 : 해당 class의 갯수자바스크립트 / 이벤트 버블링p tag를 클릭했다.우리는 1번 클릭했다고 인지한다.컴퓨터는 p와 p를 포함하는 상위요소도 클릭했다고 인지한다.총 3번div, div, p자바스크립트 / 이벤트 버블

코드리뷰 / 덧셈과 관련하여 변수를 만들 때, 반드시 변수 선언시 값을 넣어야 한다.변수를 만들 때, 값을 넣지 않으면 오류가 발생한다그 변수 + 숫자를 하고, typeof로 그 변수의 자료형을 출력하면, NaN이 나온다.

웹 앱을 만드는 방식예시 : 상품카드 html파일을 서버가 보내고, 상품의 가격, 이미지, 상품명은 js로 비어있는 값을 채운다.최근에는 2번째 방식을 많이쓴다.

sort()의 원리결과가 +이면, b를 왼쪽으로 보낸다.결과가 -이면, b를 오른쪽으로 보낸다.예시오름차순 정리7-3=4 결과는 +이다. 그러므로 3을 왼쪽으로 보낸다.예시2cba순 정리's'는 'a'보다 크다.그러므로 's'를 왼쪽으로 보낸다.

ajax 데이터 받아오기 = 데이터 형태 js의 object형태와 비슷

UI / 애플 스크롤 UIposition: sticky; top: 400px;이미지가 올라가다가 top: 400px; 지점에서 멈춘다.스크롤 이벤트 감지0번째 카드 박스를 들고 와서 css()css 직접 변경하여, 투명도와 크기를 조절하였음투명도 변경0번째 사진과 1번

자바스크립트 / 변수를 빈 값으로 만들기변수선언시 값을 설정하지 않는 경우자바스크립트 / 변수에 값을 추가하기변수의 이전에 저장된 값에 새로운 값을 추가하는 것이다.변수 a의 이전에 저장되어있던 값을 지우고, 3을 저장시킨다.UI / 한 글자씩 입력되는 애니매이션 만들