공부5 [JavaScript] ES6 - 템플릿 리터럴 ✅ 템플릿 리터럴(Template Literal) ` 문자열 ${표현식} ` - 백틱(``)을 사용하여 문자열을 편하게 입력하게 해주는 ES6문법 - 특수문자, 엔터나 스페이스 등의 문자열이 작성한 그대로 출력된다. - 문자열과 함께 줄 바꿈, 변수사용, 연산, 함수 등을 사용할 때 유용하다. ✅ 사용방법 - 문자열은 출력되기 원하는 모양대로 작성하고 변수나 표현식은 ${표현식}으로 나타낸다. const lang = "자바스크립트"; let print1 = "안녕!\n나는 " + lang + "를 공부중이야!"; console.log(print1); /* 안녕! 나는 자바스크립트를 공부중이야! */ let print2 = `안녕! 나는 ${lang}를 공부중이야!`; console.log(print2);.. 2023. 7. 17. [JavaScript] 크기값 구하기 ✅ 요소의 크기 clientWidth / clientHeight 요소.clientWidth : 요소의 border를 제외한 padding까지의 너비(높이)를 반환한다. - padding만 포함하여 계산한다. scrollWidth / scrollHeight 요소.scrollWidth : 화면에 보이는 것과 상관없이 실제 컨텐츠 영역의 너비(높이)를 반환한다. - padding을 포함한 화면 상에 표시되지 않은 숨겨진 영역까지 포함하여 계산한다. offsetWidth / offsetHeight 요소.offsetWidth : 요소의 margin을 제외한 border까지의 너비(높이)를 반환한다. - padding, border, 세로(가로)스크롤바를 포함하여 계산한다. 👉 참고 : http://jsfiddle.. 2023. 7. 14. [JavaScript] target과 currentTarget 차이 ✅ target - 실제로 이벤트가 발생한 요소를 가리킨다. - 이벤트가 처음 발생하는 위치를 알 수 있다. ✅ currentTarget - 이벤트 핸들러(EventListener)가 부착된 요소를 가리킨다. ✅ target과 currentTarget 차이 예를 들어 부모요소에 클릭이벤트를 걸어주고 그 자식요소를 클릭했을때 event.target은 내가 클릭한 자식요소의 위치를 반환하고 event.currentTarget은 이벤트 핸들러가 부착된 부모요소의 위치를 반환한다. 2023. 7. 13. [HTML] HTML 기본구조 ✅ HTML 기본구성 - 현재 문서가 HTML5 문서임을 명시하기 위해 사용한다. - 브라우저가 이 부분을 읽는 순간 html5문법으로 읽을 준비를 한다. - HTML 문서의 최상단 요소, 루트(root)요소라고 부른다. - HTML 문서의 메타데이터를 정의한다. - 웹 브라우저를 통해 외부적으로 보여지는 부분이다. - lang 속성은 웹 페이지에서 사용되는 주된 언어를 설정한다. - 검색엔진이 해당 페이지가 어떤 언어로 만들어졌는지 쉽게 인식하게 해준다. 메타데이터(metadata) - 문서의 타이틀, 문자셋 등 외부적으로 표현되지 않는 HTML 문서에 대한 정보 ✅ 안에서 사용할수 있는 태그 - HTML 문서의 제목을 정의할 때 사용하는 태그로 웹 브라우저 탭(툴바)에 표시된다. - 검색엔진의 결과 .. 2023. 7. 10. [HTML] HTML 이란? ✅ HTML(HyperText Markup Language) : 태그를 사용해서 하이퍼텍스트 같은 컨텐츠를 구조화하여 웹 페이지에 표시하기 위한 마크업 언어 - 웹 페이지의 구조를 구축하는 역할을 한다. - 단순히 구조를 정의하는 역할만 하기 때문에 프로그래밍 언어는 아니다. - 웹 페이지는 HTML태그로 작성되기 때문에 HTML문서라고도 불린다. HTML은 프로그래밍 언어가 아니다. HTML은 마크업 언어지만 프로그래밍 언어가 아니다. 마크업 언어로서 단순한 정보의 구조를 웹 페이지에 전달만을 하고 있을 뿐 프로그래밍 언어의 논리적인 부분(조건에 따른 분기 등)이 없기 때문에 프로그래밍 언어라고 할 수 없다. 하이퍼링크(Hyper Link) - 문서 내의 특정한 단어나 이미지 클릭시에 한 문서에서 다른.. 2023. 7. 10. 이전 1 다음
