css

20년 간 HTML/CSS에 집중한 개발자

배우기 쉽다고 생각하면 쉬운 문제만 해결할 수 있습니다. 더 높은 수준의 문제를 찾아 도전하고, 더 가치 있는 일에 시간을 투자하세요.

CSS는 명세를 깊이 있게 이해하지 못한 상태로 브라우저 버그까지 만나게 되면 무척 어렵게 느껴집니다. 그럼에도 HTML/CSS는 처음에 한 번 배워 놓으면 필요가 없다고 생각하는 경우가 있죠, 정말 알아야 하는 웹 성능, 검색엔진 최적화, 웹 접근성에 대해서는 제대로 알지 못합니다.

개발자는 실무에서 여러 문제를 맞닥뜨리게 되는데, 현업에서 문제를 해결한다는 것은 문법 외적인 지식을 요구합니다. 이 강의에서는 철저하게 실무에서 마주할 수 있는 문제 위주로 정리하고 실제로 문제를 해결했던 사례들을 함께 다루었습니다. 경험 많은 20년 차 실무자가 후배들에게 알려주고 싶은 중요한 내용들입니다.


by 정찬명

View Point

개발자가 찾던 HTML/CSS 심화 강의!

문법에만 매몰되지 말아야 한다

HTML/CSS 문법에 매몰되지 않는 유연한 사고

실제로 현업에서 마주할 수 있는 문제와 풀이 등이 클립에 준비되어 있습니다.

웹사이트 성능 향상

CSS 코드 최적화, 렌더링 시간 단축, 이미지 최적화, 분기, 미리로딩 기법을 들여다 봅니다.

명세를 통한 문제 해결력 상승

실무자가 꼭 알아야 하는 명세를 알아보고 명세보는 법을 배웁니다.

다양한 웹 표준과 웹 접근성에 대한 전략

계층과 구조, 다양한 방법론을 익혀 상황에 맞는 개발 계획을 세울 수 있습니다.

The Red Story

정찬명의 성능과 사용성 개선 사례

최근에는 jpg보다 압축률도 뛰어나면서 원본에 가까운 퀄러티를 유지하는 훌륭한 이미지 포맷들이 등장했어요. webp, avif 포맷입니다. 하지만 인터넷 익스플로러는 webp 포맷을 지원하지 않고요 avif 포맷은 아직 크롬 브라우저만 지원하는 상황이에요.

레진코믹스는 콘텐츠에 이미지를 많이 사용하기 때문에 이 문제에 관심이 있었고요. 일찌감치 webp 포맷을 지원하기 시작했어요. 하지만 인터넷 익스플로러도 함께 지원해야 하기 때문에 webp, jpg를 동시에 지원해야 했고요.

브라우저 지원 상황에 알맞게 필요한 이미지를 다운로드해서 렌더링 해 줄 수 있는 기법이 필요한 상황에서 이 문제를 해결해 주는 HTML 요소는 picture 요소이고 CSS 값에 사용할 수 있는 명세는 image-set() 함수입니다. 브라우저 지원 현황에 알맞게 가장 적은 용량의 이미지를 렌더링 해 주기 때문에 성능이 급격하게 좋아졌어요. 이 사례 하나가 성능과 사용성을 모두 개선한 최고의 사례라고 할 수 있겠네요.

정찬명에게 HTML/CSS를 배우면
네 가지가 바뀝니다.

표준 명세 기반으로 코드를 작성하면 오랫동안 영속될 수 있는 코드를 작성할 수 있게 됩니다.

단순한 웹사이트의 구현을 뛰어 넘어 성능 및 구조를 개선을 할 수 있게 됩니다.

자주 발생하는 오류! 실제 사례와 실무 상황에서 유연하게 해결 하는 노하우를 얻을 수 있습니다.

인터넷에서 쉽게 접할 수 없는 내용으로 검색 엔진이 좋아하는 웹 사이트를 만들 수 있게 됩니다.

Part.1
▫️실무에서 자주 사용하는 HTML 태그 속성의 상황 별 올바른 사용법에 대해 알아봅니다.

▫️이번 강의를 통해서 검색엔진 최적화 점수를 확인할 수 있는 도구 사용법을 배우고 비즈니스를 표현하면서도 적절한 타이틀 값을 지정하는 방법을 배울 수 있습니다.
Part.2
▫️정찬명이 엄선한 UI 개발 실무에서 꼭 알아야 하는 CSS 속성과 표준 명세를 통해 오류를 해결하는 방법을 알아봅니다.

▫️겉보기에는 똑같아 보일지라도, 논리적이고 효율적으로 작성된 코드는 웹 성능을 개선할 수 있습니다.

▫️대규모 웹 사이트에서 동료들과 원만하게 협업하고 쉬운 유지보수를 돕는 BEM의 올바른 적용 방법을 살펴봅니다.
Part.3
▫️이미지가 많은 페이지일수록 이미지 포맷과 로딩 순서에 대한 고민이 함께 수반되어야 합니다.

▫️2.5초 안에 중요한 정보를 렌더링해야 고객 이탈률을 낮추고 검색 엔진으로부터 좋은 점수를 받을 수 있습니다.

▫️페이지에서 시각적 요소를 담당하는 중요한 이미지들은 로딩이 느릴수록 고객 경험이 나빠집니다.

▫️LCP를 개선해서 초고속 웹 사이트로 환골탈태한 노하우, The Red에서 확인하세요.
Part.4
▫️흔히 발생하는 접근성 오류 12가지를 살펴보고 웹 접근성 지침을 올바르게 적용하는 방법을 살펴봅니다.

▫️모든 이미지 또는 요소에 대체 텍스트가 필요한 건 아닙니다.

▫️애플이 접근성에 투자하는 이유는 궁극적으로 사용자 경험을 높이기 위함입니다.
Top of Top

HTML/CSS 웹표준, 웹 접근성, UI 베테랑 개발자 정찬명

레진엔터테인먼트 웹툰 플랫폼 UI 개발 및 성능, SEO 개선자

11번가 쇼핑 플랫폼 UI개발 및 웹 접근성 가이드 수립자

네이버 공통 UI 콤포넌트 및 스마트에디터 UI 개발자

HTML/CSS 20년 차 UI 개발자


SK T아카데미 웹 접근성 강연
SK planet 반응형 웹 기술 강연


네이버 개발자 컨퍼런스 DEVIEW

반응형 웹 구축기

웹 표준 개발자 컨퍼런스 WSConf.

'CSS Selector' 표준 사용법

• 2017 ~
레진엔터테인먼트 (레진코믹스)
- 웹툰 플랫폼 UI 개발
- 웹 접근성 / WAI-AIRA 가이드라인 개발
- HTML/CSS 컨벤션 개발

• 2013 ~ 2017
SK플래닛 (11번가)
- 쇼핑 플랫폼 UI 개발
- O2O 마케팅 솔루션 UI 개발
- 웹 접근성 가이드라인 개발
• 2007 ~ 2013
네이버
- 공통 UI 콤포넌트 개발
- 스마트에디터 UI 개발
- 오픈소스 XE UI 개발
- DEVIEW 웹 사이트 개발

• 2006 ~ 현재
한국지능정보사회진흥원
- 자문위원
- 한국형 웹 접근성 지침 2.0 개발 참여
Curriculum

Part 1. HTML


Part 2. CSS


Part 3. Performance


Part 4. Accessibility

정찬명의 견고한 UI 설계를 위한 마크업 가이드
지금 최저가로 만나보세요!
(자동) (자동) (자동)
정가 (자동)
현재 판매가 (자동)
12개월 무이자 할부 시 (자동)
그리고 한 걸음 더

강의에 대해 궁금하셨나요?
한 걸음 더 들어가봅니다.

수강료.

  • The RED : 견고한 UI 설계를 위한 마크업 가이드 by 정찬명

    현재 정가 대비 50% 할인 중!
    12월 31일 금요일 자정 까지

    정가 375,000원
    현재 판매가 185,000원

    12개월 무이자 할부 시 월 15,416원

국내 9개 카드사 12개월 무이자 할부 지원! (간편 결제 제외)

  • 삼성카드
  • 신한카드
  • 롯데카드
  • 현대카드
  • 하나카드
  • BC카드
  • KB국민은행
  • 씨티카드
  • NH농협카드