잼굴 코딩공장

prototype : 상속을 구현할수있는 문법 / 유전자 느낌 / JS에만 있는 개념 function Student(이름) { this.name = 이름; this.age = 15; this.sayHi = function () { console.log("안녕하세요" + this.name + "입니다"); }; } let 학생1 = new Student("Park"); let 학생2 = new Student("Lee"); let 학생3 = new Student(); constructor를 만들면 prototype이라는 공간이 자동적으로 생긴다. prototype은 유전자이기때문에 prototype에 값을 추가하면 모든 자식들이 물려받을수 있다. Student.prototype.gender = "남"; 위 ..

constructor 사용처 : object를 막 복사하고 싶을때 사용함 출석부 만드는걸로 예시 들어봄 let 학생1 = {name : 'kim', age : 15 } let 학생2 = {name : 'kim2', age : 15} let 학생3 = {name : 'kim3', age : 15} 학생정보를 object로 만드려는데 이렇게 하나하나 만들기 너무 귀찮음 그럴때 constructor 씀 function Student() { this.name = "Kim"; this.age = 15; } 이게 constructor임. 이거 쓰면 object 무한 생성가능 function쓸때 거의 보통 함수명을 대문자로써줌 (국룰) constructor 안에서 this는 새로 생성되는 object를 뜻함 this..

ES6에서 새로생긴 화살표 함수 let fx = function() { } let fx = () => { } 함수를 만들어내는 이유: 1. 코드들을 기능으로 묶고싶을때 2. 입출력 기계를 만들고 싶을때 Arrow function의 장점 1. 입출력 기계 만들때 보기쉬움 2. 소괄호 생략가능 (파라미터가 1개일때만) 3. 코드 한줄이면 중괄호도 생략가능 => 직관적 사용 예제 [1, 2, 3, 4].foreach(function (a) { console.log(a); //a는 array내의 자료들 }); [1, 2, 3, 4].foreach((a) => console.log(a)); //a는 array내의 자료들 한줄로 간지나게 정리 가능 Arrow function 특징: 바깥에 있던 this값을 내부에서..

console.log(this); 찍으면 콘솔창에 window 머시기 뜸 function 함수(){ console.log(this) } 함수(); 이것도 마찬가지로 window 머시기 뜸 window 머시기 ==> 그냥 자바스크립트를 통째로 감싸는 녀석이라고 생각하면 됨 let object1 = { data : 'Kim', lion : function(){ console.log('front') } } 오브젝트 내에 함수 사용가능 오브젝트 내에 함수를 method라고 함 object1.lion(); //함수는 () 해줘야 출력됨 -> 콘솔에 front가 찍힌다 let object1 = { data : 'Kim', lion : function(){ console.log(this) } } object1.lio..

최근 급하게 떡상하고있는 Tailwindcss. 사용량 2위에 부트스트랩에 비해 압도적인 만족도. 그 이유는 뭘까? 한번은 체험 해봐야겠다 싶었고, 수업에서 배우고 4시간정도 실습시간이 주어졌다. 실습시간동안 간단하게 Tailwind만 이용해서 이력서를 만들어 보았다. 체험후기: 클래스명이 직관적이라서 몇번 쓰다보면 적응돼서 저절로 외워진다. 사이트도 직관적이고 검색기능이 유용하다. Tailwind를 사용하기 위해서는 head에 CDN script를 적어둬야한다. 검색기능을 활용하면 원하는 기능을 쉽게 찾을수있다. 클래스에 원하는 색상의 클래스명을 입력하면 알아서 CSS가 적용되는 구조이다. Tailwind를 체험해보고자 이력서를 간단하게 만들어 보았다. https://jamgoori.github.io/..

sass와 scss의 차이 sass : 괄호 없이 사용가능함 .background color : red scss : 괄호 사용함 .background { color : red; } nesting 문법 관련있는 Class들 묶을 때 좋음 Nesting안에 또 Nesting 할수있지만 이렇게까지 거의 사용안함 UI들을 뭉탱이로 관리할 수 있음 .main { h4 { font-size: 16px; } button { color: red; } } 이건 SCSS로 작성한것 CSS 결과물: .main h4 { font-size: 16px; } .main-bg button { color: red; } @extend 이미 존재하는 속성들을 복붙하지 않고 사용할수 있다. 사용법 .**** { } : 변수선언 %**** ..

반응형 이미지 배경 꽉채우기 background: no-repeat; background-size: cover; background-position: center; max-width : 100% -> 이미지 크기의 최대크기까지 늘려줌 width: 100% -> 화면 최대크기까지 늘려줌 반응형 비디오 autoplay 할때는 muted 설정하자 -> 웹 접근성때문에! 영상도 width 100% -> 반응형 지원함 영상도 max-width: 100%는 원본의 영상크기까지 늘어남. 유튜브는 비디오랑 다르게 url에 autoplay, mute 같은거 붙어있음. (파라미터) -> 알아서 자동재생+음소거 유튜브영상 width:100%, height:100% 주면 되긴하는데 화면비율을 자동으로 잡아주진않음. -> 10..

Overflow 자식요소가 부모요소를 넘어갈때 처리하는 방법을 선택할수있다. Overflow: hidden 부모요소의 범위를 넘어가는 자식요소의 부분은 보이지 않도록 처리한다. 그래도 스크린 리더기에서 읽어줌 .over{ overflow: hidden; border: 5px solid orange; width: 200px; height: 200px; } Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium ipsum ipsa ratione numquam iste? Provident maiores reiciendis sequi, dolorem impedit voluptatem laudantium officia ad corrupti po..

박스의 구성 HTML의 박스는 4가지 요소로 구성되어있다. 콘텐츠(content) : 콘텐츠가 표시되는 영역. width와 height로 크기를 설정할수있다. 패딩(padding) : 콘텐츠와 테두리 사이의 영역. padding으로 크기를 설정할수있다. 보더(border) : 콘텐츠와 패딩을 둘러싸는 영역. border로 크기, 모양, 색깔을 설정할수있다. 마진(margin) : 가장 바깥쪽 영역. margin으로 크기를 설정할수있다. 박스의 유형 1. 블록 박스 2. 인라인 박스 (hidden) 인라인 블록 안녕 안녕 div = 블록 span = 인라인 블록박스 남는 공간을 margin으로 다채움. width와 height로 크기를 설정할수있음 패딩과 보더 마진 모두사용가능 인라인 박스 컨텐츠 넓이만큼..

마진(margin)은 요소의 네방향 바깥 여백을 말한다. *(안쪽 여백은 패딩(padding) 마진 겹침현상 (Margin Collapsing) 블록요소에서 일어나는 현상. 인접한 블록의 상하단 마진이 겹쳐지는것으로 의도된 현상. 겹쳐지는것은 더 큰 마진값이 기준이다. 그림에서 겹침현상이 없었다면 Section#1과 Section#2의 사이가 40px이어야한다. 하지만, 겹침현상으로 20px로 나타나짐 😥 그런데 이게 부모-자식 요소간에도 적용이된다... 쩝 1. 마진 적용 X .first { background-color: red; width: 400px; margin: 0 auto; border: 1px solid black; } .second { background-color: orange; wid..