Code Monkey home page Code Monkey logo

guten-tag's Introduction

구텐Tag - HTML Markup Generator

image

구텐Tag은 GUI 방식의 마크업 작성 서비스입니다.

1. 목표와 기능

1.1 목표

  • 대상 : HTML 입문자 및 시멘틱(sementic)한 구조의 마크업 작성을 고려하는 사람들
  • 목적 : HTML 교육용 및 마크업 작성 기획용
  • 특징 : 마크업의 시각화
  • 주요 키워드 : 직관적, 편리성

1.2 기능

  • 기본적인 HTML 문서 구조를 시각적으로 그려나가며 파악할 수 있습니다.
  • block 요소와 inline 요소로 구성된 태그들의 속성을 자연스럽게 인지하고 습득할 수 있습니다.
  • 웹 접근성과 SEO를 위한 시멘틱 요소를 사용해 봄으로써 문서 가독성의 증가를 체감할 수 있습니다.
  • 시각적으로 그린 결과물을 HTML 코드로 간편하게 추출할 수 있습니다.

2. 배포

2.1 배포 일정

  • 2022년 1월 13일

2.2 배포 URL

3. 팀 소개 및 역할 분담

3.1 팀 소개

  • 팀명 : 자-멘
  • 팀장 : 임준홍
  • 팀원 : 김민찬, 윤수영, 이종원
  • 멋쟁이 사자처럼 프론트엔드 스쿨 1기 멋사토피아 스터디

3.2 역할 분담

  • 기획 : 임준홍, 김민찬
  • JavaScript : 임준홍(보드 메인기능), 이종원, 김민찬, 윤수영
  • HTML/CSS : 김민찬(보드), 윤수영(인덱스, 보드), 이종원(보드)
  • 디자인 : 임준홍, 윤수영

4. 프로젝트 구조와 개발 일정

4.1 프로젝트 구조

** Guten-Tag **
│  index.html
│  board.html
│
├─.github
│  └─ISSUE_TEMPLATE
│          ---bug-report.md
│          --feature-request.md
│
├─css
│      boardStyle.css
│      font.css
│      indexStyle.css
│      reset.css
│
└─js
       aside.js
       attrBtn.js
       attrCustom.js
       board.js
       cursor.js
       data.js
       grid.js
       menuOpen.js
       modal.js
       renderTags.js
       searchFilter.js
       tag.js
       util.js

4.2 개발 일정

  • 메인 프로젝트 기간 : 2021.12.17 - 2022.01.02

5. 기능

  • GUI 방식으로 마크업을 시각적으로 화면에 표시

img

  • 화면에 그려진대로 HTML 추출

image

guten-tag's People

Contributors

ddooyn avatar dwhddnjs avatar tesseractjh avatar whara123 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.