본문 바로가기

Frontend23

[JS] \n과 <br>의 차이 ▷ HTML상에서 사용하는 줄바꿈 방법 ▷ \n JS에서 사용하는 줄바꿈 방법 ▷ 템플릿 리터럴(Template literals) escape 문자인 \n 대신에 백틱(`)을 사용하는 방법 백틱 안에 있는 내용이 그대로 표현됨 안녕\n하십니까? 감사합니다. - 웹페이지 출력 결과 - console 창 출력 결과 2021. 11. 3.
[JS] class와 object class와 object의 차이점 class는 붕어빵 틀, object는 붕어빵(팥 붕어빵, 슈크림 붕어빵)에 비유할 수 있다 ▷ class - class는 연관 있는 것들을 모아놓은 집합체 - template (어떤 데이터가 들어올 수 있는지 정의) - declare once (한번 선언함) - no data in ▷ object - instance of a class (class를 이용해 새롭게 생성된 instance를 object라고 함) - created many times - data in - 생성된 object는 메모리에 저장됨 객체지향 프로그래밍이란? 쉽게 말해, 자료와 함수를 함께 사용하는 것을 지향하는 프로그래밍 ▷ 출처 https://www.youtube.com/watch?v=_DLhU.. 2021. 9. 14.
[HTML] inline-level elements and block-level elements inline요소 tag block요소 tag a div button h1,h2,h3,h4,h5,h6 i aside input article label footer span header strong section canvas nav svg main footer form li, ol, ul 2021. 9. 2.
[Git] 유닉스 터미널 명령어 정리(손글씨) ▶︎ 출처: 엘리코딩 https://www.youtube.com/watch?v=EL6AQl-e3AQ 2021. 8. 31.
[JS] parameter, argument function printFruit(name, price) { console.log(name+"는 "+ price +"원 입니다."); } printFruit("banana", 2000); 1. 함수를 호출한다 2. 함수를 호출할 때, "banana"와 2000의 데이터를 printFruit함수로 전달한다 3. name과 price 라는 매개변수에 "banana"와 2000이 저장된다 4. 데이터가 채워진 값이 출력된다 ▷ argument(인수) - "banana", 2000 - 데이터를 넘겨준다 - javascript 내에서 사용하는 모든 data type을 다 사용할 수 있음 (array나 object도 가능) ▷ parameter(매개변수) - name, price - 함수를 선언하는 쪽에서, 넘겨.. 2021. 8. 13.
[JS] 윈도우 사이즈 표기 (window.screen / window.outer / window.inner / documentElement.clientWidth) ▷ window.screen - 모니터의 사이즈, 해상도 - 브라우저 바깥에 있는 영역까지 합함 - 콘솔창에 입력하면 다양한 property 값을 가진 object를 보여줌 ▷ window.outer (outerWidth, outerHeight) - 전체적인 브라우저의 사이즈 ▷ window.inner (innerWidth, innerHeight) - 페이지가 표기되는 부분 전체 - 스크롤바가 표기되는 것 포함 ▷ documentElement.clientWidth - 문서 전체를 의미 - 스크롤바를 제외한 순수 document의 크기 // 실사용 예시 documentElement.clientWidth = ${document.documentElement.clientWidth}, ${document.docu.. 2021. 7. 31.
[JS] object에서 method를 작성하는 두 가지 방법 method: 객체의 속성 중에 동작(함수)인 것 method를 작성하는 방법 두 가지 ▷ 첫 번째 방법 // eat() 메소드를 활용한 예시 const pet = { eat: function (food) {} } pet.eat() const superEventHandler = { handleEnter: function() { h2.innerText = "The mouse is here!"; h2.style.color = colors[0]; } } h2.addEventListener("mouseenter", superEventHandler.handleEnter); ▷ 두 번째 방법 const pet = { eat(food) } pet.eat() const superEventHandler = { handl.. 2021. 7. 31.
[CSS] CSS position 정리 (static, absolute, relative, fixed, sticky) CSS position ▷ static - position의 defalut value - html에서 지정한 순서대로 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다 - top, left, right, bottom 값을 설정해도 변화가 없음 ▷ absolute - 내 아이템과 가장 가까이 있는 부모의 box를 기준으로 움직임 - 이때 부모의 position은 static이 아니어야 함 - 만약 부모 중에 포지션이 relative, absolute, fixed인 태그가 없다면 가장 위의 태그(body)가 기준이 됨(static이어도) img { transform: translate(-50%, -50%); position: absolute; top: 50%; left: 50%; } .vt { position.. 2021. 7. 30.
[JS] list of javascript events https://developer.mozilla.org/ko/docs/Web/Events 2021. 7. 30.
[CSS] CSS units 정리 | em, rem | 반응형에서 px사용을 지양하는 이유 unit의 종류 - unit의 종류는 크게 두 가지 종류로 나눌 수 있다 Absolute Relative px %, viewport, em, rem - 상대적인 유닛은 다시 두 종류로 나눌 수 있는데, Parent Browser % viewport(vh,vw) em rem 부모의 값에 영향을 받는 유닛과 브라우저의 영향을 받는 유닛으로 나뉜다 반응형에서 px를 사용하기를 지양해야 하는 이유 - container의 사이즈가 변경되어도 contents가 그대로 고정된 값으로 유지된다 - 사용자가 브라우저에서 폰트 사이즈 설정을 바꿔도 반응하지 않는다 em과 rem - 1em은 픽셀 값으로 변환하면 16px(브라우저에서 지정한 기본 값) - em은 부모의 값에 영향을 받는 반면, rem은 상속의 개념이 존재하.. 2021. 7. 22.