본문 바로가기
반응형

분류 전체보기276

[JavaScript 문법] 13일차: 맵과 셋 Map 객체Map 객체는 키-값 쌍을 저장하며, 키의 타입에 제한이 없습니다. 객체와 달리 Map은 삽입 순서를 기억합니다.Map 생성Map 객체는 new Map()을 사용하여 생성할 수 있습니다.let map = new Map();요소 추가set 메서드를 사용하여 요소를 추가할 수 있습니다.map.set('name', 'Alice');map.set('age', 25);console.log(map); // Map { 'name' => 'Alice', 'age' => 25 }요소 접근get 메서드를 사용하여 요소에 접근할 수 있습니다.console.log(map.get('name')); // 'Alice'console.log(map.get('age')); // 25요소 삭제delete 메서드를 사용하여 요.. 2024. 8. 13.
[웹 디자인] 13일차: 플렉스박스(Flexbox) 플렉스박스(Flexbox)란?플렉스박스(Flexbox)는 1차원 레이아웃 모델로, 복잡한 레이아웃을 쉽게 만들 수 있도록 도와줍니다. Flexbox를 사용하면 컨테이너 내부의 아이템들을 수평 또는 수직 방향으로 배치하고 정렬할 수 있습니다. 플렉스 컨테이너와 플렉스 아이템이라는 두 가지 주요 개념으로 구성됩니다.플렉스 컨테이너 설정display: flex: 요소를 플렉스 컨테이너로 설정합니다.display: inline-flex: 인라인 플렉스 컨테이너로 설정합니다.예제:.container { display: flex;} 아이템 1 아이템 2 아이템 3플렉스 컨테이너 속성flex-direction플렉스 아이템의 주축 방향을 설정합니다.row: 가로 방향 (기본값)row-reverse: 가로 방향 .. 2024. 8. 13.
[JavaScript 문법] 12일차: ES6 클래스 클래스란?클래스는 객체 지향 프로그래밍의 기본 단위로, 객체를 생성하기 위한 템플릿입니다. ES6에서는 객체 지향 프로그래밍을 더 쉽게 구현할 수 있도록 class 문법이 도입되었습니다.클래스 선언클래스는 class 키워드를 사용하여 선언할 수 있습니다. 기본 문법class 클래스이름 { constructor(매개변수1, 매개변수2, ...) { // 초기화 코드 } 메서드이름() { // 메서드 코드 }}예제class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log('Hello, my name is ' + this.name); }}let perso.. 2024. 8. 12.
[웹 디자인] 12일차: CSS 레이아웃 기초 CSS 레이아웃이란?CSS 레이아웃은 웹 페이지의 요소들을 배치하고 정렬하는 방법을 정의합니다. 효과적인 레이아웃은 웹 페이지의 가독성과 사용자 경험을 향상시킵니다. CSS에는 다양한 레이아웃 기법이 있으며, 이를 통해 복잡한 웹 페이지 레이아웃을 구현할 수 있습니다.CSS 레이아웃 기법Display 속성display: 요소의 표시 방식을 지정합니다.block: 블록 레벨 요소로, 항상 새로운 줄에서 시작하며 전체 너비를 차지합니다.inline: 인라인 레벨 요소로, 새로운 줄에서 시작하지 않으며 콘텐츠의 너비만큼 차지합니다.inline-block: 인라인 레벨 요소처럼 동작하지만, 블록 레벨 요소처럼 크기를 지정할 수 있습니다.none: 요소를 화면에 표시하지 않습니다.예제:.block-element .. 2024. 8. 12.
[JavaScript 문법] 11일차: 배열 고급 고차 함수란?고차 함수(Higher-Order Function)는 함수를 인수로 받거나 함수를 반환하는 함수입니다. 배열 고차 함수는 배열을 처리하는데 매우 유용합니다.배열 고차 함수forEachforEach 메서드는 배열의 각 요소에 대해 지정된 함수를 한 번씩 실행합니다.let fruits = ['Apple', 'Banana', 'Cherry'];fruits.forEach(function(fruit, index) { console.log(index + ': ' + fruit);});// 출력:// 0: Apple// 1: Banana// 2: Cherrymapmap 메서드는 배열의 각 요소에 대해 지정된 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.let numbers = [1, 2, 3];.. 2024. 8. 11.
[웹 디자인] 11일차: CSS 박스 모델 박스 모델이란?CSS 박스 모델은 HTML 요소의 레이아웃을 설명하는 기본 개념입니다. 모든 HTML 요소는 박스 모델을 따르며, 이 박스 모델은 콘텐츠 영역, 패딩, 테두리, 마진으로 구성됩니다.박스 모델 구성 요소콘텐츠(Content)실제 콘텐츠가 들어가는 영역입니다.width와 height 속성으로 크기를 지정할 수 있습니다.패딩(Padding)콘텐츠와 테두리 사이의 여백입니다.padding 속성으로 크기를 지정할 수 있습니다.각 면별로 padding-top, padding-right, padding-bottom, padding-left 속성을 지정할 수 있습니다.테두리(Border)패딩과 마진 사이의 테두리 영역입니다.border 속성으로 크기와 스타일을 지정할 수 있습니다.각 면별로 border.. 2024. 8. 11.
[JavaScript 문법] 10일차: 배열 기초 배열이란?배열은 여러 값을 하나의 변수에 저장할 수 있는 데이터 구조입니다. 배열의 각 값은 인덱스를 통해 접근할 수 있으며, 인덱스는 0부터 시작합니다. JavaScript의 배열은 크기가 동적으로 조정되며, 다양한 데이터 타입을 혼합하여 저장할 수 있습니다.배열 선언배열을 선언하는 방법에는 배열 리터럴과 Array 생성자를 사용하는 방법이 있습니다.배열 리터럴let fruits = ['Apple', 'Banana', 'Cherry'];Array 생성자let fruits = new Array('Apple', 'Banana', 'Cherry');배열 요소 접근배열 요소는 인덱스를 사용하여 접근할 수 있습니다. 예제let fruits = ['Apple', 'Banana', 'Cherry'];console... 2024. 8. 10.
[웹 디자인] 10일차: CSS 색상 및 배경 색상CSS에서 색상은 웹 디자인의 중요한 요소 중 하나입니다. 색상을 사용하여 텍스트, 배경, 테두리 등을 스타일링할 수 있습니다.색상 표현 방법CSS에서 색상을 표현하는 여러 가지 방법이 있습니다:색상 이름: 미리 정의된 색상 이름을 사용합니다.color: red;16진수 표기법: #RRGGBB 형식을 사용합니다.color: #ff0000;RGB 표기법: rgb(red, green, blue) 형식을 사용합니다.color: rgb(255, 0, 0);RGBA 표기법: rgb(red, green, blue, alpha) 형식을 사용하며, alpha 값은 투명도를 나타냅니다.color: rgba(255, 0, 0, 0.5);HSL 표기법: hsl(hue, saturation, lightness) 형식을 사.. 2024. 8. 10.
[JavaScript 문법] 9일차: 객체의 프로토타입 프로토타입이란?프로토타입은 객체 지향 프로그래밍에서 객체가 다른 객체로부터 속성과 메서드를 상속받을 수 있도록 하는 메커니즘입니다. JavaScript는 프로토타입 기반 언어로, 모든 객체는 프로토타입을 가질 수 있습니다.프로토타입 체인프로토타입 체인은 객체가 다른 객체로부터 상속을 받을 때 형성됩니다. 객체는 자신의 프로토타입에 정의된 속성과 메서드를 사용할 수 있으며, 프로토타입 체인을 따라가면서 상위 객체의 속성과 메서드를 참조할 수 있습니다. 예제function Person(name, age) { this.name = name; this.age = age;}Person.prototype.greet = function() { console.log('Hello, my name is ' + thi.. 2024. 8. 9.
[웹 디자인] 9일차: CSS 텍스트 스타일링 텍스트 스타일링이란?CSS 텍스트 스타일링은 웹 페이지의 텍스트 모양과 레이아웃을 제어하는 데 사용됩니다. 텍스트 스타일링은 글꼴, 크기, 색상, 정렬 등을 포함하여 텍스트를 더 읽기 쉽게 만들고, 시각적으로 일관된 디자인을 제공합니다.글꼴글꼴 스타일링은 텍스트의 모양과 느낌을 정의하는 중요한 요소입니다.글꼴 패밀리font-family: 글꼴 패밀리를 설정합니다. 쉼표로 구분하여 여러 글꼴을 지정할 수 있으며, 지정한 순서대로 사용 가능한 글꼴이 선택됩니다.예제:body { font-family: 'Arial', 'Helvetica', sans-serif;}글꼴 크기font-size: 텍스트의 크기를 설정합니다. 절대 크기(px, pt 등)나 상대 크기(em, rem, %)로 지정할 수 있습니다.예제:.. 2024. 8. 9.
반응형

티스토리툴바