라이즈랩

자주 묻는 질문
VOD피그마 파일

HTML/CSS/JS
디자인패턴 100제

피그마 시안이 실제 웹이 되는 과정을 100가지 패턴으로 체득합니다.

레이아웃, 타이포그래피, 버튼, 카드, 모달 등 실무에서 가장 자주 쓰이는

UI 패턴을 HTML/CSS/JS 코드로 직접 구현하며 퍼블리싱 감각을 키웁니다.

 

디자이너가 코드를 이해하고, 퍼블리셔가 디자인을 읽는 — 두 언어를 모두

구사하는 실무형 웹 제작자로 성장합니다.

#HTML#CSS#JavaScript#웹퍼블리싱#디자인패턴

강의 내용

7개 챕터 · 104개 강의
챕터 2배경 background
  • 22📖 Background 백그라운드
    16:30
  • 2312 · 델
    14:15
  • 2413 · 그린플레이트A
    13:46
  • 2514 · 몽자장군이코코
    10:50
  • 2615 · 테이크
    18:03
  • 2716 · 올베라
    16:39
  • 2817 · 제너럴드링크샵
    11:33
  • 2918 · 아이콘랩
    16:12
  • 3019 · 지큐코리아
    6:02
  • 3120 · 루나플래닛
    26:35
  • 3221 · 큐익스프레스
    27:31
챕터 3플렉스 레이아웃 flex
  • 33📖 flex 플렉스
    18:05
  • 3422 · 플렉스베이직
    22:52
  • 3523 · 어도비구독
    18:29
  • 3624 · 그린플레이트
    9:47
  • 3725 · 슛나우
    12:04
  • 3826 · cos코스메틱
    10:38
  • 3927 · 우리우유
    46:17
  • 4028 · 따릉이FAQ
    35:42
  • 4129 · 에어로런
    18:45
  • 4230 · 비타민카드
    18:23
  • 4331 · 아이오닉
    18:03
  • 44📖 로고 처리하기
    19:14
  • 4532 · 워시버디
    27:41
  • 4633 · 인디아워
    1:05:56
  • 4734 · 센터레이아웃
    53:45
  • 48📖 랩앤디렉션
    7:09
  • 4935 · 디즈니플러스
    24:11
  • 5036 · 패브릭인포
    30:34
  • 5137 · 스트리밍
    24:20
  • 5238 · 카드랭킹 (flex-direction: column)
    48:29
챕터 4포지션 Position
  • 53📖 포지션 Position
    34:10
  • 5439 · 와일드
    19:02
  • 5540 · 삼성메모리
    17:15
  • 56📖 포지션 가운데정렬
    16:40
  • 5741 · 아트앤스페이스
    15:27
  • 5842 · 스톡정글
    32:15
  • 5943 · 오드퍼퓸
    30:24
  • 6044 · 강아지
    34:51
  • 61📖 가상요소 (비포, 애프터)
    31:10
  • 6245 · 커넥팅보드
    1:22:31
  • 6346 · 엘리시안
    25:16
  • 6447 · 스티키
    25:56
챕터 5CSS Advanced
  • 65📖 선택자심화
    49:30
  • 66📖 인풋
    44:41
  • 6748 · 페이카
    54:14
  • 6849 · 뮤직어워드
    41:13
  • 69📖 오버플로우호버트랜지션
    36:47
  • 7050 · 푸디즈
    39:31
  • 7151 · 엔터테인먼트 (css dropdown)
    50:31
  • 7252 · 에니메이션
    26:07
  • 73📖 영상
    16:22
  • 7453 · 시티 비디오
    36:11
  • 75📖 너비 상대값, 절대값
    17:12
  • 76📖 반응형 웹
    45:09
  • 7754 · 진저라떼 (반응형)
    11:54
  • 7855 · 숍밀리언 (반응형)
    40:34
챕터 6Javascript
  • 79📖 자바스크립트 시작
    6:34
  • 80📖 변수
    7:37
  • 81📖 값타입1. 원시(primitive)값
    14:59
  • 82📖 값타입2. 참조(reference)값
    27:04
  • 83📖 DOM 도큐먼트 오브젝트 모델
    21:27
  • 84📖 함수
    50:41
  • 85📖 이벤트 핸들러
    39:26
  • 86📖 스타일 및 클래스 제어
    39:00
  • 8756 · 하늘
    45:31
  • 8857 · 드롭다운
    24:33
  • 89📖 if문
    25:29
  • 9058 · 숍밀리언 모달
    28:55
  • 91📖 swiper.js
    23:21
  • 9259 · 넷플릭스
    26:07
  • 9360 · 스노러쉬
    42:20
  • 9461 · 렌더불렛
    23:21
  • 95📖 반복문
    37:54
  • 9662 · 아코디언
    24:52
  • 9763 · condition (조건)
    46:35
  • 98📖 스크롤이벤트
    55:02
  • 9964 · 게임스크롤
    52:22
  • 100부스트업1/5 - 헤더
    58:10
  • 101부스트업2/5 - 섹션
    1:01:59
  • 102부스트업3/5 - 센터슬라이드
    48:54
  • 103부스트업4/5 - faq
    44:31
  • 104부스트업5/5 - js
    --