본문 바로가기

Development

 (24)
[JS] JavaScript 배열 추가/삭제 메서드 정리 자바스크립트에서 배열은 push, unshift, pop, shift, splice 같은 메서드를 사용해 손쉽게 원소를 추가하거나 삭제할 수 있습니다.아래에서 특징와 예제를 사용해보겠습니다✅ 배열에 원소 추가하기1️⃣ push()- 배열 **끝** 에 새로운 원소를 추가let fruits = ["apple", "banana"];fruits.push("orange");console.log(fruits); // ["apple", "banana", "orange"]2️⃣ unshfit()- 배열 **앞쪽(맨 처음)** 에 새로운 원소를 추가let fruits = ["apple", "banana"];fruits.unshift("grape");console.log(fruits); // ["grape", "appl..
[JS] 오늘 날짜를 'YYYY-MM-DD' 형식으로 출력하는 자바스크립트 한 줄 코드 프론트엔드 개발을 하다 보면, 오늘 날짜를 '2025-07-30'처럼 포맷팅해서 써야 할 때가 자주 있습니다!특히 날짜 데이터를 서버에 보낼 때 유용합니다자바스크립트에서는 아래 한 줄로 간단하게 해결할 수 있습니다.new Date().toISOString().split('T')[0]🔍 코드 설명new Date()현재 날짜와 시간(Date 객체)을 생성합니다.toISOString()날짜를 "YYYY-MM-DDTHH:mm:ss.sssZ" 형식의 문자열로 바꿔줍니다.split('T')"T"를 기준으로 날짜와 시간을 나눕니다 → ["2025-07-30", "12:34:56.789Z"][0]배열에서 날짜만 꺼냅니다 → "2025-07-30" 결과적으로, 이 코드는 오늘 날짜를 'YYYY-MM-DD' 형식의 문자..
[CSS]웹 폰트 파일 형식 정리 - WOFF, WOFF2부터 TTF까지 웹 개발을 하다 보면 다양한 폰트 파일 형식을 알게 됩니다.특히 웹 폰트를 사용할 때 .woff, .woff2, .ttf 같은 확장자들이 헷갈리는 것 같아서 정리를 해보았습니다.📝 웹 폰트 파일 형식의 종류1. WOFF (Web Open Font Format)확장자: .woff출시 연도: 2009년압축률: 약 40% 압축지원 브라우저: IE 9+, Chrome 5+, Firefox 3.6+, Safari 5.1+WOFF는 웹 전용으로 개발된 폰트 형식입니다.기존 OpenType이나 TrueType 폰트를 압축하여 웹에서 빠르게 로딩할 수 있도록 만든 것이 특징입니다. 장점:파일 크기가 작아 로딩 속도가 빠름웹 전용으로 설계되어 보안성이 좋음대부분의 브라우저에서 지원단점:WOFF2에 비해 압축률이 낮음모..
[JS] undefined와 null의 차이점 JavaScript를 배우면서 가장 헷갈리는 개념 중 하나가 바로 undefined와 null입니다.둘 다 "없음"을 나타내지만, 사실 명확한 차이점이 있습니다.📝 undefined란?undefined는 변수가 선언되었지만 아직 값이 할당되지 않은 상태를 의미합니다.let name;console.log(name); // undefinedlet person = { age: 25};console.log(person.name); // undefined (존재하지 않는 속성)function greet() { // return 문이 없음}console.log(greet()); // undefined undefined가 발생하는 경우들변수 선언 후 값 할당 전객체의 존재하지 않는 속성에 접근함수에서 retur..
[JS] this 키워드 JavaScript의 this는 함수가 호출되는 방식에 따라 다른 값을 가지는 키워드입니다.함수의 블록스코프 내에서 선언되어야 정상적으로 동작하며, 호출 컨텍스트에 따라 참조하는 객체가 달라집니다.📝 일반 함수의 this = window일반 함수에서 this는 전역 객체(브라우저에서는 window)를 가리킵니다.이는 함수가 전역 스코프에서 호출되거나 객체의 메서드가 아닌 독립적인 함수로 호출될 때 발생합니다.function regularFunction() { console.log(this); // window 객체 console.log(this === window); // true}regularFunction();// 객체 메서드도 변수에 할당 후 호출하면 일반 함수가 됨const obj = { ..
[JS]JS는 왜 필요한가? HTML/CSS만으로 안 되는 것들 🌟 JS는 왜 필요한가?─ HTML/CSS만으로는 할 수 없는 것들웹 퍼블리셔로 시작하면 처음에는 HTML과 CSS만으로도 꽤 많은 걸 만들 수 있습니다레이아웃도 짜고, 버튼도 만들고, 반응형 디자인도 할 수 있죠하지만… 어느 순간, 한계가 찾아옵니다예를 들어 이런 질문이 생기기 시작하죠“버튼을 눌렀을 때 팝업을 띄우고 싶은데… CSS로만 되나?”“스크롤 내리면 요소가 부드럽게 등장하면 좋겠는데… 어떻게 하지?”“사용자가 입력한 값을 실시간으로 확인하려면?”이럴 때 등장하는 게 바로 JavaScript입니다📌 HTML/CSS와 JS의 역할 구분구분역할예시HTML구조제목, 이미지, 버튼, 입력창 등CSS스타일색상, 폰트, 여백, 애니메이션 등JS동작 & 상호작용버튼 클릭 시 동작, 팝업, 자동 슬라이드..
퍼블리셔가 꼭 알아야 할 HTML 기본 태그 10개 웹 퍼블리싱을 시작할 때 반드시 알고 있어야 할 HTML 기본 태그들을 소개해 보겠습니다이 태그들은 웹 페이지의 구조를 만드는 데 핵심적인 요소들이며, 실무에서도 자주 사용됩니다1️⃣ 웹 문서의 시작과 끝을 감싸는 최상위 태그모든 HTML 요소는 이 태그 안에 위치해야 합니다 2️⃣ 화면에 표시되는 내용3️⃣ ~ 제목 태그입니다. 이 가장 크고 중요한 제목이며, 까지 작아질수록 중요도가 낮아집니다가장 큰 제목부제목 4️⃣ 단락(paragraph)을 나타내는 태그이며, 텍스트를 문단 단위로 구분할 때 사용이것은 문단입니다. 5️⃣ 하이퍼링크를 만들 때 사용하는 태그입니다사이트로 이동6️⃣ 이미지를 삽입할 때 사용하며, src는 이미지 경로, alt는 대체 텍스트입니다7️⃣ / / : 순서 없는..
브라우저별 CSS 차이 & 대응법 크로스 브라우징이란? 벤더 프리픽스란? 쉽게 알아보기!웹 퍼블리싱을 하다 보면 같은 CSS 코드를 썼는데도 크롬에서는 잘 보이는데, 사파리에서는 깨진다? 이런 경험, 한 번쯤 들어보셨을 거예요이런 문제를 해결하려면 크로스 브라우징과 벤더 프리픽스 개념을 알아야 해요!오늘은 웹 초보자도 쉽게 이해할 수 있도록 브라우저별 CSS 차이와 그 대응법에 대해 정리해볼게요 😊크로스 브라우징이란?**크로스 브라우징(Cross Browsing)**은 말 그대로"여러 브라우저에서 내 웹페이지가 똑같이 보이도록 만드는 것"입니다.왜 필요할까요?브라우저(Chrome, Safari, Firefox, Edge 등)마다 CSS를 해석하는 방식이 미묘하게 달라서어떤 브라우저에서는 잘 나오는데, 어떤 브라우저에서는 레이아웃이 깨지..

티스토리툴바