HTML/CSS/JS

뼈대, 장기: html겉 피부: cssctrl+b: 배너 옆으로head, body 등이 들어감body에 어떤걸 쓰느냐에 따라 달라짐.css->head안에 쓰게 됨이루어진 모든 것들 = "요소"html: 요소의 집합시작태그와 종료 태그로 이루어져 있고, 시작 태그와 종료

위는 border만, 밑은 padding까지 준 것이다.padding을 5px만큼 줬더니 안에 뚱뚱한게 뭔가가 생겼다.그럼, green안에 하얀색 띠(?)같은 걸 주려면 어떻게 하면 좋을까?\-> 당연히 padding을 주면 된다.한 padding 5px만 줘보자.그럼

1\. position: static; html 모든 요소는 기본값으로 static, 일반적인 문서의 흐름에 따라서 요소의 위치가 정해진다. 2\. position: relative; 일반적인 문서의 흐름에 따라서 요소의 위치가 정해짐

html자식 요소가 부모 요소보다 콘텐츠의 크기가더 클 경우 자식 요소를 어떻게 보여줄 지를 결정overflow가 날 경우, y축에 대하여 scroll을 줘라는 뜻overflow: auto로 하면, overflow가 날 때만 scroll이 생긴다.overflow:scr

display 유형: 자식요소를 배치할 때 사용할 레이아웃 block: 요소의 크기와 상관없이 한 라인 전체를 차지하고, 요소 다음에 줄 바꿈이 일어남. inline: 요소의 크기만큼만 너비를 차지하고, 줄 바꿈이 일어나지 않음 종류: table, flex, grid

html 코드 CSS코드

데이터를 담는 공간(상자)let name="철수"(변수의 선언과 할당)var는 실무에서 별로 안쓰고 let과 const를 많이 쓴다.요소: html을 분석하고 수정해볼 수 있는 도구콘솔: 현재 로딩된 페이지에서 자바스크립트를 시험하거나 로그/오류 메시지 등을 확인할 수

컴퓨터가 조건에 맞는지 true와 false로 판단하여판단을 기반으로 각각 다른 명령을 실행할 수 있도록 하는 것\->비교 연산자와 함께 쓰임.같은 행위를 반복하는 것핵심: 몇 번 반복할 것인가!for(초기식;조건식;증감문){ 반복해서 실행할 내용 }let person

HTML로부터 코드를 읽어오고 제어할 수도 있다.HTML, CSS는 구조만 담당하므로!(기능이 제한됨 단순한 페이지만..)document.getElementByld("tadID").InnerTextHTML파일에서, "tagID"라는 아이디를 가진 태그를 선택해서, 제어

var로 선언해버리면 다시 재선언이 가능해서 sum값이 바껴버린다...덮어씌어버린다..변수 호이스팅- 이미 var y가 있어버린다고 생각해버린다.(y를 초기화하기도 전에 이미 선언됐다고 생각해버린다..ㄷㄷ)따라서 var이 아니라 let예약어를 사용한 변수를 추천한다.l

끝말잇기 코드랑 로또 당첨 코드이다.이건 파이널 과제로 한 회원가입 만들기이다.

자바스크립트는 html에 접근하고 읽을 수 있게 설정 되어 있다.html에서 읽어오는 것: 자동html코드를 javascript관점에서 보고 있는 것!document는 내 웹페이지의 html의 모든 정보이다.getElementByid : HTML에서 id를 통해 ele

드디어 진짜 시작한다!1\. event.preventDefault()loginForm.addEventListener("submit", onLoginSubmit);에서 onLoginSubmit함수를 바로 실행하는게 아니라브라우저한테 떠넘긴다.그리고 어떤 event가 일어

div{ bacground: red; }div: 선택자background(속성): red(속성값) : 선언인라인 방식style 태그 이용분리된 CSS 파일 연결실무에서 가장 많이 활용하는 방식!유지보수가 편리하고 소스코드를 관리하기가 좋다.rel: 해당 태그로 연결시켜

레이아웃 CSS를 이용해서 단순한 문서형태인 HTML을 보기 좋게 배치하고 재배열하는 것. 관련 기능, 완성된 배열 등을 포괄적으로 지칭한다. 선택자2 전체 선택자 *{ property: value} 모든 요소들을 선택 다중 선택자 .class1, .class2{

:first-child: 형제 요소 중 첫번째 요소를 선택하는 가상 클래스이렇게 하면 첫번째 child가 h태그이므로 p태그에 red를 씌우라는 것이 안된다..:first-of-type: 형제 요소 중 첫번째 요소를 선택하는 가상 클래스first-child와는 다르게

부모요소의 속성값을 자식 요소에게 상속한다.생각해보면, 모든 속성이 상속되지는 않는다. 왜일까?\-> 상속되는 속성\-color, font-family, font-size 등등상속되지 않는 속성\-padding, margin, border 등등상속여부는 외우지 말고 육

Cascading Style Sheet캐스캐이딩: 수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴 지 결정해주는 CSS 우선순위 적용 원리CSS가 선언된 위치에 따라 우선순위가 결정된다.브라우저 스타일 시트< 사용자 스타일 시트< 개발자 스타일 시트사용

기준:wrapper을 기준으로 top에서 10px, left에서 10px 떨어진 곳에 item이 그려진다.(absolute는 relative를 기준으로!)relative를 기준으로 absolute가 그려진다.relative가 많을 때는 absolute와 가장 가까운 r

요소의 좌표를 움직일 수 있다.X축으로 x만큼, Y축으로 y만큼 이동시킨다.transform: translate(20px, 25%);요소의 x축 좌표를 n만큼 이동 가능요소의 y축 좌표를 n만큼 이동 가능X축으로 x만큼, Y축으로 y만큼, 요소를 축소 혹은 확대한다.t

여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법CSS를 이용해서 애니메이션을 만드는 두가지 방법1\. transition 속성 활용특정한 이벤트를 기점으로 작동한다.(hover 등)2\. animation 속성과 keyframe활용시작하기 위한 이

'$'와 '\_'를 제외한 기호는 사용 불가변수명의 맨 앞은 숫자 사용 불가능예약어 사용 불가원시타입: 숫자, null, Bigint, undefined, 문자, symbol , boolean프로그램이 실행되는 도중에 단 하나의 값만을 갖고 있는 자료형비원시타입: 객체

(인자)=>{}인덱스 1번부터 시작했을 때 blue를 포함하고 있는지를 true/false로 반환한다.특정값을 지닌 요소가 몇번째인지를 알려주는 메서드만약 없는애라면 -1을 반환한다.조건을 만족시키는 모든 값을 새로운 배열에 담아서 반환하는 내장 함수특정 배열을 원하는

구조 분해 할당 배열이나 객체의 요소 및 프로퍼티들을 분해 하여, 그 값들을 각각의 변수에 할당하는 자바스크립트의 표현식 배열 구조 분해 할당 temp 변수없이도

다른함수의 인자로 전달되는 함수를 콜백함수!!어떤 함수에 의해 인자로 전달되는 함수!전달하는 인자에는 ()가 붙지 않는다는 걸 명심!함수가 실행되는 곳에서 그 콜백함수의 운명이 결정됨.근데 위에와 같이login안에 addToCart, 또 다른 함수까지 들어가버리면너무