본문 바로가기
반응형

분류 전체보기130

[Javascript] Javascript 예제(심화) JavaScript의 고급 기능을 사용하여 할 일 목록(To-Do List) 애플리케이션을 구현해 보겠습니다. 이 예제에서는 할 일 추가, 삭제, 편집, 필터 기능을 포함하며, LocalStorage를 사용하여 데이터를 저장합니다.프로젝트: 고급 To-Do List 애플리케이션HTML 코드 Advanced To-Do List Add All Completed Uncompleted Clear All CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: fl.. 2024. 6. 8.
[Javascript] Javascript 심화 1단계: ES6+ 기능1.1 let과 constlet과 const는 블록 스코프를 가지는 변수 선언 키워드입니다.let: 재할당이 가능한 변수 선언.const: 재할당이 불가능한 상수 선언.예시:let message = 'Hello, JavaScript!';message = 'Hello, ES6!';console.log(message); // 'Hello, ES6!'const pi = 3.14;console.log(pi); // 3.14// pi = 3.14159; // 오류 발생: 상수 재할당 불가1.2 화살표 함수화살표 함수는 더 간결한 함수 표현식을 제공합니다.예시:// 전통적인 함수 선언function add(a, b) { return a + b;}// 화살표 함수const add = (a,.. 2024. 6. 8.
[Javascript] Javascript 실습 JavaScript를 사용하여 할 일 목록(To-Do List) 애플리케이션을 만들어 보겠습니다. 여기서는 항목을 추가하고 삭제할 수 있는 기능을 구현하겠습니다.HTML 코드 To-Do List Add CSS 코드/* styles.css */body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f0f0;}.todo-container { background-color: #fff; .. 2024. 6. 8.
[Javascript] Javascript 기본 1단계: JavaScript 기초 이해하기1.1 JavaScript 소개JavaScript는 웹 페이지에 동적 기능을 추가하는 데 사용되는 프로그래밍 언어입니다.JavaScript는 HTML과 CSS와 함께 웹 개발의 핵심 요소입니다.1.2 JavaScript 포함 방법인라인 스크립트: HTML 요소에 직접 JavaScript 코드를 작성합니다.내부 스크립트: 2단계: 기본 문법과 자료형2.1 변수와 상수변수 선언: var, let, const상수 선언: const예시:let message = 'Hello, JavaScript!';const pi = 3.14;2.2 자료형기본 자료형: 문자열(String), 숫자(Number), 불리언(Boolean), null, undefined참조 자료형: 객.. 2024. 6. 8.
[CSS] CSS 규칙 CSS 코딩 컨벤션과 네이밍 컨벤션, 그리고 규칙을 따르면 코드의 가독성과 유지보수성을 높일 수 있습니다. 아래는 CSS 작성 시 지켜야 할 주요 컨벤션과 규칙들입니다.CSS 코딩 컨벤션1. 파일 구조와 인클루드파일 분리: 스타일은 별도의 CSS 파일로 분리하여 HTML 파일에 링크합니다.주석: 코드의 목적과 구조를 설명하는 주석을 사용합니다./* styles.css *//* 기본 스타일 */body { font-family: Arial, sans-serif;}/* 네비게이션 스타일 */.navbar { background-color: #333; color: white;}/* 메인 콘텐츠 스타일 */.main-content { padding: 20px;}2. 들여쓰기와 공백들여쓰기:.. 2024. 6. 8.
[CSS] CSS 예제(심화) 이번에는 고급 CSS 개념을 적용한 연습 예제를 만들어 보겠습니다. 이 예제에서는 CSS Grid와 Flexbox를 사용하여 반응형 레이아웃을 구성해보겠습니다. 또한, CSS 변수와 간단한 애니메이션을 추가하여 더욱 흥미로운 프로젝트를 만들어 보겠습니다.프로젝트: 반응형 포트폴리오 카드 레이아웃파일 구조index.html: HTML 파일styles.css: CSS 파일이미지 파일을 프로젝트 디렉터리에 저장하세요. (예: profile1.jpg, profile2.jpg, profile3.jpg)HTML 코드먼저 HTML 코드를 작성합니다. My Portfolio John Doe Web Develop.. 2024. 6. 8.
[CSS] CSS 심화2 CSS 학습의 다음 단계는 CSS의 고급 기능과 기법을 배우고, 이를 통해 더욱 복잡하고 세련된 웹 디자인을 구현하는 것입니다. 아래에는 CSS를 더 깊이 이해하고 활용할 수 있는 고급 주제와 학습 계획을 소개합니다.1. CSS 전처리기 (Preprocessor)CSS 전처리기를 사용하면 CSS를 더 효율적으로 작성하고 관리할 수 있습니다. 대표적인 전처리기로는 Sass와 LESS가 있습니다.1.1 Sass (Syntactically Awesome Stylesheets)Sass는 CSS를 더 강력하게 만드는 전처리기입니다. 변수, 중첩(Nesting), 믹스인(Mixin) 등을 사용하여 코드 재사용성을 높일 수 있습니다.변수와 중첩 예제// 변수 사용$primary-color: #4CAF50;$secon.. 2024. 6. 8.
[CSS] CSS 심화1 네, 다음 단계로 CSS를 학습할 때 다룰 수 있는 여러 주제가 있습니다. 각각의 단계에서 조금 더 복잡한 개념을 소개하고 이를 통해 여러분의 웹 디자인 기술을 더욱 향상시킬 수 있습니다.1. CSS 레이아웃CSS 레이아웃은 웹 페이지의 구조와 배치를 결정하는 중요한 기술입니다. 이 단계에서는 다양한 레이아웃 기법을 배워보겠습니다.1.1 FlexboxFlexbox는 요소를 한 줄 또는 여러 줄에 걸쳐서 배치할 수 있게 해주는 강력한 레이아웃 도구입니다.Flexbox 기본 예제 1 2 3 /* styles.css */body { display: flex; justify-content: center; align-items: center; .. 2024. 6. 8.
[CSS] CSS 예제 그럼, 간단한 HTML과 CSS를 사용하여 연습할 수 있는 예제를 만들어 보겠습니다. 이번 예제에서는 간단한 개인 프로필 카드 레이아웃을 만들어 보겠습니다.HTML 코드먼저 HTML 코드를 작성합니다. John Doe Web Developer Hello! I'm John, a web developer with a passion for creating amazing web experiences. I specialize in front-end development. Twitter LinkedIn CSS 코드이제 HTML 요소에 스타일을 적용할.. 2024. 6. 8.
[CSS] CSS 기본 CSS (Cascading Style Sheets)는 HTML 문서의 스타일을 정의하고 웹 페이지의 시각적 표현을 제어하는 데 사용됩니다. CSS를 단계별로 학습하면 점진적으로 개념을 이해하고 실습할 수 있습니다.1단계: CSS 기본 이해하기1. CSS 개념CSS: 웹 페이지의 스타일을 정의하는 언어입니다.선택자: 스타일을 적용할 HTML 요소를 선택합니다.속성(Property)과 값(Value): 스타일 속성과 그에 대한 값을 정의합니다.2. CSS 기본 구조CSS 코드의 기본 구조는 다음과 같습니다:선택자 { 속성: 값;}3. CSS 작성 방법인라인(In-line) 스타일: HTML 요소에 직접 스타일을 정의합니다.내부(Internal) 스타일 시트: HTML 문서의 This is a b.. 2024. 6. 8.
반응형

티스토리툴바