[HTML/CSS] 0-1. 인사 및 개요 소개

마크업 언어의 사전적 정의

• 마크업 언어(markup language)는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다.
• 기술적 마크업(descriptive markupo)은 문서의 일부에 이름을 다는 데 사용된다.
• 주요 마크업 언어에는 HTML이 있다.

 

 

 

마크업 개발의 실질적 의미

가장 근본적인 역할

• 웹 페이지의 뼈대를 구성하는 HTML(HyperText Markup Language)과
• 화면 디자인을 코드로 나타내는 CSS(Cascading Style Sheets)의 개발을 의미
• 실질적인 동작 JS(JavaScript)

 

 

 

마크업 개발의 중요성

디자인과 기술의 오작교

기획 -> 디자인 -> 마크업 -> FE/BE -> QA -> 릴리즈

 

웹 서비스의 규모가 클수록, 디자인 복잡도 상승 = 마크업 복잡도 상승

 

디자인 관리를 위해 생겨난 디자인 시스템을

잘 개발/유지하기 위해서는 결국 마크업의 역할이 가장 중요

 

 

 

FE(Front-End)와의 관계

• FE Developer : React / Next.js, Apollo, GraphQL, styled-components, webpack, JS architecture and perf focused
• Markup Developer : Interaction Design & SVG, CSS / Sass Architecture, WordPress Themes, Light, jQurery, UX and A11Y focused

 

That is a point, neither side is any more valuable then the other.

https://css-tricks.com/the-great-divide/ (2019.01)

 

 

 

기초 이론 공부

• 기초 이론은 '생활코딩' 영상으로 충분합니다.
• 유튜브에서 'HTML CSS 강좌'만 검색해도 영상들이 쏟아집니다.
• 생활코딩 HTML(44강), 생활코딩 CSS(61강)

 

 

 

과정 목표

• 10시간 내외에 핵심 노하우를 전달

 

 

 

목차 소개

개요

핵심 HTML

핵심 CSS

프로젝트 (네이버 주문하기)

• 준비 - VSC 세팅, Sass 개발 범위 파악
• 진입페이지
• 주문하기 페이지
• 메뉴 상세 페이지
• 주문서 페이지

마무리

 

 

 

---