본문 바로가기

Javascript 프로젝트/GitHub 웹 페이지7

[GitHub 웹페이지] Blog 페이지 Markdown 파일에서 제목, 날짜, 내용의 일부만 읽어와서 표시하도록 JavaScript 코드를 업데이트하겠습니다. 이를 위해 각 Markdown 파일에서 첫 번째 제목(#), 날짜(*yyyy-mm-dd*), 그리고 내용의 첫 번째 단락만 가져오도록 하겠습니다.디렉터리 구조/blog index.html blog.css blog.js/assets/markdown/posts post1.md post2.md ...HTML (index.html) Home Profile Blog .. 2024. 6. 10.

[GitHub 웹페이지] Profile 페이지 아래는 Profile 페이지의 코드를 상세히 설명한 내용입니다. HTML, CSS, JavaScript로 구성된 Profile 페이지는 다양한 섹션을 포함하고 있으며, 각 섹션은 Markdown 파일에서 데이터를 동적으로 가져와 렌더링합니다.### 디렉터리 구조```/profile index.html profile.css profile.js markdown profile.md```### HTML (`index.html`)Profile 페이지의 HTML 구조입니다. 공통된 header와 footer를 사용하고, main 태그 내부에 Markdown 데이터를 렌더링할 수 있는 container를 포함합니다.```html .. 2024. 6. 10.

[GitHub 웹페이지] 6. 프로필 페이지 - 와이어프레임 프로필 페이지의 와이어 프레임을 설명해드리겠습니다. 프로필 페이지는 사용자의 정보를 상세히 보여주는 페이지로 구성할 수 있습니다.프로필 페이지 와이어 프레임-----------------------------------------| Header |-----------------------------------------| Navigation || Home | Profile | Blog | Contact |-----------------------------------------| Profile Section || [Profile Image] .. 2024. 6. 9.

[GitHub 웹페이지] 5. 블로그 페이지 - 와이어프레임 블로그 페이지의 와이어 프레임을 설명해드리겠습니다. 블로그 페이지는 여러 블로그 포스트를 표시하고, 각 포스트를 클릭하면 해당 포스트의 상세 내용을 볼 수 있도록 설계할 수 있습니다.블로그 페이지 와이어 프레임-----------------------------------------| Header |-----------------------------------------| Navigation || Home | Profile | Blog | Contact |-----------------------------------------| Blog Section .. 2024. 6. 9.

[GitHub 웹페이지] 4. 홈페이지 - 와이어프레임 홈 페이지 와이어 프레임을 설명해드리겠습니다. 와이어 프레임은 페이지의 기본 구조와 주요 요소를 시각적으로 표현하는 데 사용됩니다. 아래는 HTML로 구현할 수 있는 기본 홈 페이지 와이어 프레임입니다.-----------------------------------------| Header |-----------------------------------------| Navigation || Home | Profile | Blog | Contact |-----------------------------------------| Hero Section .. 2024. 6. 9.

[GitHub 웹페이지] 2. 규칙 정하기 - Git Commit Message Git Commit Message 규칙Git Commit Message 형식타입: 제목본문꼬리말타입feat: 새로운 기능 추가fix: 버그 수정docs: 문서 수정style: 코드 포맷팅, 세미콜론 누락 등 코드 변경이 없는 경우refactor: 코드 리팩토링test: 테스트 추가 또는 수정chore: 빌드 업무 수정, 패키지 매니저 설정 등perf: 성능 향상 관련 변경ci: CI 설정 파일 및 스크립트 변경build: 빌드 시스템 또는 외부 종속성에 영향을 미치는 변경 사항제목길이: 50자 이내스타일: 동사(현재 시제)로 시작하고 첫 글자는 대문자 사용마침표: 제목 끝에 마침표 사용하지 않음예시: feat: Add user authentication본문길이: 각 행은 72자 이내로 작성내용: 무엇을,.. 2024. 6. 9.

[GitHub 웹페이지] 1. 규칙 정하기 - 코딩컨벤션, 네이밍컨벤션, 코딩 컨벤션HTML들여쓰기: 2 스페이스태그 속성 순서: class, id, name, data-, src, for, type, href, title, alt, aria-자체 닫힘 태그: , , 등CSS들여쓰기: 2 스페이스클래스 네이밍: BEM(Block Element Modifier) 방법론 사용Block: .headerElement: .header__titleModifier: .header__title--large중괄호 위치: 여는 중괄호는 같은 줄에 위치.class { property: value;}정렬: 속성은 알파벳 순으로 정렬JavaScript들여쓰기: 2 스페이스세미콜론: 문장 끝에 항상 세미콜론 사용변수 선언: const와 let 사용 (ES6+)함수 선언:함수 표현식:const fu.. 2024. 6. 9.

이전 1 다음

티스토리툴바