본문 바로가기
반응형

분류 전체보기289

[웹 디자인] 15일차: 반응형 디자인 소개 반응형 디자인이란?반응형 디자인(Responsive Design)은 다양한 기기와 화면 크기에 맞게 웹 페이지의 레이아웃을 조정하는 웹 디자인 접근 방식입니다. 반응형 디자인을 사용하면 데스크탑, 태블릿, 모바일 기기 등 모든 기기에서 최적의 사용자 경험을 제공할 수 있습니다.반응형 디자인의 중요성사용자 경험 향상: 다양한 기기에서 일관된 사용자 경험을 제공합니다.SEO 개선: 검색 엔진에서 모바일 친화적인 사이트로 인식되어 순위가 올라갈 수 있습니다.유지 보수 용이: 하나의 코드베이스로 여러 기기를 지원하므로 유지 보수가 쉽습니다.반응형 디자인의 핵심 요소뷰포트 설정뷰포트는 사용자가 웹 페이지를 볼 때의 가상 창입니다. 뷰포트를 설정하여 다양한 기기에서 웹 페이지가 올바르게 표시되도록 할 수 있습니다... 2024. 8. 15.
[JavaScript 문법] 14일차: 모듈 모듈이란?모듈은 코드의 일부를 독립적으로 분리하여 재사용 가능하게 만드는 방법입니다. 모듈을 사용하면 코드의 유지보수와 관리가 용이해집니다. ES6에서는 import와 export 키워드를 사용하여 모듈을 정의하고 사용할 수 있습니다.모듈 정의모듈은 파일 단위로 정의되며, export 키워드를 사용하여 모듈 외부로 내보낼 수 있습니다.기본 내보내기 (default export)기본 내보내기는 모듈 당 하나만 가질 수 있으며, export default 키워드를 사용합니다.예제: math.js// math.jsexport default function add(a, b) { return a + b;}예제: main.js// main.jsimport add from './math.js';console.log.. 2024. 8. 14.
[웹 디자인] 14일차: 그리드 레이아웃(Grid Layout) 그리드 레이아웃(Grid Layout)이란?CSS 그리드 레이아웃은 2차원 레이아웃 시스템으로, 행과 열을 사용하여 웹 페이지의 요소들을 배치합니다. 그리드 레이아웃은 복잡한 레이아웃을 더 쉽게 구현할 수 있게 해주며, 유연하고 강력한 레이아웃 제어 기능을 제공합니다.그리드 컨테이너 설정display: grid: 요소를 그리드 컨테이너로 설정합니다.display: inline-grid: 인라인 그리드 컨테이너로 설정합니다.예제:.container { display: grid;} 아이템 1 아이템 2 아이템 3그리드 컨테이너 속성grid-template-columns와 grid-template-rows그리드의 열과 행의 크기를 설정합니다.예제:.container { display: grid; g.. 2024. 8. 14.
[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.
반응형

티스토리툴바