안녕하세요 리베하얀입니다.

웹퍼블리셔를 위한
최고의 퀄리티 실무강의

저는 20살때부터 웹사이트를 만드는 것이 취미였습니다. 혼자 공부하고 다른 사람의 코드를 분석하고 다른 사람들이 내 사이트에 방문해 글을 남겨주는 것이 좋았습니다. 그리고 이런 취미생활이 직업으로 삼게 되었습니다.

2009년 강의를 시작하면서 관련 전공자들이 저에게 다시 수강하는 것을 보게 되었습니다. 4년제 관련학과를 졸업하고도, 다시 돈을 들여 학원에 다녀야 하는 그런 시간과 금전 낭비를 하는 모습을 지켜보았습니다. 조금이나마 IT분야에 몸담고 싶어 하는 취준생들에게 다시 기초부터 학습하지 않아도 되는 기회와 도움을 드리고자 강의를 시작하게 되었습니다.

About Rebehayan

웹퍼블리셔 리베하얀입니다.

수강생 리뷰

과거 수강생들이 남겨준 수강평들을 모아보았습니다

Project Career

프로젝트 경력

2023년
  • 아주대학교 대학원
2022년
  • 아주대학교 대학원
  • 바이너스프레드
  • 레이플시스템
  • GenieAir
  • Hunet CEO
  • Meshkorea
  • LG Display 힐링콘텐츠
  • 한국교원대학교 영어교육과
  • Koreanre
2021년
  • 해양수산부 접근성 향상 (웹스퀘어)
  • 신한이지 웹, 모바일, 레거시
  • 삼성병원 모바일웹 국문/러시아
  • KPOP 워드프레스 테마
  • 보람상조
  • LG디스플레이
  • KCC창호 기능개선
  • 고우아이티 웹/모바일 구축
  • 홈씨씨 브랜드 사이트
  • SGI UI 인터렉션
  • 아모레퍼시픽 이노베이션 랩
2020년
  • 빌드인캠 반응형웹 사이트 구축
  • 중외제약 부트스트랩 테마 구축
2019년
  • 봉화군청 반응형웹 리뉴얼
  • 질병관리본부 반응형 웹사이트 리뉴얼
  • 중외제약 내부시스템 리뉴얼 (웹스퀘어)
2018년
  • 식약청 대통령보고 UI 상황판 제작
2017년
  • KT닷컴 모바일 앱 마이올레 리뉴얼
2016년
  • 푸르넷 웹사이트 3개 리뉴얼
  • 드래곤라자 모바일이벤트
  • 카네이테이 쇼핑몰 구축
  • 엔지니어링종합정보시스템
  • 쌍용 XLV 쇼룸
  • SPC eHR 시스템
2015년
  • 카페뮤제오
  • UNIVISTA 웹/모바일 자사 사이트 구축
  • 아이디어클라우드 운영
  • SK내트럭
  • 쿠차페이 모니터링 관리자
  • 컬처랜드
  • 서울직장맘지원센터 리뉴얼
  • 내개오고닷컴 쇼핑몰 구축
2014년
  • 노아솔루션 내부 프로젝트사이트 다수구축
  • IBK기업은행 라이브러리 사이트 구축
  • 우리은행 개인뱅킹, 금융센터 모바일앱 구축
  • AXA 다이렉트 웹사이트 리뉴얼
  • 초록마을 웹사이트 리뉴얼
2013년
  • 초록마을 웹사이트 리뉴얼
  • 한일시멘트 웹 접근성 & 반응형 웹 컨설팅
  • 삼성전기 B2B 웹접근성 컨설팅
  • 우리은행 웹접근성 구축
2012년
  • 우리은행 웹접근성 구축
  • 금융결제원 인터넷지로 웹사이트 리뉴얼
  • 롯데닷컴 통합 온라인 사이트 구축
  • 신한은행 오픈뱅킹 웹접근성 자문
  • 홈플러스 쇼핑몰 리뉴얼
2011년
  • 삼성화재 반응형웹 인트라넷 구축
  • IBK기업은행 웹모바일 사이트 구축
  • 대전광역시 일자리지원센터
  • 백석인재개발시스템 웹사이트 구축
  • 하이포크린 웹사이트 구축
2010년
  • Amway 메일링 시스템 구축
  • HI Qway 웹사이트 구축
  • 고려대학교 안암, 안산, 구로 병원 구축
  • PosREAD
  • 서울시 창작공간 통합사이트 구축
  • 해외에너지자원정보
  • 중고이야기 오픈마켓 구축
  • 외교통상부 자유무역협정 웹사이트 리뉴얼
  • 듀오락 웹사이트 리뉴얼
  • Samsung AppStore
  • (주)유사미 사이트 구축 (더카드)
  • KT Open API
2009년
  • 철도시설공단 감사시스템
  • 대덕특구본부 리뉴얼
  • (주)두레경영컨설팅 성과관리 시스템
  • 카이스트 웹접근성 고도화
  • 천안독립기념관 외국어사이트
  • 한전원자력연료 웹표준화 프로젝트
  • 녹색사업단 리뉴얼
  • 원자력국제협력 통합정보시스템
  • GIST 학과통합 프로젝트
  • 넷클래스 컴퍼넌트 디자인
  • ICIC 2009 웹사이트 리뉴얼
  • IASP 2010 리뉴얼 제안 시안
  • 테크노전략대학원 사이트 제작
  • 대전시청 60년
2008년
  • 대전시청 60년
  • 한전원자력원료 사이트 리뉴얼
  • 대전보건대학 30주년
  • 이텍산업 사이트 제작
  • 한백전자 키오스크 시스템 디자인
  • 한국원자력연료 리뉴얼 제안 시안
  • 기술·시장 정보포털사이트 통합
  • 플랜아이 사이트 구축
  • 처분안전해석 웹사이트 제작
  • Youfreesoiva 제작
  • BMDL 웹사이트 리뉴얼
  • ICIC 2008 웹사이트 리뉴얼
  • 익산시 농업기술센터
  • 대전테크노파크 영문사이트
  • 의료시스템공학학제학부 웹사이트 제작
  • 나리넷 웹사이트 리뉴얼
  • 바이오평가센터 웹사이트 리뉴얼
  • 유비쿼터스 벤처타운 제안 애니메이션
  • X-POP 제품홍보 인트로
  • INT 시스템 디자인
  • 대덕특구외자유치 리뉴얼
2007년
  • IT전용벤처타운 웹사이트
  • 지능로봇사업단 비즈니스협의회 구축
  • 지질시료동 웹사이트 리뉴얼
  • (주)플랜아이 블로그
  • 김재룡성형외과 웹사이트 리뉴얼
  • 광주과학기술원대관시스템 구축
  • 럭키게임 UI디자인
  • (주)스튜디오아침 웹사이트 제작
  • 지능로봇사업단 웹사이트 리뉴얼
  • 숲체원 홍보애니메이션
  • 카이스트 홍보관 제작
  • 대덕특구외자유치 웹사이트 제작
2006년
  • 한솥도시락 덕척로타리점 제작
  • 한국영어교과교육학회웹사이트 제작
  • 퍼스트데일리(주) 메일링 디자인
  • KT 플래시 광고디자인
  • 퍼스트데일리(주) 광고디자인
  • 퍼스트LED 전광판 광고디자인
  • 오창 쌍둥이빌딩 전광판 영상제작
  • 퍼스트데일리(주) 전광판 광고디자인
  • 퍼스트데일리(주) 외국어사이트
  • 농협 친환경유기농산물축제 광고 디자인
  • 퍼스트LED 잡지광고디자인
  • AG부동산중개(주) 광고디자인
  • 박효순 회계사사무소 잡지광고디자인
  • 퍼스트데일리(주) 고객센터 제작
  • 국민은행 오창점 광고디자인
  • 가로건축사사무소 광고디자인
  • 이종원성형외과 광고디자인
  • 국민은행 플래시 광고디자인
  • INS 플래시 광고디자인
  • (주)제이비컴 플래시 광고디자인
  • 이종원성형외과 플래시 광고디자인
  • 이종원성형외과 광고디자인
  • 국민은행 플래시 광고디자인
  • INS 플래시 광고디자인
  • (주)제이비컴 플래시 광고디자인
  • 이종원성형외과 플래시 광고디자인
  • 가로건축사사무소 플래시 광고디자인
  • 엔젤클럽(주) 플래시 광고디자인
  • 퍼스트데일리(주) 웹사이트 리뉴얼
2005년
  • 양간지 쇼핑몰 웹사이트
  • 서원대학교 eTLC 웹사이트 관리
  • 서원대학교 eTLC 포토샵강좌
2004년
  • 아마게돈 게임장 웹사이트 제작
2003년
  • 37사단 110연대 3대대 웹사이트 제작 및 유지보수
  • e-Pharos 웹사이트 디자인
  • e-Pharos 웹사이트 유지보수 및 솔루션 개발
2002년
  • 탄트라 노블레스길드 구축 및 유지보수
  • Goodmorning Solution 디자인
  • 제30회 종합학술대회 웹사이트 제작
  • 국내의학학술지 초록검색 사이트
2001년
  • 의학연구정보센터 웹사이트 유지보수
  • 스타크래프트 7TH길드 웹사이트 제작
  • 스타크래프트 SG길드 웹사이트 제작
  • Cyber Lecture 웹사이트 제작
2000년
  • 충청대학 실내건축과웹사이트 리뉴얼
  • 디아블로 르네상스길드 웹사이트 제작

Teaching Carrer

강의 경력

2023

  • 유튜브 오프라인 강의 – 웹퍼블리셔를 위한 SCSS(Sass) 실무
  • 유튜브 오프라인 강의 – 웹퍼블리셔를 위한 초급반
  • 유튜브 오프라인 강의 – 웹퍼블리셔를 위한 응용반

2022

  • 유튜브 오프라인 강의 – 웹퍼블리셔를 위한 SCSS(Sass) 기초 / 응용
  • 유튜브 오프라인 강의 – 웹퍼블리셔를 위한 초급반

2021

  • 클래스101 웹퍼블리셔 취업자 과정 오픈
  • 웹퍼블리셔 취업자 과정 (하이미디어아카데미 구로)

2020

  • 웹퍼블리셔 취업자 과정 (하이미디어아카데미 신촌)
  • 유튜브 오프라인 강의 – 웹퍼블리셔 응용반, 포폴반

2019

  • 웹퍼블리셔 취업자 과정 (하이미디어아카데미 신촌)
  • 웹퍼블리셔 취업자 과정 (하이미디어아카데미 종로)
  • 유튜브 오프라인 강의 – 웹퍼블리셔 기초반, 응용반, 포폴반
  • 청년취업 아카데미과정 (삼육대학교,대진대학교,인하대학교)

2018

  • 디지털컨버전스 웹퍼블리셔 양성과정 (하이미디어아카데미)
  • UI/UX 엔지니어링(반응형, 웹모바일)양성 과정 (하이미디어아카데미)

2017

  • 웹퍼블리셔 취업자과정 (내일능력개발원)

2016

  • 표준형 웹설계를 위한 모바일연동 프론트엔드 실무인재 양성과정 (배움디자인컴퓨터학원)
  • 웹앱 기반의 프론트 엔드 개발자 핵심역량 양성과정 (선문대학교, 한남대학교, 전주대학교)
  • 웹표준 기초실무 특강 (인천디자인고등학교)
  • 웹표준 환경 웹 접근성 이니셔티브(WAI)기반 유니버셜 모바일 & 웹콘텐츠 디자인 실무 양성과정(배움컴퓨터아트학원)

2015

  • 웹표준 환경 웹 접근성 이니셔티브(WAI)기반 유니버셜 모바일 & 웹콘텐츠 디자인 실무 양성과정(배움컴퓨터아트학원)

2014

  • 웹접근성 실무특강 (한빛교육센터)
  • HTML5 + CSS3 + 반응형웹 구축 (한빛교육센터)
  • 웹표준, 웹접근성, 모바일웹, 반응형웹 개인강습
  • HTML5 + CSS3 기초 (한빛교육센터)
  • 스펙초월 멘토스쿨 웹퍼블리싱 분야 멘토 활동

2013

  • 웹접근성 실무특강 (한빛교육센터)
  • 웹 표준 & 웹 접근성 역량강화 프로그램 전문가 과정 (중소기업청,한국생산성본부,한빛교육센터)
  • 웹접근성 프로젝트 중 웹퍼블리셔가 알아야 할것(퍼블리싱팀 대상) ((주)이모션)
  • 이미 늦은 당신을 위한 20분 – 아무도 모르는 웹 접근성 TIP 10선 발표 (이브레이스)
  • 실전으로 배우는 웹 접근성 프로젝트 실무 (블로터)
  • 개발자를 위한 웹 접근성 특강 (농협)
  • 웹표준과 웹접근성 실무구축 중,고급형 개인교습
  • 이미 늦은 당신을 위한 20분 – 더 높은 웹 접근성을 가능케 하는 HTML5 이야기 발표 (이브레이스)
  • 웹 접근성 향상 전략 세미나 – 국내 쇼핑몰 사이트의 접근성 실태 및 방향성 발표 (한국정보화진흥원)

2012

  • 웹표준 & 웹접근성 실무적용 마스터하기 초급과정(그린아카데미)
  • HTML5 & CSS3 & Responsive Design & Mobile Web구축하기 (그린아카데미)
  • 프론트 사이트와 백오피스 사이트 실무 Responsive Design (클리어보스 특강)

2011

  • 웹표준&웹접근성 실무 교육 ((주)라스테크)
  • 언론사 사이트 구축을 위한 html5, css3 특강
  • 웹표준 & 웹접근성 실무적용 마스터하기 (그린아카데미)

2009

  • HTML5, CSS3 웹표준 ( 부유한 웹디자이너 워크샵 특강 )
  • 인턴십교육 (플랜아이)
  • 웹디자인 실무 ( 대전 청컴퓨터 디자인학원 )

2008

  • 포토샵완전정복카페 선생님 (네이버 베스트 카페)
  • 인턴십교육(플랜아이)

2007

  • HTML 특강 ( 보건대학교 )

Some Story

리베하얀 이야기들

aspect-ratio 영상이 추가되었습니다.
이런저런 이야기

aspect-ratio 영상이 추가되었습니다.

정말 오랜만에 영상이 업데이트 되었습니다 ^^.aspect-ratio는 종횡비를 의미하는데요. 요즘 프로젝트 하다보니 간간히 나오는 녀석이기도하고사실 빠저서는 안되는 속성중에 하나이기도 합니다. 대부분 작업자분들이 잘 사용하실거라 생각이 듭니다만, 해당 영상을 보시게되면, 알지못했던 몇가지 비밀 있다는 것을 알게 되실거에요. 꼭 정주행 하시고, 프로젝트에 도움되기실…

@scope 영상이 추가되었습니다.
이런저런 이야기

@scope 영상이 추가되었습니다.

CSS의 큰 단점중에 하나는 선택자의 문제입니다.선택자 하나가 전역으로 전달되는 문제가 있었죠, 이것을 해결하기 위해 선택자의 점수나 다른 클래스명을 생각해야 한다는 것입니다. 또다른 단점중에 하나는 클래스명의 길이 입니다. 저는 이제까지 BEM 방법론으로 클래스네이밍을 하고있었습니다. 하지만 @scope를 도입하면서 그런 일이 사라젔죠.. 이러한…

isolation 업데이트
이런저런 이야기

isolation 업데이트

CSS를 하다보면 z-index에 대한 스트레스가 더러 있습니다.대표적으로 -1값 때문에 불필요한 html을 추가 구성해야 되다는 것이죠. 이를 보완하는 코드가 isolation입니다.해당 영상을 보시면서 어떻게 해결할 수 있을지,알아보시기 바랍니다. ^^.

CSS light-dark 함수 업데이트
이런저런 이야기

CSS light-dark 함수 업데이트

안녕하세요. 리베하얀입니다. CSS 최신스펙중 하나인 light-dark() 함수영상을 추가하였습니다. 과거에는 다크모드를 하기위해 @media를 활용하여 진행했었는데, light-dark()함수로 색상 관리를 직관적으로 할 수 있게 되었습니다. 디자이너와 협업하여 색상 가이드만 잘 나와준다면 순조로운 프로젝트가 예상될것 같네요. 다크모드에 관심있는 분이시라면 이번 강의 놓치지 말고 꼭…

7월 9일 CSS과정의 BEM 영상이 추가됩니다.
이런저런 이야기

7월 9일 CSS과정의 BEM 영상이 추가됩니다.

안녕하세요, 리베하얀입니다. 오는 7월 9일, CSS3 Basic Online 기초실무 온라인과정에 새로운 BEM(Block, Element, Modifier) 영상이 추가됩니다. 이 영상에서는 BEM 방법론의 기본 개념부터 실제 프로젝트에 적용하는 방법까지 자세히 다룹니다. 특히, BEM을 통해 코드의 유지 보수성을 높이고, 협업 시 일관성을 유지하는 방법을…

7월 업데이트! HTML popover가 추가됩니다.
이런저런 이야기

7월 업데이트! HTML popover가 추가됩니다.

오랜만에 포스팅을 하네요 ^^;최근 HTML, CSS의 스펙이 지속적으로 추가되면서 점점 공부할께 많아 지는듯합니다.최근에 popover라는 기능이 추가되면서 인터렉티브한 UI를 구현하기에 상당히 편해지고 있습니다.popover는 부트스트랩에서 사용했던 팝오버와 유사한 표현을 할 수 있습니다. 오히려 <dialog>태그와 비슷하다고 볼 수 있는 기능입니다.<dialog>태그는 팝업을 열기 위해서…

새로운 환경
이런저런 이야기

새로운 환경

유튜브를 시작한지도 벌써 7년째가 되었네요. 그간 3곳의 장소에서 많은 영상을 찍었고, 2023년을 기점으로 더 이상은 이사를 가지 않을것 같습니다.매번 촬영을 할때마다 거실에 방송장비를 셋팅하게 되다보니 막상 나만의 쉴곳이 사라저버렸습니다.침실이 거실겸 같이 쓰게 되고, 코로나 이후로 재택근무를 주로 하다보니 집안일과 업무가…

2023년 봄맞이 커벙 이후 이야기~
이런저런 이야기

2023년 봄맞이 커벙 이후 이야기~

구독자와 3번째 만남 종종 구독자 분들과의 만남을 갖는다.난 그 분들의 얼굴은 모르지만 구독자 분들은 멀리서도 나를 알아보시는게신기하기만 하다. 🙄 적극적인 홍보를 하진 않았지만 구독자 분들과 소통하는 단톡방이 따로 있다. 삼삼오오 모여서 사는 얘기도하고 궁금한것도 물어보고 하는 그런 소소한 방… 많은…

리베하얀의 온라인 강의(LMS) 사이트 오픈
이런저런 이야기

리베하얀의 온라인 강의(LMS) 사이트 오픈

어릴적 저는 나만의 공간을 갖고 싶었습니다. 학창시절 동생과 한 방에서 자신만의 공간을 갖기 위해서책상과 책장으로 서로의 공간을 나눠 차지했죠. 성인이 되면서 나만의 공간은 방이 아닌 제 개인사이트가 되었습니다.경력이 쌓이면서 나만의 공간은 제 포트폴리오 사이트였고,경력이 10년, 20년이 넘어가면서 나만의 공간은 블로그와…