메인메뉴로 이동
본문으로 이동
유틸 메뉴
로그인
회원가입
메인 메뉴
국비지원
국비교육안내
사업주훈련제도란?
사업주훈련절차
환급절차 및 기간
수강생 유의사항
훈련과정개발절차
국비지원안내
내일배움카드란
발급조건
발급절차
수강생 유의사항
국비교육신청
자주하는질문
상담하기
수강신청
프로그래밍
기초입문
프론트엔드/백엔드
클라우드/DB
개발언어/신기술
자격증
IT분야
회계/세무
기타
커리어 ˙ 계발
영상/그래픽
마케팅/오피스
인테리어건축
코스과정
커뮤니티
이지채널
수강후기
ITsue
EASY JOB
EVENT
이벤트
진행중인 이벤트
종료된 이벤트
고객센터
공지사항
자주하는질문
Q&A
다운로드
원격지원요청
내 강의실
CLASS
이지업클래스
lnb영역
수강신청
전체과정
{프로그래밍}
{자격증}
{커리어 ˙ 계발}
컨텐츠 내용
수강신청
과정정보
비환급
사업주지원
근로자카드
모바일지원
추천
SALE
NEW
CSS강의 웹사이트 레이아웃 -실무 클래스-
강사 :
이지업클래스
수강후기 평점 :
0.00
#CSS
#웹사이트
#웹개발
#레이아웃
#코딩
#기초에서
#실무까지
#정복
#완전정복가능
공유하기
네이버 공유
카카오스토리 공유
페이스북 공유
URL복사
CSS강의 웹사이트 레이아웃 -실무 클래스- 과정정보
수강기간
365일
강의구성
87차시
강사
이지업클래스
교육비
120,000원
실결제액
0
원
[
100
% 환급지원]
맛보기
맛보기
맛보기
과정소개
커리큘럼
수강후기
기초부터 시작하는 웹개발 A To Z
180,000
120,000원
맛보기
신청마감
클래스 소개
#CSS #웹사이트 #웹개발 #레이아웃 #코딩 #기초에서 #실무까지 #정복 #완전정복가능
교육 대상
알려 드립니다!
CSS를 통해 제작하는 웹사이트 레이아웃 활용의 기초부터 배우고자 하시는 분들은
누구나 따라할 수 있는 기초 클래스를 참고해주시면 감사하겠습니다~!
CSS강의 : 웹사이트 레이아웃 –기초 클래스- 바로가기
CSS, 알긴 아는데 어떻게 써야 하나요?
웹사이트를 만드는데 있어 필요한 것이 있다면 CSS를 빼놓을 수 없겠죠!?
그래서 웹사이트를 만드는 것에 관심을 갖고 계신 분들이라면 한번쯤은 익히 들어보셨기에 중요성에 대해서도 공감하고 계십니다.
그런데 말입니다.
알고는 있지만 어떻게 써야할지 모를 때는 어떻게 해야 할까요?
중요성은 누구보다 잘 알고 있는데,
도대체 뭘 어떻게 써야 하는지부터 고민이 되고 있지는 않으신가요?
가득이나 시간도 없고, 할 일도 넘쳐나는 이 시간에
뭔가는 만들어 내야 하는 긴박한 상황까지 더해지고 있다면!?
그렇기에 준비했습니다.
CSS를 몰라도 만들어갈 수 있는 방법을 말이죠!
빠르게, 멋지게! 내손으로 만드는 웹사이트!!
앞선 CSS강의 : 웹사이트 레이아웃 -기초 클래스- 과정에 뒤를 이어 다루는 웹사이트 레이아웃 - 실무 클래스- 에서는 기초 클래스로 무장한 능력에 부스터를 달아줄 다양한 테크닉을 바탕으로 레벨업을 하실 수 있도록 준비되었습니다. CSS 레이아웃 최신 기술들을 살펴보고 이를 어떻게 활 용하고 적용하는지를 배워가며 능력을 알차게 다져갈 수 있습니다!
웹사이트를 만들어 보고 싶은 학생도, 일에 치이는 직장인들도,
내 가계를 더욱 멋지게 알리고 싶은 자영업 또는 개인사업자 분들 까지도~!
남녀노소를 불문하고 쉽게! 알차게!! CSS를 활용한 웹사이트를 만들어가는 과정입니다~
오로지 초심자와 입문자의 눈높이에서 안내해드립니다.
어떻게 쓰고, 어떻게 적용하며, 어떻게 변화하는지를 차근차근 따라서 배워보신다면
어느새 웹사이트를 만들고 있는 자신을 발견하시게 될 것입니다.
게다가 CSS를 기반하여 다양한 레이아웃을 만질 수 있는 탄탄한 기본기는 덤으로~!
주요하고 유용한 기능들도 아낌없이 전달해 드리는 커리큘럼이 준비되어 있습니다!
잠시만 틈을 내어 확인해보세요. 뭔가 보여드리겠다니깐요~!?
바로 이 강좌가 정답입니다~!
수강기간 / 환불정책 안내
학습 규정 안내
본 클래스는 총 86차시, 34시간 18분 분량으로 구성되어 있습니다.
해당 클래스는 사전 공지 없이 가격, 할인 정책등이 변동 될 수 있습니다.
(1) 학습 기간
수강 가능 기간은 1년(365일)이며 해당 기간 동안 자유롭게 학습 하실 수 있습니다.
유료수강기간(환불산정기간)은 최초 1개월 (30일)입니다.
유/무료 수강기간 모두 동일한 환경으로 학습이 가능합니다.
수강 시작일(유료 수강기간)은 결제일로부터 기간이 산정되며, 결제를 완료하시면 ‘내 강의실’을 통해 확인 가능합니다.
이지업클래스의 사정으로 인해 수강 시작이 늦어진 경우에는 해당 일정 만큼의 수강기간이 연장됩니다.
(2) 환불 규정
이지업클래스의 환불규정은 아래와 같습니다.
* 전액환불
수강 시작 후 14일 이내, 5차시 & 5%(시간) 미만 수강 시
* 일부환불
수강 시작 후 14일 이내, 10차시 & 10% 미만 시간 수강시:
실 결제금액의 2/3을 환불
수강 시작 후 14일 이내, 15차시 & 15% 미만 수강시:
실 결제금액의 1/3을 환불
요청일 기준 수강 시작 후 15일 초과 또는 15차시 또는 15% 이상 수강시 : 환불금액 없음
(3) 주의 사항
본 강의는 상황에 따라 사전 공지나 안내 없이 할인이 조기 마감 또는 연장 될 수 있습니다.
천재지변, 폐업 등 서비스 중단이 불가피한 상황에는 사전 안내 없이 종료될 수 있습니다.
무제한 강의의 경우, 내 강의실 수강기간 연장 신청을 통해 무제한으로 연장 가능합니다.
구매한 무제한 강의의 연장 진행을 하지 않아 종료될 경우 복구되지 않습니다.
강의 컨텐츠는 향후 이지업클래스의 사정에 따라 추가 또는 업데이트 될 수 있습니다
이 강의를 담당하시는 강사님을 소개합니다
김동준
- 평소 CSS를 배우는데 어려움을 겪으신 분들도 충분히 학습하실 수 있는 과정입니다.
- CSS에 관한 정보가 없는 분들도 차근차근 배워가실 수 있는 커리큘럼으로 구성되어 있습니다.
- 단시간에 직접 웹사이트를 만들고자 하는 모든 분들께 적합한 난이도로 제작된 클래스 입니다.
‘안녕하세요. 김동준 강사 입니다.’
공공데이터 API 기초 활용 클래스를 담당하고 계신 김동준 강사님은 전문 분야 출신의 이론과 현 장 경험을 바탕으로 다양한 업계에서 많은 인재들을 지도해주고 계십니다.
주요 이력
- 제이에스미디어 웹에이전시 팀장
- 인터넷교육방송 팀장
- 한훈직업전문학교 온라인 팀장
- 다수의 직업훈련학교 등 강의
수료기준
평가기준
진도율
총점
반영비율
100%
100점
이수(과락)기준
60%
60점
※ 수료기준은 각 평가항목의 점수가 수료기준 점수 이상이고 총점이
60점
이상이어야 합니다.
강사명
이지업클래스
강사약력
커리큘럼
본 클래스를 수강하시면서 배우게 되는 과정입니다.
커리큘럼
차시
강의명
맛보기 영상
13분
01_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.1
총 15강
5시 19분
1강 강의개요
25분
2강 웹사이트 제작의 흐름(1)
20분
3강 웹사이트 제작의 흐름(2)
13분
4강 아톰 에디터 최신버전 설치하기
12분
5강 기존 예제의 원본 6단계 수정 과정
33분
6강 레이아웃 수정 코딩 실습 1-2단계
15분
7강 레이아웃 수정 코딩 실습 3-4단계
15분
8강 박스 3개를 메인이미지 박스 위로 띄워서 겹치기(1)
21분
9강 박스 3개를 메인이미지 박스 위로 띄워서 겹치기(2)
19분
10강 박스 3개를 메인이미지 박스 위로 띄워서 겹치기(3)
14분
11강 아톰 기본설정 변경하기
10분
12강 좌우 컨테이너 박스 가운데 정렬 및 부유 시키기
26분
13강 포지션 속성에 따른 z, y, z축 공간좌표 이해
19분
14강 3차원 공간좌표 z축 포지션 속성 실습
29분
15강 포지션 속성의 다른 속성 값들 이해 및 마무리
43분
02_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.2
총 21강
8시 51분
16강 반응형 웹사이트 레이아웃 - 마크업 및 기본 구조
16분
17강 반응형 웹사이트 레이아웃 - PC버전 CSS 코딩하기
18분
18강 반응형 웹사이트 레이아웃 - 박스 너비 수치 정확히 계산하기
32분
19강 반응형 웹사이트 레이아웃 - 보더값이 들어간 경우의 계산 및 박스사이징 사용
23분
20강 미디어쿼리를 사용한 모바일 최적화 코딩
33분
21강 height값을 auto로 수정했을 경우 반응형 사이트의 모습은
12분
22강 Full Coding - 기본 프레임 구축하기
27분
23강 Full Coding - inner-div-box 삽입하기
16분
24강 Full Coding - inner-div-box 각 영역에 삽입하기
23분
25강 Full Coding - 메인박스에 박스 3개 삽입하기
21분
26강 Full Coding - 박스 3개 부유시키기
19분
27강 position 속성에 대한 기초이론1
38분
28강 position 속성에 대한 기초이론2
36분
29강 position 속성에 대한 기초이론3
46분
30강 flexbox 수평정렬(1)
31분
31강 flexbox 수평정렬(2)
26분
32강 flexbox 수직정렬(1)
25분
33강 flexbox 수직정렬(2)
21분
34강 baseline 첫번째 예제 - 별도의 클래스 만들어서 적용하기
22분
35강 Tip 박스 정사각형 모양으로 만들기 팁 2가지
9분
36강 baseline에 대한 고찰
28분
03_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.3
총 20강
7시 2분
37강 강의개요
37분
38강 캐러셀 슬라이드 배너 적용하기 위한 CDN 삽입하기
27분
39강 부트스트랩 삽입 후 레이아웃 깨지는 현상 원인과 해결 방법
15분
40강 각각의 엘리먼트 용어(영어단어) 암기하기
10분
41강 캐러셀 슬라이드 배너를 위한 기본 마크업 하기
24분
42강 무료로 이미지와 동영상을 이용할 수 있는 사이트 알아보기
14분
43강 슬라이드 배너 이미지 삽입하기
13분
44강 이미지 삽입 후 레이아웃이 일부 깨지는 현상에 대해서
11분
45강 command tag를 사용하여 캐러셀 슬라이드 배너 동작시키기
21분
46강 캐러셀 슬라이드 배너에 자막 넣기
21분
47강 초보자를 위한 css 오류 잡는 방법
11분
48강 이미지 사이즈 일괄수정 클래스 적용 및 캡션 배경색 넣기
13분
49강 이미지에 링크 걸고 링크 없는 이미지 고려하여 2개 클래스 적용하기
12분
50강 가독성을 위한 배경색 클래스 지정하고 대소문자 적용하기
16분
51강 Left and Right Controls 구현
30분
52강 indicators 동작 구현
21분
53강 캐러셀 슬라이드 배너 핵심 pt 정리
44분
54강 아이콘 이미지 수정하기(1)
27분
55강 아이콘 이미지 수정하기(2)
24분
56강 아이콘 이미지 수정하기(3)
23분
04_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.4
총 14강
5시 34분
57강 캐러셀 이미지 가로 너비 조절하기
31분
58강 부트스트랩 3 버전과 4 버전의 호환성 및 차이점(1)
22분
59강 부트스트랩 3 버전과 4 버전의 호환성 및 차이점(2)
22분
60강 네비게이션 상단 메뉴 만들기 개요 및 전체 구조 미리보기
13분
61강 상단메뉴 마크업 및 CSS 코딩(1) - 로고, (2) - li
21분
62강 상단메뉴 마크업 및 CSS 코딩(3) - 센저리프 계열 폰트 적용, (4) - flexbox
37분
63강 우측 로그인 버튼 만들기 및 메뉴 수평 정렬
14분
64강 스무스한 애니메이션 적용을 위한 Transition 속성 사용하기
26분
65강 트랜지션 속성 4가지 정리하기
27분
66강 트랜지션 옵션들 정리
15분
67강 Transition linear ease 옵션의 차이점 눈으로 확인하기
19분
68강 상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(1)
12분
69강 상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(2)
31분
70강 상단 네비게이션 디자인과 하단 디자인 PT 정리
38분
05_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.5
총 16강
7시 32분
71강 하단 디자인 레이아웃(1)
36분
72강 하단 디자인 레이아웃(2)
34분
73강 하단 디자인 레이아웃(3)
30분
74강 하단 디자인 레이아웃(4) - 마무리
20분
75강 Grid 강의개요 및 Grid 이전의 전통적인 레이아웃 구성
37분
76강 Grid 기술을 사용한 레이아웃 구성(1) - grid
19분
77강 Grid 기술을 사용한 레이아웃 구성(2) - fr 단위
36분
78강 Grid 기술을 사용한 레이아웃 구성(3) - columns
19분
79강 Grid 기술을 사용한 레이아웃 구성(4) - areas
43분
80강 Grid 기술을 사용한 레이아웃 구성(5) - other options
28분
81강 Grid 기술을 사용한 레이아웃 구성(6) - perpendicular merge
20분
82강 Grid의 새로운 단위 fr 개념 좀 더 자세히 이해하기(1)
21분
83강 Grid의 새로운 단위 fr 개념 좀 더 자세히 이해하기(2)
33분
84강 Grid fr 단위 auto 자세히 이해하기
34분
85강 Grid 레이아웃을 상단메뉴에 활용하는 실전 연습(1)
17분
86강 Grid 레이아웃을 상단메뉴에 활용하는 실전 연습(2)
16분
수강후기
수강생분들이 직접 남겨주신 후기입니다.
수강후기 더보기