티스토리

Rocomi의 개발새발

검색하기

블로그 홈

Rocomi의 개발새발

kauli1014.tistory.com/m

Rocomi 님의 개발블로그 입니다.

구독자: 1

방명록 방문하기

주요 글 목록

JS의 또 다른 특징들 JavaScript는 유연하고 강력한 프로그래밍 언어로, 객체, 배열, 함수, 이벤트, 정규표현식 외에도 다양한 중요한 개념들이 존재합니다.여기에서는 호이스팅(hoisting), 스코프(scope), 클로저(closure), this 바인딩 등 JavaScript의 중요한 특징들을 설명하겠습니다.1. 호이스팅 (Hoisting)**호이스팅(hoisting)**은 JavaScript에서 변수 선언과 함수 선언이 코드 실행 전에 상단으로 끌어올려지는 동작을 말합니다. 하지만 변수 초기화는 호이스팅되지 않고, 선언만 호이스팅됩니다.예제 코드:1234567891011console.log(x); // undefined (변수 선언이 호이스팅되었으나 초기화는 되지 않음)var x = 5;console.log(x);.. 공감수 1 댓글수 0 2024. 8. 17.
JS의 정규표현식 JavaScript의 정규표현식(Regular Expression)은 문자열에서 특정 패턴을 검색하거나, 매칭되는 부분을 추출하거나, 치환하는 데 사용됩니다. 정규표현식은 매우 강력한 도구로, 패턴 매칭을 통해 복잡한 문자열 조작을 단순화할 수 있습니다.기본 개념정규표현식은 슬래시(/)로 감싸서 정의되며, 다양한 패턴과 메타문자를 사용하여 문자열의 구조를 기술합니다.기본 구조:1let regex = /pattern/flags;cspattern: 찾고자 하는 문자열의 패턴.flags: 정규표현식의 동작 방식을 변경하는 옵션 (예: g, i, m 등).주요 플래그g (global): 문자열 내에서 패턴을 전역으로 검색합니다. 첫 번째 매칭만 찾는 것이 아니라 전체에서 매칭되는 부분을 찾습니다.i (ignor.. 공감수 0 댓글수 0 2024. 8. 17.
JS의 이벤트 JavaScript에서 이벤트 모델은 사용자와 웹 페이지 간의 상호작용을 처리하는 방법을 정의합니다. JavaScript 이벤트 모델은 주로 3가지로 분류할 수 있습니다:기본 이벤트 모델 (DOM 레벨 0 이벤트 모델)인라인 이벤트 모델표준 이벤트 모델 (DOM 레벨 2, 3 이벤트 모델 (이벤트 위임 포함))각 모델은 이벤트를 처리하는 방법이 다르며, 이에 따라 다양한 방식으로 이벤트를 다룰 수 있습니다.1. 기본 이벤트 모델 (DOM 레벨 0 이벤트 모델)기본 이벤트 모델은 가장 단순한 이벤트 처리 방식으로, HTML 요소에 직접 이벤트 핸들러를 할당하는 방식입니다. 이 방법은 주로 JavaScript의 초기 버전에서 사용되었으며, 한 요소에 하나의 이벤트 핸들러만 설정할 수 있습니다.특징:HTML .. 공감수 0 댓글수 0 2024. 8. 16.
JS의 Window객체 JavaScript의 Window 객체는 브라우저 환경에서 전역 객체(global object)로, 브라우저 창 또는 탭을 나타냅니다. 이 객체는 웹 페이지와 관련된 많은 기능과 속성을 제공하며, 전역적으로 접근 가능한 변수와 함수들은 사실 Window 객체의 프로퍼티로 존재합니다. 예를 들어, window.alert()는 alert()와 동일하게 작동합니다.주요 속성 및 메서드window.document현재 로드된 웹 페이지를 나타내는 Document 객체를 반환합니다.예: document.title은 현재 웹 페이지의 제목을 반환합니다.window.location현재 문서의 URL 정보를 포함하는 객체로, 이를 통해 페이지를 이동하거나 URL 정보를 얻을 수 있습니다.예: window.location.. 공감수 0 댓글수 0 2024. 8. 16.
JS의 객체 JavaScript에서 객체(Object)는 데이터를 구조화하고 관리하기 위한 핵심 요소 중 하나입니다.객체는 키-값 쌍(Key-Value Pair)으로 이루어져 있으며, 다양한 데이터 타입을 포함할 수 있습니다.객체는 JavaScript의 거의 모든 것을 나타낼 수 있기 때문에 매우 중요한 개념입니다.1. 객체의 정의객체 생성: 객체는 중괄호 {}를 사용하여 생성됩니다. 객체 내부는 하나 이상의 키-값 쌍으로 구성됩니다.123456let person = { name: 'John', age: 30, job: 'Developer'}; cs여기서 name, age, job은 키(property name)이고, 'John', 30, 'Developer'는 값(value)입니다.2. 객체의 속성.. 공감수 0 댓글수 0 2024. 8. 15.
JS의 구문 JavaScript(JS)에서 "태그"라는 용어보다는 "문법 요소", "구문" 또는 "문"(statements)라는 표현을 사용합니다.JavaScript는 HTML이나 CSS와 달리 자체적으로 태그를 사용하지 않고, 대신 프로그래밍 구문을 통해 기능을 구현합니다. 여기서는 JavaScript의 중요한 구문과 개념들을 상세히 설명하겠습니다.1. 변수 선언JavaScript에서는 변수를 선언하여 데이터를 저장하고, 나중에 이를 참조할 수 있습니다.var: 오래된 변수 선언 방식으로, 함수 스코프를 가집니다. 현대 JavaScript에서는 주로 let이나 const를 사용합니다. let: 블록 스코프를 가지며, 변수의 값을 변경할 수 있습니다. const: 블록 스코프를 가지며, 선언 후 값을 변경할 수 없습.. 공감수 0 댓글수 0 2024. 8. 15.
JS VS Code에서 JavaScript(JS)를 작성하는 방법은 HTML과 CSS처럼 간단합니다. VS Code는 JavaScript 개발을 지원하는 다양한 기능과 확장 프로그램을 제공하여, 개발자들이 효율적으로 코드를 작성하고 디버깅할 수 있도록 돕습니다. 아래에 VS Code에서 JavaScript를 작성하는 방법과 간단한 코드 예제를 소개하겠습니다.1. JavaScript 파일 생성 및 작성프로젝트 폴더 열기: VS Code에서 새로운 폴더를 열거나 만들고, 해당 폴더를 작업 폴더로 설정합니다.JavaScript 파일 생성: script.js와 같은 이름으로 새로운 JavaScript 파일을 생성합니다.JavaScript 코드 작성: 새로 생성한 JS 파일에 원하는 JavaScript 코드를 작성합니.. 공감수 0 댓글수 0 2024. 8. 15.
CSS 스타일 CSS에서 중요한 스타일 종류는 웹 페이지의 레이아웃, 타이포그래피, 색상, 간격 등을 제어하는 데 사용됩니다. 이러한 스타일 속성들은 웹 페이지를 디자인하고 사용자 경험을 향상시키는 데 필수적인 요소입니다. 아래는 중요한 CSS 스타일 종류와 그 상세 설명입니다.1. 색상 및 배경color: 텍스트의 색상을 지정합니다. background-color: 요소의 배경색을 지정합니다. background-image: 요소의 배경에 이미지를 지정합니다. background-repeat: 배경 이미지의 반복 여부를 지정합니다. background-size: 배경 이미지의 크기를 지정합니다. 2. 타이포그래피font-family: 텍스트의 글꼴을 지정합니다. font-size: 텍스트의 크기를 지정합니다. fon.. 공감수 0 댓글수 0 2024. 8. 14.
CSS 속성, 선택자 CSS(Cascading Style Sheets)에서 중요한 "태그"는 HTML 태그와 연관된 스타일을 정의하는 요소입니다. 정확히 말하면 CSS에서는 "태그"라는 용어 대신 "속성"(properties)와 "선택자"(selectors)를 주로 사용합니다. CSS의 주요 속성과 선택자에 대해 설명하겠습니다.1. CSS 선택자CSS 선택자는 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다.* (전체 선택자): 모든 요소에 스타일을 적용합니다. tagname (태그 선택자): 특정 HTML 태그에 스타일을 적용합니다. .classname (클래스 선택자): 클래스 이름을 가진 요소에 스타일을 적용합니다. #idname (아이디 선택자): 특정 ID를 가진 요소에 스타일을 적용합니다. 자손 선택자: .. 공감수 0 댓글수 0 2024. 8. 14.
CSS VS Code에서 CSS를 작성하는 방법은 매우 간단하며, HTML과 함께 사용하여 웹 페이지의 스타일을 지정할 수 있습니다. 아래에 VS Code에서 CSS를 작성하는 방법과 간단한 코드 예제를 소개하겠습니다.1. CSS 파일 생성 및 작성프로젝트 폴더 열기: VS Code에서 HTML 파일을 포함한 프로젝트 폴더를 열거나 새로 만듭니다.CSS 파일 생성: styles.css와 같은 이름으로 새로운 CSS 파일을 생성합니다.CSS 코드 작성: 새로 생성한 CSS 파일에 스타일을 정의합니다.2. CSS 파일 HTML에 연결CSS 파일을 HTML에 연결하려면 HTML 파일의 섹션에 다음과 같이 태그를 추가합니다.12link rel="stylesheet" href="styles.css"> Colored .. 공감수 0 댓글수 0 2024. 8. 14.
HTML 태그 HTML에서 중요한 태그들은 웹 페이지의 구조와 콘텐츠를 정의하는 데 사용됩니다. 주요 태그들은 다음과 같습니다.1. 문서 구조 태그: 문서 형식을 선언하는 태그로, HTML5 문서를 표시하는 데 사용됩니다.: 전체 HTML 문서를 감싸는 루트 태그입니다.: 메타데이터(문서 제목, 문자 인코딩, 외부 파일 연결 등)를 포함하는 부분입니다.: 웹 페이지의 제목을 정의하며, 브라우저 탭에 표시됩니다.: 실제 웹 페이지에 표시되는 콘텐츠를 포함하는 태그입니다.2. 텍스트 관련 태그 ~ : 제목을 정의하는 태그로, 은 가장 중요한 제목, 은 가장 덜 중요한 제목을 나타냅니다.: 단락을 정의하는 태그입니다.: 하이퍼링크를 정의하는 태그로, href 속성을 사용하여 다른 페이지나 URL로 연결합니다.: 인라인 요소.. 공감수 0 댓글수 0 2024. 8. 13.
HTML VS Code에서 HTML을 작성하는 방법은 매우 간단하며, 몇 가지 기본적인 설정과 확장 프로그램을 통해 효율적으로 작업할 수 있습니다. 아래에 VS Code로 HTML을 작성하는 방법과 간단한 코드 예제를 소개하겠습니다.1. VS Code 설치 및 설정VS Code 설치: Visual Studio Code 공식 웹사이트에서 VS Code를 다운로드하여 설치합니다.HTML 확장 프로그램 설치: HTML 작업을 더 효율적으로 하기 위해 HTML Snippets, Auto Close Tag, Live Server 같은 확장 프로그램을 설치할 수 있습니다. 이 확장 프로그램들은 코드 자동 완성, 자동 태그 닫기, 실시간 미리보기 기능 등을 제공합니다.2. HTML 파일 생성 및 작성프로젝트 폴더 열기: VS.. 공감수 0 댓글수 0 2024. 8. 13.
vs code 설치 및 사용 Visual Studio Code(VS코드)는 Microsoft에서 개발한 소스 코드 편집기로, 다양한 프로그래밍 언어를 지원하며, 개발자들이 코드 작성, 디버깅, 버전 관리 등을 효율적으로 수행할 수 있도록 도와줍니다. 다음은 VS코드에 대한 상세한 설명입니다.1. 주요 특징경량 및 속도: VS코드는 가벼운 편집기이면서도 강력한 기능을 제공하여 빠르게 시작할 수 있습니다.크로스 플랫폼: Windows, macOS, Linux에서 모두 사용할 수 있습니다.확장성: 수천 개의 확장 프로그램을 통해 기능을 확장할 수 있으며, 다양한 언어 및 도구에 대한 지원을 추가할 수 있습니다.통합 터미널: 편집기 내에서 바로 명령어를 실행할 수 있는 터미널이 통합되어 있어 개발 환경을 더욱 편리하게 관리할 수 있습니다... 공감수 0 댓글수 0 2024. 8. 13.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.