Gentleman'study 젠틀맨

닫는 태그가 없는 태그 일반적인 태그는 처럼 시작하면 처럼 닫아 주어야 합니다. 하지만 일부 태그는 닫지 않는 경우가 있는데 이를 닫는 태그가 없는 태그라고 합니다. 닫는 태그가 없는 태그들 등의 태그는 닫는 태그가 없는데, 그 이유는 태그 내부에 넣을 값이 없기 때문입니다. 기본적으로 HTML은 코드 가독성 향상을 위해 줄 바꿈을 해도 줄 바꿈이 화면에 출력되지 않습니다. 줄 바꿈을 하려면 직접 줄 바꿈을 한다는 명령을 적어 주어야 하며, HTML에서는 를 통하여 줄 바꿈을 합니다. 요소에 이미지를 넣습니다. src특성과 함께 사용해야 하며, 포함하고자하는 이미지로의 경로를 지정합니다. 하이퍼텍스트(Hyper text) 생성 언어 HTML 문서의 맨 위쪽에 위치하는 태그(tag)로 HEAD 태그 사이 ..

레이아웃 배치를 목적으로 만들어진 기능 컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있다 컨테이너에 적용되는 속성 display: flex 각 아이템(요소)들의 width값과 height값만큼 크기가 변경되고 가로 방향으로 정렬한다 { .container { display: flex; display: inline-flex; } } flex-direction 아이템들이 배치되는 축의 방향을 결정한다, 메인축(정렬된 아이템의 축 기준)의 방향을 가로, 세로로 할지 결정한다 { .container { flex-direction: row; // 아이템들의 방향이 행(가로)으로 정렬된다 flex-direction: column;// 방향을 열(세로)으로 정렬한다 flex-direction: row-reve..

1. section 주제 별로 영역을 그룹화 하기 위해 사용 되며 주로 자식 요소로 hn태그 (h1~h6) 태그와 일반적인 컨텐츠가 포함된다. 상품 소개 상품 1 상품 2 상품 3 2. article section 태그와 같이 주제 별로 영역을 그룹화할때 사용하지만 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화한다. 블로그 및 SNS 영역 / 뉴스 기사 / 신문 내용 등에 사용된다 블로그 글 포스팅 1 포스팅 2 포스팅 3 3. 차이점 article은 내용이 독립적이다. article 태그는 section과 다르게 독립적으로 존재할 수 있으며 재사용 할 수 있다. section은 주제별로 구분한 그룹이다. 논리적으로 관계있는 요소 또는 문서를 분리할 때 ..

객체나 배열에 대해서 데이터를 불러올때 "..." 기호를 사용하는 방법 배열 const num = [100, 200, 300, 400, 500]; document.write(num); // 100, 200, 300, 400, 500 document.write(num[0], num[1], num[2], num[3], num[4]); // 100 200 300 400 500 (쉼표가 없다) document.write(...num); // ... 키워드를 사용, 100 200 300 400 500 (쉼표가 없다) 객체 const obj = {a: 100, b: 200, c:"javascript"}; document.write(...obj);// 100, 200, javascript 출력 변수에 저장한 뒤 불러..

Template literals 템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다. 템플릿 리터럴은 표현식/문자열 삽입, 여러 줄 문자열, 문자열 형식화, 문자열 태깅 등 다양한 기능을 제공합니다. ES2015 사양명세서에선 template strings라고 불렸습니다. 템플릿 리터럴은 런타임 시점에 일반 자바스크립트 문자열로 처리/변환됩니다. 프론트엔드에서는 HTML을 데이터와 결합해서 DOM을 다시 그려야 하는 일이 빈번하기 때문에, 템플릿을 좀 더 쉽게 편집하고 작성해야 할 필요가 있어서, 이러한 기능이 추가되었습니다.(자바스크립트 자체적으로 지원하기 전에도 라이브러리로 존재했습니다.) Syntax `string text` `string text line 1 string text line..

addEventListener()는 document의 특정요소(Id,class,tag 등등..) event(ex - click하면 함수를 실행하라, 마우스를 올리면 함수를 실행하라 등등.. )를 등록할 때 사용합니다. 예시로 살펴보겠습니다 #예시 버튼을 누르면 버튼에 적힌 값이 alert창으로 뜨는 스크립트입니다. #html A B C Copied! #js var cols = document.querySelectorAll("#cols .btn"); for (var i = 0; i < cols.length; i++) { cols[i].addEventListener("click", click); } cols[1].style.color = "red"; function click(e) { window.alert..