반응형 웹개발10 [To Do List] 4단계: 확장 가능한 프로젝트 구조 4. 확장 가능한 프로젝트 구조프로젝트 구조를 확장 가능하게 설계하면 나중에 기능을 추가하거나 유지보수하기가 쉬워집니다. 다음은 Simple To-Do List 프로젝트의 확장 가능한 디렉토리 및 파일 구조 예시입니다:simple-to-do-list/│├── index.html├── css/│ └── style.css├── js/│ ├── app.js│ ├── storage.js│ └── ui.js└── assets/ └── images/ └── logo.png디렉토리 및 파일 설명index.html: 프로젝트의 메인 HTML 파일입니다. 전체 구조를 정의하고, 필요한 CSS와 JavaScript 파일을 포함합니다.css/style.css: 모든 스타일 관련 정의가 들어있.. 2024. 6. 16. [To Do List] 3단계: 규칙 설정 3. 규칙 설정: 코딩컨벤션, Git 커밋 메시지 양식코딩 컨벤션파일 및 디렉토리 구조파일명은 소문자와 하이픈(-)을 사용합니다. 예: index.html, style.css, script.js디렉토리명은 소문자와 하이픈(-)을 사용합니다.HTML들여쓰기는 2칸을 사용합니다.속성명은 소문자를 사용하며, 값은 큰따옴표("")로 감쌉니다.자주 사용되는 HTML 구조를 주석으로 표시합니다.CSS들여쓰기는 2칸을 사용합니다.클래스명은 소문자와 하이픈(-)을 사용합니다. 예: .todo-item, .completedCSS 속성은 알파벳 순으로 정렬합니다.JavaScript들여쓰기는 2칸을 사용합니다.변수명은 카멜케이스(camelCase)를 사용합니다. 예: todoItem, completedTasks함수명은 동사.. 2024. 6. 16. [To Do List] 2단계: README.md 작성 To Do List프로젝트 설명To Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 사용할 것입니다. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다.주요 기능할 일 추가: 사용.. 2024. 6. 16. [To Do List] 1단계: 프로젝트명과 설명 1. 프로젝트명과 설명프로젝트명To Do List설명To-Do List는 사용자가 해야 할 일들을 추가, 수정, 삭제할 수 있는 간단한 웹 애플리케이션입니다. 이 프로젝트는 JavaScript의 DOM 조작과 로컬 스토리지를 활용한 데이터 저장 방법을 이용할 것입니다.. 또한, HTML과 CSS를 사용하여 사용자 친화적인 인터페이스를 제공하며, JavaScript를 통해 사용자 인터랙션을 처리합니다.이 애플리케이션의 주요 기능은 다음과 같습니다:사용자가 새로운 할 일을 입력하고 목록에 추가할 수 있습니다.추가된 할 일을 클릭하여 완료 상태로 표시할 수 있습니다.할 일을 수정하거나 삭제할 수 있습니다.로컬 스토리지를 사용하여 할 일 목록을 브라우저에 저장하고, 페이지를 새로고침해도 데이터가 유지됩니다. 2024. 6. 16. [포트폴리오 페이지] 다음 과정 1. 반응형 디자인 구현모든 화면 크기에서 잘 작동하는 웹사이트를 만들기 위해 반응형 디자인을 구현하세요. 미디어 쿼리를 사용하여 다양한 화면 크기에서 웹사이트가 어떻게 보이는지 조정합니다.예시:styles.css (추가된 미디어 쿼리)@media (max-width: 768px) { nav ul li { display: block; margin: 1em 0; } #project-list { flex-direction: column; } .project { flex: 1 1 100%; }}2. 프로젝트 상세 페이지 추가각 프로젝트에 대한 상세 페이지를 추가하여 프로젝트의 구체적인 내용과 이미지를 포함할 수 있습니다.예시:새.. 2024. 6. 16. [포트폴리오 페이지] 5단계: 스타일링 및 레이아웃 개선 5단계: 스타일링 및 레이아웃 개선5.1 전체적인 레이아웃과 스타일링 개선styles.css 파일에서 전체적인 스타일링을 개선합니다.styles.css (수정된 부분)body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f0f0f0; /* 배경색을 설정합니다. */}header { background-color: #333; color: #fff; padding: 1em 0; text-align: center; position: sticky; /* 스크롤 시에도 상단에 고정됩니다. */ top: 0; z-index: 1000; /* 다른 요소보다 위에 표시됩.. 2024. 6. 16. [포트폴리오 페이지] 4단계: Contact 섹션 추가 4단계: Contact 섹션 추가4.1 Contact 섹션 HTML 작성index.html 파일에서 Contact 섹션에 내용을 추가합니다.index.html (수정된 부분) Contact Send 4.2 Contact 섹션 스타일링styles.css 파일에서 Contact 섹션에 스타일을 추가합니다.styles.css (추가된 부분)#contact { background-color: #f9f9f9; /* 배경색을 설정합니다. */ padding: 2em; /* 패딩을 설정합니다. */ margin-top: 2em; /* 상단 여백을 설정합니다. */ border-radius: 8px; /* 모서리를 둥글게 만.. 2024. 6. 16. [포트폴리오 페이지] 1단계: 프로젝트 초기 설정 1단계: 프로젝트 초기 설정1.1 프로젝트 디렉토리 생성로컬 환경에서 프로젝트 디렉토리를 생성합니다.mkdir MyPortfoliocd MyPortfolio1.2 Git 초기화생성된 프로젝트 디렉토리에서 Git 저장소를 초기화합니다.git init1.3 기본 파일 생성프로젝트의 기본 파일을 생성합니다.touch index.html styles.css scripts.js README.md LICENSE1.4 README.md 작성README.md 파일을 작성하여 프로젝트 설명을 추가합니다. 다음 내용을 추가합니다. # MyPortfolioMyPortfolio는 HTML, CSS, JavaScript를 사용하여 만든 개인 포트폴리오 웹사이트입니다. 이 웹사이트는 나의 경력, 프로젝트, 연락처 정보를 포함하고.. 2024. 6. 16. [개발 규칙] CSS 규칙 CSS 코딩 컨벤션CSS 코딩 컨벤션은 CSS 코드를 일관성 있게 작성하여 가독성을 높이고, 유지보수를 용이하게 하며, 팀 협업을 원활하게 합니다. 아래는 CSS 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따릅니다./* 좋은 예: 2칸 들여쓰기 */.selector {property: value;}/\* 좋은 예: 4칸 들여쓰기 \*/ .selector { property: value; }2. 중괄호 위치(Braces)중괄호: 여는 중괄호는 동일한 행에 시작하고 닫는 중괄호는 새 줄에 위치합니다. /* 좋은 예 */ .selector { property: value; } /* 나쁜 예 */ .. 2024. 6. 8. [개발 규칙] HTML 규칙 HTML 코딩 컨벤션HTML 코딩 컨벤션은 HTML 코드를 일관되게 작성하여 가독성을 높이고, 유지보수를 쉽게 하며, 협업을 원활하게 합니다. 아래는 HTML 코딩 컨벤션에 대한 자세한 설명입니다.1. 들여쓰기(Indentation)일관된 들여쓰기: 공백 2칸 또는 4칸을 사용합니다. 팀의 규칙에 따르세요.Text Text```2. 태그와 속성의 소문자 사용소문자 사용: 태그와 속성 이름은 소문자로 작성합니다.```3. 속성 값에 따옴표 사용속성 값 따옴표: 속성 값은 항상 따옴표로 감쌉니다.```4. 자체 닫는 태그(Self-closing Tags)자체 닫는 태그: XHTML처럼 자체 닫는 태그는 /를 사용하지 않습니다.```5. 의미론적 태그 사용(Semantic HTML)의미론적 태그: 가능한.. 2024. 6. 8. 이전 1 다음 반응형