'분류 전체보기' 카테고리의 글 목록 (5 Page)

여러분 드디어 두번째 도서가 출간되었습니다.

출간예정일은 2022년 8월 25일입니다.

HTML, CSS, javascript를 다루는 기본서로 탄탄한 기본기를 다질수 있도록 화려함은 빼고 핵심만 진하게 담았습니다.

많은 관심 부탁드립니다.

곧 소개영상으로 다시 찾아뵙겠습니다.

감사합니다.

책소개

웹 애플리케이션 시작의 핵심!
한 권으로 HTML, CSS, javascript 해결

이 책은 웹 퍼블리싱에 대해 아무런 지식이 없는 상태에서 시작할 수 있도록 개발 환경 구축부터 시작해서 실전 프로젝트까지 스스로 코딩 할 수 있도록 도와주고 있다. HTML 기초에서는 다양한 태그의 사용법을 학습하고 웹페이지 제작의 가장 큰 목표인 내용을 정확하게 전달하고, 웹 표준을 준수하여 태그를 작성할 수 있게 가르친다.

CSS 부분은 HTML에서 사용하는 주요 요소들에 대한 설명을 하고 있다. 그리고 동적인 웹사이트를 구현하는데 사용하는 속성들을 학습해볼 수 있다. 후반에는 javascript 내용으로 웹에서 자주 사용하게되는 문법들을 설명한다. 그동안 눈에 보이는 것들을 만졌다면 이제는 구동하는 방법 더 적은 코드로 화면을 구성하는 방법을 배우게 된다.

그리고 웹사이트에서 자주 구현하는 UI/UX 기능을 구현해본다. 사용자의 행동에 따라 웹사이트에서 보는 내용들이 달라지게 되고 반응을 하게된다. 최근에는 다양한 디바이스가 있는 만큼 우리가 사용자들에게 다양한 화면을 어떻게 보여줄 것인지 배우면서 고민을 해보시기 바란다. 마지막으로 실전 프로젝트로 우리가 학습한 내용을 바탕으로 웹사이트를 구현해본다. 이것으로 HTML, CSS, javascript가 어떻게 연계되는지 학습해볼 수 있다.

모바일 웹 시장은 계속 확장되고 있다. 이에 대부분의 IT 웹앱 서비스 회사들이 웹 뷰를 도입하여 웹 프론트엔드 개발자의 수요가 증가하고 있다. 이에 맞게 개발자들은 사용자에게 전달이 잘 될 수 있도록 하는 것이 중요해진다. 기본적인 HTML, CSS, javascript를 다루게 되면 앞으로 웹서비스를 어떻게 구현할지 고민을 해야 할 것이다. 이 책은 그 기본을 알 수 있게 도와주는 책이므로 차근차근 따라하다 보면 능숙하게 다룰 수 있을 것이고 어렵다면 유튜브 강의와 코딩 플랫폼을 통해 복습해 볼 수 있으니 한번 도전해보시기 바란다.

지은이의 글
이 책의 특징
베타 리더
PART 1 HTML 기초
1. HTML의 구조
2. 블록 및 인라인 레벨 요소
3. 텍스트 정의 요소
4. div 요소로 작성하는 문서의 그룹화
5. HTML5 섹셔닝
6. 제목, 문단, 구분선, 정형화된 텍스트
7. 목록을 표현하는 요소
8. 표를 만드는 테이블 요소
9. 앵커(Anchor)의 표현
10. 이미지와 관련된 요소들
11. 폼 요소의 종류
12. 오디오, 비디오 활용
이번 장의 마무리
연습 문제
실전 예제

PART 2 CSS 기초편
1. CSS 문법
2. 색상과 단위
3. 선택자
4. 선택자 우선순위
5. 서체, 글 스타일
6. 목록 스타일
7. display 디스플레이
8. overflow
9. background 스타일
10. box model 박스 모델
11. 레이아웃 positioning style
이번 장의 마무리
연습 문제

PART 3 CSS 중급편
1. shadow
2. gradient
3. transition
4. animation
5. transform
6. responsive 반응형
이번 장의 마무리
연습 문제
실전 예제

PART 4 javascript 기초
1. 기본 용어
2. 변수
3. 산술 연산자
4. 함수
5. 객체
6. 배열
7. 조건문
8. 반복문
9. 문자열
10. 타이머
11. 수학 연산
이번 장의 마무리
연습 문제

PART 5 javascript 응용
1. DOM 조작
2. 선택자
3. 이벤트
4. ECMAScript 6
이번 장의 마무리
연습 문제
실전 예제

PART 6 실전 프로젝트
1. 준비하기
2. 기본 쉘 생성하기
3. 디자인 확인 및 HTML 작성하기
4. 디자인 참조하여 CSS 작성하기
5. CSS 작성
6. script 작성
프로젝트 마무리

연습 문제 정답

[교보문고] 바로가기

[yes24] 바로가기

[인터파크] 바로가기

'도서' 카테고리의 다른 글

도서 서평 이벤트! 도서를 무료로 드립니다. (0)	2023.10.12
웹디자인 기능사 표지 디자인입니다. (0)	2023.08.29

안녕하세요. rocks'easyweb의 김동주 강사입니다.

피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 재직자 수업(일반도 신청가능)으로 진행합니다.

강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.

하루 3시간, 총 약12일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery(javascript)등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.

전반 5일은 디자인 파트는 디자인 초보자도 가능하지만, 7일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.

기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분

딱 12일간 제대로 가르쳐 드립니다. 한번 도전해보세요!

1. 강의 일정

개강일: 7월19일~8월18일(화목금/화목, 12일)

강의장: 그린컴퓨터아트학원 종로지점 - 212호

휴강일: 공휴일 휴무

교육시간: 오후 7시 ~ 오후 9:50

문의: 02-722-2111

모집인원: 20명

2. 강의 내용

1 일차	디자이너의 피그마 활용	피그마 기본 - Adobe XD, sketch, Figma 비교 - 설치, UI 메뉴, 프레임 - 쉐이프, 클리핑 마스크, 펜툴, 폰트 위계 - 컴포넌트, 프로토 타이핑
2 일차		- UI 디자인 원칙 - 그리드 피그마 웹디자인 실무 - 버튼, 배너
3 일차		피그마 웹디자인 실무 - 배너, 서비스, 후기 - 푸터, 회사소개페이지 - 서브페이지, 아코디언 - 서브페이지, 회원가입, 로그인
4 일차
5 일차
6 일차	개발자의 피그마 활용 (쇼핑몰 디자인)	피그마 디자인 to HTML - 인덱스 페이지 - 공통 HTML, CSS 작성 - INDEX페이지 CSS
7 일차		피그마 디자인 to HTML - ABOUT 페이지 - 로그인 - 회원가입 - 반응형
8 일차		모바일 쇼핑몰 구현하기 - index 페이지 HTML, CSS, SCRIPT
9 일차		모바일 쇼핑몰 구현하기 - 상품목록페이지 HTML, CSS, SCRIPT - 회원가입 HTML, CSS
10 일차		모바일 쇼핑몰 구현하기 - 회원가입 HTML, CSS - INDEX ASIDE 애니메이션 HTML, CSS, SCRIPT
11 일차 12 일차		모바일 쇼핑몰 구현하기 - 상품 상세 HTML, CSS, SCRIPT - 장바구니 HTML, CSS, SCRIPT

(상기 일정은 학습 여건에 따라 변경될 수 있습니다.)

3. 대상

- 포토샵 또는 일러스트로 웹디자인을 한 경험이 있는 분 또는 없는분도 가능

(포토샵, 일러스트레이터를 몰라도 피그마는 가능합니다.)

- HTML5 태그를 학습한 분

h1~h5, ul, p, a, input등 기본태그를 사용할 수 있다.

header, footer, aside등 HTML5 태그를 이해할 수 있다.

(기초 수업은 아닙니다. 태그를 하나하나 설명할 시간을 없을 수 있습니다. )

- CSS 기초를 학습한 분

float, position, flex, 반응형 등을 학습한 분

(완벽하게 이해하고 있지 못해도 써본 경험이 있으면 됩니다. )

- Javascript, jQuery를 학습 한 분

변수, 함수, 배열, 이벤트을 이해할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- jQuery 라이브러리를 사용해본 경험이 있는 분

bxslider, slick, swiper, jQueryUI을 적용할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- 디자인에서 코딩까지 전체 프로세스를 경험해보고 싶은 분

4. 수업내용 미리보기

피그마 디자인 & 디자인 참고 웹페이지 구현하기

디자인 참고 웹페이지 구현하기

5. 문의

- 02-722-2111

- ezwebpub@gmail.com

- 상담 신청하기 https://forms.gle/59fkMTfehzVPEy2s7

피그마 활용 웹디자인 & 웹퍼블리싱 실무 신청

신청양식을 작성하여 제출해주시면 학원에서 전화상담을 통해 안내해드립니다. 개강일: 2022년 7월 12일 ~ (매주 화목금/화목) 강의장: 그린컴퓨터아트학원 종로지점 - 212호 휴강일: 공휴일 휴무

docs.google.com

6. 선행학습

- 코딩 파트는 html, css, javascript, jQuery 기초가 있어야 수업을 따라 오실 수 있습니다.

제 유튜브 영상의 재생목록에서 아래 차시를 미리 학습해주시면 감사하겠습니다.

- HTML 재생목록 : HTML5-N01 ~ N21
- CSS 재생목록 : CSS3 - N01 ~ N10, CSS3-40, 41, 42
- Javascript : 01 ~ 10
- jQeury : 01 ~ 13

7. 수강후기

'오프라인 수업 신청하기' 카테고리의 다른 글

피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 4회차 수강생을 모집합니다. (0)	2022.10.18
[오프라인 특강] 프로필 페이지 구축을 위한 워드프레쓰 테마 개발 (0)	2022.09.14
[오프라인 특강] 프로필 페이지 구축을 위한 워드프레쓰 테마 개발 (0)	2022.06.19
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 3차 수강생을 모집합니다. (0)	2022.03.24
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 2차 수강생을 모집합니다. (1)	2022.01.24

과정 목표

디자인을 참조하여 HTML, CSS, JAVASCRIPT를 활용하여 웹페이지를 구현한다. FLEX활용, 부트스트랩 V5를 활용하여 반응형을 빠르게 구현한다.

워드프레쓰 유료 또는 무료 테마를 사용하는 것이 아니라 codex.wordpress.org의 공식 매뉴얼을 통해 나만의 테마를 개발하고, 자신의 포트폴리오를 지속적으로 관리 홍보할 수 있는 웹페이지를 구현한다.

HTML파일로만 작성되어 관리 및 유지보수가 어려운 프로필 페이지가 아니라, 관리자 페이지에서 포트폴리오의 세부 정보를 등록하여 체계적으로 포트폴리오 작품을 관리한다.

WORDPRESS 소개

워드프레쓰는 컨텐츠를 등록 관리하는 시스템(CMS – content management system)중 전세계에서 가장 점유율이 높은 프로그램으로 다양한 테마와 플러그인을 활용하여, 블로그, 기업 홈페이지, 쇼핑몰, 도서관, 관공서등 다양한 웹사이트를 구현할 수 있는 무료 프로그램입니다.

[출처 https://w3techs.com/ ]

과정 상세

1~2 일차 : Figma 디자인 참조 웹페이지 코딩하기
3일차: 워드프레쓰 테마의 구조 및 주요 파일 생성, 메뉴구현, 로그인 설정, 페이지 템플릿 생성
4일차: 카테고리 생성 및 글 출력, 컨텐츠 등록 및 출력
5일차: 검색페이지와 결과 페이지, 페이지네이션, 이전글, 다음글, 메일서버 활용하기, 플러그인 활용

** 수업진행시 학습속도에 따라 변동될 수 있습니다.

과정 결과물

[메인페이지]

[ 포트폴리오 페이지 – 카테고리 출력, 페이지 네이션 ]

[상세페이지- 컨텐츠 등록 출력, 이전글 다음글]

[ 컨텍 페이지 – 메일서버 활용, 폼생성 ]

수료생 샘플

대상

HTML, CSS, JAVASCRIPT, jQuery 경험자
php기초가 있거나, 없어도 무관

과정기간

기간: 2022.10월 1일, 8일, 15일, 22일 29일
시간: 오전 10 ~ 오후 5시 (오후1~오후2시 점심시간)

교육장소

대면: 그린컴퓨터 아트학원(종로점)
비대면: zoom 수업 가능
주소 : 서울특별시 종로구 수표로 96 국일관 2F

정원

온 오프라인포함 최대 20명

수업료

400,000원

문의

EZWEBPUB@GMAIL.COM
주중은 수업중으로 문자나 카톡으로 실시간 문답은 힘들수 있습니다. 양해부탁드립니다.

수강료 반환 원인 및 기준

수강료 반환원인수강료 반환기준

교습개시 전 수강자의 귀책사유로 계약을 해제하는 경우		기 납부한 수강료 전액 환급
계약한 수강 개월이 1개월인 경우 (수강자의 귀책사유로 해지 시)	총 교습시간의 1/3 경과 전	수강료의 2/3 해당액 환급
	총 교습시간의 1/2 경과 전	수강료의 1/2 해당액 환급
	총 교습시간의 1/2 경과 후	환급하지 않음

참고 및 유의사항

본 과정은 개인교습과정으로 그린컴퓨터아트학원의 공식 과정과는 무관합니다.
개별 포트폴리오를 제작하는 과정은 아닙니다.
워드프레쓰 테마 개발을 통해 프로필 페이지를 구현할 때 필요한 테크닉을 학습합니다.
그린컴퓨터 아트학원은 강의실만 대관하는 형식입니다.
본 특강외에 그린컴퓨터 아트학원의 다양한 과정이 있으니 참고하시기 바랍니다.

수강신청하기

https://ezwebpub.com/product/wordpress_lesson/

'오프라인 수업 신청하기' 카테고리의 다른 글

[오프라인 특강] 프로필 페이지 구축을 위한 워드프레쓰 테마 개발 (0)	2022.09.14
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 3회차 수강생을 모집합니다. (0)	2022.07.04
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 3차 수강생을 모집합니다. (0)	2022.03.24
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 2차 수강생을 모집합니다. (1)	2022.01.24
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 수강생을 모집합니다. (0)	2021.11.10

보통 사이트의 로고에 이미지를 적용하는데 아래와 같이 이미지를 넣는 방법과 배경으로 처리하는 방법이 있겠습니다.

1번: <h1><a href=""><img src="images/logo.png" alt="ezweb"></a></h1>

2번: <h1><a href="">ezweb</a></h1>

위에서 검색엔진 최적화 차원에서 검색이 잘되는 방법은 2번입니다.

그러면 글씨는 검색차원에서 남겨두고 디자인 차원에서는 이미지가 나타나도록 하는 방법을 전통적인 방법부터 최근 방법을 소개합니다.

아래 영상을 참조해주세요.

https://www.youtube.com/watch?v=tvHlVNFEgg4

'Youtube 동영상 > css3' 카테고리의 다른 글

네이버와 애플의 로고에 쓰인 IR 기법 (0)	2022.03.28
CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기 (0)	2020.01.19
CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기 (0)	2019.11.20
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation (0)	2019.10.27
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation (0)	2019.10.27

IR(image replacement)기법은 검색 최적화를 위해 텍스트를 HTML에 작성하고 CSS를 활용하여 배경 이미지로 대체하는 기법이다.

전통적으로는 내부의 텍스트를 안보이도록 하기 위해 text-indent 속성을 많이 활용했다.

.logo a{

width: 100px;

height:50px;

background:url(../images/logo.png) no-repeat;

text-indent: -9999em;

display: block;

overflow: hidden;

}

하지만 최근에는 rect 속성을 이용하여 글씨 부분에 마스크를 적용하여 가리는 추세인 것 같다. 최근에 네이버와 애플의 로고 방식이 아래와 같이 변경되었다.

[ 네이버 로고 - HTML ]

a태그에는 특별한 속성이 없고 ::before요소에 로고 이미지를 배경으로 처리했다. 배경을 sprite 이미지로 로고 부분이 보이도록 background-position으로 위치를 잡아주었다.

#header .logo_default .logo_naver:before {

display: inline-block;

width: 222px;

height: 52px;

background-position: 0 -158px;

background-repeat: no-repeat;

vertical-align: top;

content: '';

}

핵심은 span태그를 어떻게 보이지 않도록 했느냐이다.

.blind {

position: absolute;

clip: rect(0 0 0 0);

width: 1px;

height: 1px;

margin: -1px;

overflow: hidden;

}

클래스명 blind요소에 clip을 이용하여 마스크를 적용하고 있다. clip 속성은 반드시 position 속성의 값이 absolute로 되어 있어야 작동한다. 크기를 1px만 주고 margin을 -1px로 주어 바깥 방향으로 내용이 나가도록 하고 overflow:hidden을 이용하여 넘치는 부분을 보이지 않도록 했다.

clip:rect(0 0 0 0)까지만 작성했을 때는 아래와 같이 span 태그의 공간이 나타난다. 이부분을 너비를 1px만 주고 보이지 않도록 축소한 것이다.

애플의 로고의 경우도 naver와 마찬가지로 a 태그 안에 span 태그로 텍스트를 표시하고, a 태그에 배경을 지정했다.

#ac-globalnav .ac-gn-link-apple {

background-size: 14px 44px;

background-repeat: no-repeat;

background-image: url(../../en_US/images/be15095f-5a20-57d0-ad14-cf4c638e223a/globalnav_apple_image__b5er5ngrzxqq_large.svg);

background-position: center center;

width: 14px;

}

See the Pen <a href="https://codepen.io/alikerock/pen/GRymXoE"> clip rect - IR(image replacement)</a> by Rock's Ezweb (<a href="https://codepen.io/alikerock">@alikerock</a>) on <a href="https://codepen.io">CodePen</a>.

'Youtube 동영상 > css3' 카테고리의 다른 글

IR기법 2가지 - 네이버, 애플 로고 텍스트를 이미지로 교체하 (0)	2022.03.30
CSS3 - 87 [ Fixed Footer ] 콘텐츠 양이 짧아도 하단에 푸터 고정하기 2가지 방법, position 활용, Fixed 활용하기 (0)	2020.01.19
CSS3 - 86 [ position:sticky ] script 없이 순수 CSS로 스크롤을 할 때 요소를 고정하기 (0)	2019.11.20
CSS3 - 85 [ CSS ANIMATION ] 공지 카드 애니메이션, card notification css animation (0)	2019.10.27
CSS3 - 84 [ CSS ANIMATION ] 토글 슬라이드 버튼 애니메이션, form, flex, position, transition, css3 animation (0)	2019.10.27

안녕하세요. rocks'easyweb의 김동주 강사입니다.

피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 재직자 수업(일반도 신청가능)으로 진행합니다.

강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.

하루 3시간, 총 약12일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery(javascript)등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.

전반 5일은 디자인 파트는 디자인 초보자도 가능하지만, 7일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.

기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분

딱 12일간 제대로 가르쳐 드립니다. 한번 도전해보세요!

1. 강의 일정

개강일: 5월17일~6월23일 (매주 화목)

강의장: 그린컴퓨터아트학원 종로지점 - 212호

휴강일: 공휴일 휴무

교육시간: 오후 7시 ~ 오후 9:50

5월: 3, 10, 12, 17, 19, 24, 26, 31
6월: 2, 7, 9, 14 (총12회)

문의: 02-722-2111

모집인원: 20명

2. 강의 내용(12회에 맞춰 진행됩니다.)

1 일차	디자이너의 피그마 활용	피그마 기본 - Adobe XD, sketch, Figma 비교 - 설치, UI 메뉴, 프레임 - 쉐이프, 클리핑 마스크, 펜툴, 폰트 위계 - 컴포넌트, 프로토 타이핑
2 일차		- UI 디자인 원칙 - 그리드 피그마 웹디자인 실무 - 버튼, 배너
3 일차		피그마 웹디자인 실무 - 배너, 서비스, 후기 - 푸터, 회사소개페이지 - 서브페이지, 아코디언 - 서브페이지, 회원가입, 로그인
4 일차
5 일차
6 일차	개발자의 피그마 활용	피그마 디자인 to HTML - 인덱스 페이지 - 공통 HTML, CSS 작성 - INDEX페이지 CSS
7 일차		피그마 디자인 to HTML - ABOUT 페이지 - 로그인 - 회원가입 - 반응형
8 일차		모바일 쇼핑몰 구현하기 - index 페이지 HTML, CSS, SCRIPT
9 일차		모바일 쇼핑몰 구현하기 - 상품목록페이지 HTML, CSS, SCRIPT - 회원가입 HTML, CSS
10 일차		모바일 쇼핑몰 구현하기 - 회원가입 HTML, CSS - INDEX ASIDE 애니메이션 HTML, CSS, SCRIPT
11 일차		모바일 쇼핑몰 구현하기 - 상품 상세 HTML, CSS, SCRIPT - 장바구니 HTML, CSS, SCRIPT
12 일차		- 자바스크립트 & ECMASCRIPT 6

(상기 일정은 학습 여건에 따라 변경될 수 있습니다.)

3. 대상

- 포토샵 또는 일러스트로 웹디자인을 한 경험이 있는 분 또는 없는분도 가능

(포토샵, 일러스트레이터를 몰라도 피그마는 가능합니다.)

- HTML5 태그를 학습한 분

h1~h5, ul, p, a, input등 기본태그를 사용할 수 있다.

header, footer, aside등 HTML5 태그를 이해할 수 있다.

(기초 수업은 아닙니다. 태그를 하나하나 설명할 시간을 없을 수 있습니다. )

- CSS 기초를 학습한 분

float, position, flex, 반응형 등을 학습한 분

(완벽하게 이해하고 있지 못해도 써본 경험이 있으면 됩니다. )

- Javascript, jQuery를 학습 한 분

변수, 함수, 배열, 이벤트을 이해할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- jQuery 라이브러리를 사용해본 경험이 있는 분

bxslider, slick, swiper, jQueryUI을 적용할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- 디자인에서 코딩까지 전체 프로세스를 경험해보고 싶은 분

4. 수업내용 미리보기

피그마 디자인 & 디자인 참고 웹페이지 구현하기

디자인 참고 웹페이지 구현하기

5. 문의

- 02-722-2111

- ezwebpub@gmail.com

- 상담 신청하기 https://forms.gle/Bgw3r2pqBmWJSjKK7

피그마 활용 웹디자인 & 웹퍼블리싱 실무 신청

신청양식을 작성하여 제출해주시면 학원에서 전화상담을 통해 안내해드립니다. 개강일: 2022년 5월 3일 ~ 6월 14일 (매주 화목) 강의장: 그린컴퓨터아트학원 종로지점 - 212호 휴강일: 공휴일 휴무

docs.google.com

6. 선행학습

- 코딩 파트는 html, css, javascript, jQuery 기초가 있어야 수업을 따라 오실 수 있습니다.

제 유튜브 영상의 재생목록에서 아래 차시를 미리 학습해주시면 감사하겠습니다.

- HTML 재생목록 : HTML5-N01 ~ N21
- CSS 재생목록 : CSS3 - N01 ~ N10
- Javascript : 01 ~ 10
- jQeury : 01 ~ 13

'오프라인 수업 신청하기' 카테고리의 다른 글

피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 3회차 수강생을 모집합니다. (0)	2022.07.04
[오프라인 특강] 프로필 페이지 구축을 위한 워드프레쓰 테마 개발 (0)	2022.06.19
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 2차 수강생을 모집합니다. (1)	2022.01.24
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 수강생을 모집합니다. (0)	2021.11.10
웹퍼블리싱 기초 주말반 프리미엄 과외 수강생 모집합니다.(모집중) (0)	2019.08.26

안녕하세요. rocks'ezweb의 김동주 강사입니다.

피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 특강형식으로 진행합니다.

강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.

하루 3시간, 총 약12일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.

전반 5일은 디자인 파트는 디자인 초보자도 가능하지만, 7일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.

기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분

딱 12일간 제대로 가르쳐 드립니다. 한번 도전해보세요!

1. 강의 일정

개강일: 2022년 3월 8일 ~ 4월 14일 (매주 화목)

강의장: 그린컴퓨터아트학원 종로지점 - 207호

휴강일: 공휴일 휴무

교육시간:

**수업나오는요일**
3월: 8,10,15,17,22,24,29,31
4월: 5, 7, 12, 14 (총 12회)
19:00~22:00 (총 3시간)

문의: 02-722-2111

모집인원: 20명

2. 강의 내용(12회에 맞춰 진행됩니다.)

1 일차	디자이너의 피그마 활용	피그마 기본 - Adobe XD, sketch, Figma 비교 - 설치, UI 메뉴, 프레임 - 쉐이프, 클리핑 마스크, 펜툴, 폰트위계 - 컴포넌트, 프로토 타이핑
2 일차		- UI 디자인 원칙 - 그리드 피그마 웹디자인 실무 - 버튼, 배너
3 일차		피그마 웹디자인 실무 - 배너, 서비스, 후기 - 푸터, 회사소개페이지 - 서브페이지, 아코디언 - 서브페이지, 회원가입, 로그인
4 일차	개발자의 피그마 활용	피그마 웹디자인 실무 - 서브 페이지 피그마 디자인 to HTML - 인덱스 페이지 - 공통 HTML, CSS 작성 - INDEX페이지 CSS
5 일차		피그마 디자인 to HTML - ABOUT 페이지 - 로그인 - 회원가입 - 반응형
6		모바일 쇼핑몰 구현하기 - index 페이지 HTML, CSS, SCRIPT
7		모바일 쇼핑몰 구현하기 - 상품목록페이지 HTML, CSS, SCRIPT - 회원가입 HTML, CSS
8		모바일 쇼핑몰 구현하기 - 회원가입 HTML, CSS - INDEX ASIDE 애니메이션 HTML, CSS, SCRIPT
9		모바일 쇼핑몰 구현하기 - 상품목록 HTML, CSS, SCRIPT
10		모바일 쇼핑몰 구현하기 - 상품 상세 HTML, CSS, SCRIPT - 장바구니 HTML, CSS, SCRIPT
11		- 자바스크립트 & ECMASCRIPT 6
12		ES6 활용- 웹 UI/UX 구현

(상기 일정은 학습 여건에 따라 변경될 수 있습니다.)

3. 대상

- 포토샵 또는 일러스트로 웹디자인을 한 경험이 있는 분 또는 없는분도 가능

(포토샵, 일러스트레이터를 몰라도 피그마는 가능합니다.)

- HTML5 태그를 학습한 분

h1~h5, ul, p, a, input등 기본태그를 사용할 수 있다.

header, footer, aside등 HTML5 태그를 이해할 수 있다.

(기초 수업은 아닙니다. 태그를 하나하나 설명할 시간을 없을 수 있습니다. )

- CSS 기초를 학습한 분

float, position, flex, 반응형 등을 학습한 분

(완벽하게 이해하고 있지 못해도 써본 경험이 있으면 됩니다. )

- Javascript, jQuery를 학습 한 분

변수, 함수, 배열, 이벤트을 이해할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- jQuery 라이브러리를 사용해본 경험이 있는 분

bxslider, slick, swiper, jQueryUI을 적용할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- 디자인에서 코딩까지 전체 프로세스를 경험해보고 싶은 분

4. 수업내용 미리보기

피그마 디자인 & 디자인 참고 웹페이지 구현하기

디자인 참고 웹페이지 구현하기

5. 문의

- 02-722-2111

- ezwebpub@gmail.com

- 상담 신청하기 https://forms.gle/DN8pPcFmTEtZsNvT9

- HRD 훈련과정 안내 https://bit.ly/3nQP61t

직업훈련포털 HRD-Net

시간표 ( 일자를 클릭하세요 )

www.hrd.go.kr

'오프라인 수업 신청하기' 카테고리의 다른 글

[오프라인 특강] 프로필 페이지 구축을 위한 워드프레쓰 테마 개발 (0)	2022.06.19
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 3차 수강생을 모집합니다. (0)	2022.03.24
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 수강생을 모집합니다. (0)	2021.11.10
웹퍼블리싱 기초 주말반 프리미엄 과외 수강생 모집합니다.(모집중) (0)	2019.08.26
포트폴리오 제작 - 30일 완성! 평일 오전반 오프라인 수강생 모집합니다. (0)	2019.08.26

안녕하세요. rocks'ezweb의 김동주 강사입니다.

피그마활용 웹디자인 & 웹퍼블리싱 강의를 그린컴퓨터아트학원(종로점)에서 특강형식으로 진행합니다.

강의는 오프라인으로 학원에 등원하거나 zoom을 통한 온라인 수강도 가능합니다.

하루 4시간, 총 약13일간 피그마를 활용한 웹디자인 기초와, 완성된 피그마 파일을 참조로 HTML, CSS, jQuery등을 활용하여 웹페이지를 구현, 반응형 구현의 강의를 진행합니다. 또한 모바일 디자인을 참조하여 웹과는 다른 모바일의 환경에 최적화된 쇼핑몰을 구현합니다.

약 4일간의 디자인 파트는 디자인 초보자도 가능하지만, 6일간 코딩 파트의 강의내용은 html, css, script를 한번이라도 학습한 분을 대상으로 하기 때문에 기초가 부족한 분은 수업이 어려울 수 있습니다.

기초는 있지만 종합적으로 적용이 어려운 분,반응형이 힘든 분,모바일 전용 쇼핑몰 구현이 궁금한 분

딱 13일간 빡세게(?) 가르쳐 드립니다. 한번 도전해보세요!

1. 강의 일정

개강일: 2021년 12월 14일 ~ 1월 21일 (화목금/화목 총 13일)

강의장: 그린컴퓨터아트학원 종로지점 - 501호

휴강일: 공휴일 휴무

교육시간:
휴강일 : 12/31(금), 1/7(금),1/14 (금),

**수업나오는요일**
12월: 14, 16. 17(금), 21, 23, 28, 30
  1월: 4, 6, 11, 13, 18, 20 (총 13회)
  12월: 19:00~22:00
  1월: 19:00~22:10 (총 40시간)

수강료: 300,000원

문의: 02-722-2111

모집인원: 20명~100명

( ⚠ 오프라인 수강인원은 코로나 방역지침으로 한 강의실에 최대 10명입니다. 상담시 확인해주세요. )

2. 강의 내용(13회에 맞춰 진행됩니다.)

1 일차	디자이너의 피그마 활용	피그마 기본 - Adobe XD, sketch, Figma 비교 - 설치, UI 메뉴, 프레임 - 쉐이프, 클리핑 마스크, 펜툴, 폰트위계 - 컴포넌트, 프로토 타이핑
2 일차		- UI 디자인 원칙 - 그리드 피그마 웹디자인 실무 - 버튼, 배너
3 일차		피그마 웹디자인 실무 - 배너, 서비스, 후기 - 푸터, 회사소개페이지 - 서브페이지, 아코디언 - 서브페이지, 회원가입, 로그인
4 일차	개발자의 피그마 활용	피그마 웹디자인 실무 - 서브 페이지 피그마 디자인 to HTML - 인덱스 페이지 - 공통 HTML, CSS 작성 - INDEX페이지 CSS
5 일차		피그마 디자인 to HTML - ABOUT 페이지 - 로그인 - 회원가입 - 반응형
6		모바일 쇼핑몰 구현하기 - index 페이지 HTML, CSS, SCRIPT
7		모바일 쇼핑몰 구현하기 - 상품목록페이지 HTML, CSS, SCRIPT - 회원가입 HTML, CSS
8		모바일 쇼핑몰 구현하기 - 회원가입 HTML, CSS - INDEX ASIDE 애니메이션 HTML, CSS, SCRIPT
9		모바일 쇼핑몰 구현하기 - 상품목록 HTML, CSS, SCRIPT
10		모바일 쇼핑몰 구현하기 - 상품 상세 HTML, CSS, SCRIPT - 장바구니 HTML, CSS, SCRIPT

(상기 일정은 학습 여건에 따라 변경될 수 있습니다.)

3. 대상

- 포토샵 또는 일러스트로 웹디자인을 한 경험이 있는 분 또는 없는분도 가능

(포토샵, 일러스트레이터를 몰라도 피그마는 가능합니다.)

- HTML5 태그를 학습한 분

h1~h5, ul, p, a, input등 기본태그를 사용할 수 있다.

header, footer, aside등 HTML5 태그를 이해할 수 있다.

(기초 수업은 아닙니다. 태그를 하나하나 설명할 시간을 없을 수 있습니다. )

- CSS 기초를 학습한 분

float, position, flex, 반응형 등을 학습한 분

(완벽하게 이해하고 있지 못해도 써본 경험이 있으면 됩니다. )

- Javascript, jQuery를 학습 한 분

변수, 함수, 배열, 이벤트을 이해할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- jQuery 라이브러리를 사용해본 경험이 있는 분

bxslider, slick, swiper, jQueryUI을 적용할 수 있다.

(기초수업은 아닙니다. 한번도 해본적이 없다면 이해하기 힘들수도 있습니다.)

- 디자인에서 코딩까지 전체 프로세스를 경험해보고 싶은 분

4. 수업내용 미리보기

피그마 디자인 & 디자인 참고 웹페이지 구현하기

디자인 참고 웹페이지 구현하기

5. 문의

- 02-722-2111

- ezwebpub@gmail.com

- 상담 신청하기 https://forms.gle/uZaBACQWb3U6f3NEA

'오프라인 수업 신청하기' 카테고리의 다른 글

[오프라인 특강] 프로필 페이지 구축을 위한 워드프레쓰 테마 개발 (0)	2022.06.19
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 3차 수강생을 모집합니다. (0)	2022.03.24
피그마 활용 웹디자인 & 웹퍼블리싱 실무특강 2차 수강생을 모집합니다. (1)	2022.01.24
웹퍼블리싱 기초 주말반 프리미엄 과외 수강생 모집합니다.(모집중) (0)	2019.08.26
포트폴리오 제작 - 30일 완성! 평일 오전반 오프라인 수강생 모집합니다. (0)	2019.08.26

피그에서 폰트 어썸 아이콘이 나타나지 않을 때느 작업중인 컴퓨터에 폰트어썸 폰트가 제대로 설치되어 있는지 확인합니다. 설치가 되어 있지 않다면 아래와 같이 폰트어썸사이트에서 다운로드 합니다.

폰트어썸 다운로드 페이지에서 컴퓨터 시스템에 맞은 파일을 다운로드합니다. 참고로는 Desktop에서 Free for Desktop 버튼을 클릭하여 소스를 다운로드했습니다.

다운로드한 압축파일을 해재하고 ofts 폴더내의 3개의 폰트를 모두 선택후 마우스 우클릭/설치를 클릭하여 설치합니다.

다시 피그마에 프로그램에서 폰트가 제대로 나타나는지 확인합니다.

일부 폰트의 경우는 폰트어썸 이전 버전(v4)용 폰트를 설치해야 나타나는 경우도 있습니다.

v4의 경우는 아래 주소에서 소스를 다운로드 하실 수 있습니다.

https://fontawesome.com/v4.7/get-started/

Get Started with Font Awesome

Get 1535 icons right now with FA Free, plus another 7020 icons with Pro, which also gets you another 53 icon category packs as we finish them! Our all-new SVG with JavaScript gives you all the power of SVG without the usual hassle. Ligatures for easier des

fontawesome.com

https://youtu.be/kaCa61Aoe5g

- 적절한 대체 텍스트 제공

- 명도 대비

- 자동 재생 금지

- 콘텐츠 간의 구분

시작예제는 www.ezwebpub.com 에서 구매, 또는 실버회원, 골드회원 공유폴더에서 다운로드 하실수 있습니다.

#웹접근성 #accessibility #wcag

홈페이지 : http://ezwebpub.com/

구독하기(subscribe now) : https://bit.ly/30wbC1y

멤버쉽 가입하기: https://www.youtube.com/channel/UCax1DP6hqZowNWF2lquKk0w/join

**가입후 반드시 유튜브 닉네임과 gmail주소를 ezwebpub@gmail.com으로 보내주세요. 등급별 자료폴더의 권한을 드립니다.

'Youtube 동영상 > the etc.' 카테고리의 다른 글

[ 출간 ] 웹디자인 & 웹퍼블리싱을 위한 피그마 완벽 활용서가 출간되었습니다. (1)	2021.07.28
[웹퍼블리셔 수강생 모집 ] 전액국비지원 웹표준 반응형 웹퍼플리셔 과정 - 제대로 가르쳐드립니다! 과정소개 시작합니다. (0)	2020.01.28
ETC 26 [ Web Accessibility ] 웹표준 & 웹접근성 준수하기, 한국형 웹 콘텐츠 접근성 지침 24 항목 (0)	2019.11.26
ETC 25 [ Github ] 깃허브로 소스 버전관리하기, 기초 명령어 add, commit, push (0)	2019.11.20
ETC 24 [ Storyboard ] 웹개발 설계도 - 스토리보드 작성하기, 기획자, 퍼블리셔, 개발자와의 소통의 채널 (0)	2019.11.20