프론트엔드

image.heros - class heros인 div가 생성됨.hero\*32>.image - class hero인 이미지 32개 생성max-width: 700px; - 700px보다 커지게 되면 정렬이 멈춤margin: auto; - 가로사이즈가 있는 상태라면, 전

link태그를 따로지정하지않으면, 루트에서 favicon.ico를 자동으로 찾아서 설정웹페이지가 소셜 미디어(페이스북 등)로 공유될 때 우선적으로 활용되는 정보웹페이지가 소셜 미디어(트위터)로 공유될 때 우선적으로 활용되는 정보를 지정이러한 외부에서 접속하는 정보들은

height는 최소한으로 가려함flex-grow: 1; - 최대한 옆으로 늘어나게justify-content: flex-end; - 수평정렬을 끝쪽으로

youtube video영상 비율처리.youtube .youtube\_\_area { width: 1920px; background-color: orange; position: absolute; left: 50%; margin-left: calc(1920px

같은 div 여러개의 col 클래스명을 넣어도 전혀 상관없다Bootstrap을 사용하려면 PC말고 모바일 레이아웃부터 만드는게 훨씬 쉽다.전체 12등분인 이유는, 균일하게 6등분, 4등분, 3등분, 2등분하기 매우 쉽기때문이다.col-4 중간에 md를 붙여주면된다. 이

html 특정부분에 스타일링할 수 있다.굳이 많이 쓰이지는 않지만, 아래의 shadow dom을 위해 ::사용법을 알아놓자.pseudo-element를 선택하려면 콜론 2개 :: 를 사용하면 된다. ::first-letter라고 붙이면 안에 있는 글자 중 첫 글자만 스

CSS를 조금 더 프로그래밍스럽게 작성하는 전처리 방법이다.1\. 웹브라우저는 CSS밖에 실행하지 못한다.2\. 따라서 SCSS파일을 CSS파일로 컴파일 시켜줘야한다.3\. VSC의 SCSS compiler를 이용한다.SCSS를 아래와 같이 작성하고, 밑에 watch

전체보다는, 규칙적이고 작은부분의 레이아웃을 잡을때 유용하다.자식 div 높이와 폭을 조정하기선으로 기준을 나누어주면 된다.자식에게 이름쓰고 부모가 배치하기직관적으로 이름을 지정해서, 배치해주면 된다.position: fixed와 유사하게, 고정시켜주는 대신, 요소가

팩트는 html 조작과 변경이다.script는 html요소들보다 아래에 있어야 한다.HTML, CSS으로 미리 UI 디자인을 해놓는다.UI를 평소엔 안보이게 숨겨놓는다.버튼을 누르거나할 경우 UI를 보여준다.긴 코드를 깔끔하게 한 단어로 축약한다.해당 function에

회전목마같이 옆으로 넘어가는 슬라이드그냥 라이브러리를 쓰지않고 구현해보았다.

어떤 HTML 태그에 이벤트가 발생하면, 그의 모든 상위요소까지 이벤트가 실행되는 현상이다.ex) black-background만 눌렀을 때, 창 닫히게 하기생각치도 못한 오류가 생기는 것이니, 주의하자!!버블링을 응용해서, 상위요소에 이벤트 리스너를 단다.그러면 코드

append() 함수는 내부에 특정 HTML을 추가한다.html() 함수는 아예 HTML을 교체한다고 생각하자.input - 값이 바뀔때마다 실행change - 포커스를 잃었을 때(커서가 다른곳에 찍힐 때) 실행서버에서 HTML 파일을 미리 다 완성해서 보내주기서버에서

JS가 HTML에 대한 정보들 (id, class, name, style, innerHTML 등)을 Object 자료형으로 정리하는 개념이다.따라서 DOM이 생성되기전에 JS를 호출하면 에러가 난다.p가 나중에 생성되도 에러가 나지 않는다.이미지 등 로딩이 완료되면 뭔

터치이벤트를 호환성이 좋게 개발할 수 있는 라이브러리Carousel같이 그냥 가져다 쓸 수도 있지만, 라이브러리를 통해 개발해보자.이미지에다가 touchstart, touchmove, touchend 라는 이벤트리스너를 각각 만들어준다. 각각 터치시작, 터치중, 터치끝

window 그자체그냥 쓰거나 일반 함수안에서 쓰면 window왜냐하면 함수나 변수를 전역공간에서 만들면 js는 window라는 객체에 저장하기 때문이다.오브젝트 그자체기계안에서 새로 생성되는 오브젝트이다.이벤트리스너에서의 thisthis의 경우를 파악해보며 만든 예시

var 재선언, 재할당 둘다 가능, 범위는 함수let 재할당만 가능, 범위는 중괄호const 둘다 안됨, 범위는 중괄호 - 하지만 object일때, 내부 값은 변경해도 괜찮다.Object.freeze(오브젝트); //오브젝트를 내부까지 아예 수정 불가능하게변수나 함수의

모든 파라미터를 \[]안에 넣을 수 있다. ES6의 Rest parameter가 있어서 덜 쓰인다.파라미터를 실수로 안 적거나 없을 경우, 기본값을 줄 수 있다.1\. 기본 값이나 수식들이 들어갈 수 있다.반환된 함수도 들어갈 수 있다.arguments와 동일하지만,

비슷한 object를 쉽게 생성할 수 있는 기계를 만든다고 생각하자.1\. this - 기계에서 새로 생성되는 object(intance 인스턴스이다.)2\. 기계 - object 생성기계(constructor 생성자이다.) constructor(기계)를 만들면, p

ES6의 class에 밀려난, 쉽지만 잘 안쓰이는 ES5문법이다. constructor, prototype을 이용한 상속기능을 보기쉽게 만들어준다.ES6문법이고, 제일 많이 쓴다.기존에 있던 class의 내용을 그대로 복붙해서 만들어준다.문제 1. 고양이는 .한살먹기(

한번에 코드 한줄씩 차례차례 실행되는 방식그냥 거의 대부분의 프로그래밍 언어들은 이런 특징을 가지고 있다.실행이 오래걸리는 그런 코드들은 잠깐 대기실에 제쳐두고, 실행이 바로바로 가능한 코드들부터 처리하는 방식 js 언어 자체의 기능이 아니라, js의 실행을 도와주는

Promise가 어렵다면 그보다 쉽게 쓸 수 있는 ES8 문법반복문의 용도(for, forEach 포함)Object에 사용한다.array, 문자, arguments, NodeList, Map, Set에 사용한다.iterable - Symbol.iterator 이라는 일