< devHyebin/>

👉 배열을 초기화 할때 사용하는 두가지 방법 [from / fill] from: 객체를 얕게 복사해 새로운 객체 생성 fill: 정적인 값 한가지, 요소의 위치를 지정가능 from 유사 배열 객체나 반복 가능한 객체를 얕게 복사해 새로운 Array 객체를 만든다. 기존 객체를 이용해 새로운 배열을 만들어야 할 때 Array.from('js공부중'); //['j', 's', '공', '부', '중'] Array.from([1, 2, 3], x => x + x); // [2, 4, 6] 💡 유사배열 객체란? 유사 배열 객체는 배열처럼 보이지만 사실 key가 숫자이고 length 값을 가지고 있는 객체를 말한다. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를..

join 배열 → 문자열 요소들을 연결해 하나의 값으로 만들 때 array.join(매개변수: 각 요소를 구분할 문자열) ( 매개변수를 생략하면 배열의 원소들의 쉼표로 구분한다.) const arr = ['하나', '둘', '셋']; console.log(arr.join()); // 하나,둘,셋 console.log(arr.join('')); // 하나둘셋 console.log(arr.join('-')); // 하나-둘-셋 split 문자열→ 배열 문자열을 나누거나 구분하는 방법이 필요할 때 str.split('구분의 기준이 되는 문자열') const beforeStr = "010-123-4567"; console.log(beforeStr.split('-')); //['010', '123', '4567'..

Array 데이터의 집합으로 여러 개의 값을 하나의 이름으로 묶어 사용할 수 있게 도와준다. 배열의 각 값은 원소(element) 혹은 요소라고 부른다. var num =[1,2,3]; 배열의 크기는 length 프로퍼티를 통해 알 수 있다. 배열의 생성자 함수에 숫자를 한개만 넣으면 인스턴스의 길이를, 여러 숫자를 넣으면 배열의 원소를 뜻한다. 배열이름= new Array(배열길이); 배열이름= new Array(element1, element2 ....); 배열의 리터럴 표현( [ ] ) 각괄호 + 인덱스를 통해 각 원소에 접근할 수 있으며, 원소에 값을 저장할 수도 있다. 심지어 존재하지 않는 원소에도 접근이 가능하다. 리터럴 생성과 동시에 원소에 접근 할 수도 있다. ([1,2,3,][0] ===..

image sprite 기법이란? 이미지들을 하나씩 다운받고서 서버에게 보내면 굉장히 많은 로딩시간이 필요하기 때문에 단점을 보완하여, 여러가지의 이미지를 하나의 이미지 파일안에 배치하여 이미지 로드 부담을 줄이는 방법이다. - background-position 속성으로 이미지 좌표 값을 이용하여 사용 매번 알고는 있지만 좌표까지 계산해서 해주기엔 너무 귀찮아서(?),, 사용하지 않았다.. 오늘 수업을 듣고 image sprite를 제작해주고 좌표까지 친절하게 알려주는 사이트를 알게되었다..! ✨ image sprite 쉽게 도와주는 사이트 ✨ https://www.toptal.com/developers/css/sprite-generator/ CSS Sprites Generator CSS Sprites..

"왜... 가운데로 안가지?" 인라인요소 or 블럭요소에 따라 달라지기 때문에 각각마다 고려해야할 상황들에 대해 정리해보았다! 부모요소 height 속성을 100vh 설정해줘야한다. ( 안그러면 부모요소가 컨텐츠 높이만큼 차지하기 때문에) 중앙정렬: margin 가장 많이 사용하는 방법 부모요소 display: flex; 자식요소 margin : auto; See the Pen Untitled by Webin (@hyebin-woo) on CodePen. 중앙정렬: position 부모요소 position:relative; ( 지정해주지 않을 시 최상위 요소 body가 기준점이 된다) 자식요소 postition:absolute; top:50; left:50; : 가운데로 정렬하기 transform: tr..

🙈 display: none : 해당 콘텐츠를 숨길뿐만 아니라 콘텐츠의 영역이 사라진다. 🙈 visibility: hidden : 눈에는 보이지는 않지만 화면에 렌더링 되어 공간을 가지고 있어서 다른 요소들의 위치에도 영향을 줄 수 있다. 🙈 overflow: hidden : 내부의 요소가 부모의 영역을 벗어나는부분을 보이지 않게 만드는 속성이다. 그 밖에 요소를 숨기는 속성: opacity:0 , IR기법 ✏️ 정 리 display: none과 visibility: hidden 차이 : UI적으로 볼 때 완전히 다르다. display:none은 화면상 어떤 영역을 차지하지 않고 완전히 삭제된 것처럼 보이게 하지만, visibility:hidden은 해당 요소가 보이지..

마진(margin) : 바깥 여백 영역, border 바깥 쪽 영역으로 요소와 요소 사이의 공백 역할 여러 요소에 마진값이 넣어져 있을 때 의도치않게 요소의 여백이 줄어들어져있거나 여백을 늘려도 늘어나지 않는 현상들을 겪을 수 있다. 📝 마진 병합 현상(Margin Collapsing) : 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상 인접해있는 블럭 요소끼리만 일어난다. 상하만 해당한다(좌우는 해당 안함) See the Pen Untitled by Webin (@hyebin-woo) on CodePen. : 💡 해결 방법 1. 자식요소의 display속성값을 inline-block으로 바꾸기 See the Pen Unt..

✔ HTML Living Standard란? 간단하게 말하면 Html 문법들을 규정한 표준이다. Html5 ≠ Html Living Standard XHTML이란 : 웹페이지를 제작하기 위해 사용되는 HTML4(지금 사용하고 있는 HTML living standard의 전 전 버전)를 XML에 맞도록 재정의한 언어이다. (HTML5보다 조금 더 구조화된 형식과 엄격한 문법을 가지고 있음) HTML Living Standard 탄생 HTML을 협력해서 개발하던 W3C, WHATWG가 있었다. WHATWG은 W3C가 의사결정이 느리다는 이유로 애플, 모질라 재단모여서 2004년에 만든 그룹이다. 지금은 애플, 모질라, 구글과 마이크로소프트 4개사가 핵심그룹이다. 웹의 역사에서 WHATWG의 주요 역할은 20..

전공을 살려 다시 코딩을 해보고 싶다는 생각을 내내 하곤 했었다,, 늘 난 늦었다 생각을 하고 해볼까라는 고민이 많았는데.. 집에서 e북으로 HTML, CSS, JS 한 번에 배우는? 그런 책을 사서 코딩을 쬐금씩 하곤 했다,, 그동안 학교에서 배운 자바에 비해서 너무 재밌고 결과물을 보며 뿌듯하고 점점 더 깊게 배우고 싶은 생각이 들었다..!! 그래서 나는 퇴사를 하고 코딩 공부를 제대로 해야겠다고 다짐했다!! 1월 말쯤 퇴사를 하고 바로 3월에 교육을 들을 수 있는 부트캠프를 알아보다.. 멋쟁이사자차럼 프론트엔드 스쿨을 보며 나에게 딱이잖아!!? 하고 냅다 지원했는데 결과적으론.. 운 좋게.. 붙게 되었다..!!77ㅑ....❤️ 내가 부트 캠프를 선택한 이유는... 팀 프로젝트 경험과 기초부터 탄탄하..

:모든 웹사이트에서 동작하는 문서를 작성하는 언어이며, 웹을 정의하는 마크업 언어 HTML : Hyper Text Markup Language 약어 HyperText : 한 문서에서 다른 문서로 이동할 수 있는 텍스트 Markup : 문서의 제목, 문단, 표을 이용하여 콘텐츠의 구조를 표현 HTML의 특징 HTML은 웹 문서 표준 형식 마크업(Markup) 언어 HTML은 공백, 줄 바꿈을 인식하지 않고, 대문자와 소문자를 구분하지 않음 Tag: 시작 태그와 종료 태그 로 구성되어있음 다른 프로그래밍 언어에 비해 구조가 단순하고, 문법이 쉬움 컴퓨터 시스템이나 운영체제에 있어 독립적 확장명은 .html HTML의 기본구조 1. : 웹 브라우저에게 html 버전을 선언하는 역할 " 선언했으니 버전에 맞는 ..