클래스 소개
#CSS #웹사이트 #웹개발 #레이아웃 #코딩 #기초에서 #실무까지 #정복 #완전정복가능
교육 대상
알려 드립니다!
CSS를 통해 제작하는 웹사이트 레이아웃 활용의 기초부터 배우고자 하시는 분들은
누구나 따라할 수 있는 기초 클래스를 참고해주시면 감사하겠습니다~!
CSS강의 : 웹사이트 레이아웃 –기초 클래스- 바로가기
누구나 따라할 수 있는 기초 클래스를 참고해주시면 감사하겠습니다~!
CSS강의 : 웹사이트 레이아웃 –기초 클래스- 바로가기
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 기초 활용 클래스를 담당하고 계신 김동준 강사님은 전문 분야 출신의 이론과 현 장 경험을 바탕으로 다양한 업계에서 많은 인재들을 지도해주고 계십니다.
- CSS에 관한 정보가 없는 분들도 차근차근 배워가실 수 있는 커리큘럼으로 구성되어 있습니다.
- 단시간에 직접 웹사이트를 만들고자 하는 모든 분들께 적합한 난이도로 제작된 클래스 입니다.
‘안녕하세요. 김동준 강사 입니다.’
공공데이터 API 기초 활용 클래스를 담당하고 계신 김동준 강사님은 전문 분야 출신의 이론과 현 장 경험을 바탕으로 다양한 업계에서 많은 인재들을 지도해주고 계십니다.
주요 이력
- 제이에스미디어 웹에이전시 팀장- 인터넷교육방송 팀장
- 한훈직업전문학교 온라인 팀장
- 다수의 직업훈련학교 등 강의
커리큘럼
| 맛보기 영상 | |
| 01_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.1 | |
| 1강 강의개요 | |
| 2강 웹사이트 제작의 흐름(1) | |
| 3강 웹사이트 제작의 흐름(2) | |
| 4강 아톰 에디터 최신버전 설치하기 | |
| 5강 기존 예제의 원본 6단계 수정 과정 | |
| 6강 레이아웃 수정 코딩 실습 1-2단계 | |
| 7강 레이아웃 수정 코딩 실습 3-4단계 | |
| 8강 박스 3개를 메인이미지 박스 위로 띄워서 겹치기(1) | |
| 9강 박스 3개를 메인이미지 박스 위로 띄워서 겹치기(2) | |
| 10강 박스 3개를 메인이미지 박스 위로 띄워서 겹치기(3) | |
| 11강 아톰 기본설정 변경하기 | |
| 12강 좌우 컨테이너 박스 가운데 정렬 및 부유 시키기 | |
| 13강 포지션 속성에 따른 z, y, z축 공간좌표 이해 | |
| 14강 3차원 공간좌표 z축 포지션 속성 실습 | |
| 15강 포지션 속성의 다른 속성 값들 이해 및 마무리 | |
| 02_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.2 | |
| 16강 반응형 웹사이트 레이아웃 - 마크업 및 기본 구조 | |
| 17강 반응형 웹사이트 레이아웃 - PC버전 CSS 코딩하기 | |
| 18강 반응형 웹사이트 레이아웃 - 박스 너비 수치 정확히 계산하기 | |
| 19강 반응형 웹사이트 레이아웃 - 보더값이 들어간 경우의 계산 및 박스사이징 사용 | |
| 20강 미디어쿼리를 사용한 모바일 최적화 코딩 | |
| 21강 height값을 auto로 수정했을 경우 반응형 사이트의 모습은 | |
| 22강 Full Coding - 기본 프레임 구축하기 | |
| 23강 Full Coding - inner-div-box 삽입하기 | |
| 24강 Full Coding - inner-div-box 각 영역에 삽입하기 | |
| 25강 Full Coding - 메인박스에 박스 3개 삽입하기 | |
| 26강 Full Coding - 박스 3개 부유시키기 | |
| 27강 position 속성에 대한 기초이론1 | |
| 28강 position 속성에 대한 기초이론2 | |
| 29강 position 속성에 대한 기초이론3 | |
| 30강 flexbox 수평정렬(1) | |
| 31강 flexbox 수평정렬(2) | |
| 32강 flexbox 수직정렬(1) | |
| 33강 flexbox 수직정렬(2) | |
| 34강 baseline 첫번째 예제 - 별도의 클래스 만들어서 적용하기 | |
| 35강 Tip 박스 정사각형 모양으로 만들기 팁 2가지 | |
| 36강 baseline에 대한 고찰 | |
| 03_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.3 | |
| 37강 강의개요 | |
| 38강 캐러셀 슬라이드 배너 적용하기 위한 CDN 삽입하기 | |
| 39강 부트스트랩 삽입 후 레이아웃 깨지는 현상 원인과 해결 방법 | |
| 40강 각각의 엘리먼트 용어(영어단어) 암기하기 | |
| 41강 캐러셀 슬라이드 배너를 위한 기본 마크업 하기 | |
| 42강 무료로 이미지와 동영상을 이용할 수 있는 사이트 알아보기 | |
| 43강 슬라이드 배너 이미지 삽입하기 | |
| 44강 이미지 삽입 후 레이아웃이 일부 깨지는 현상에 대해서 | |
| 45강 command tag를 사용하여 캐러셀 슬라이드 배너 동작시키기 | |
| 46강 캐러셀 슬라이드 배너에 자막 넣기 | |
| 47강 초보자를 위한 css 오류 잡는 방법 | |
| 48강 이미지 사이즈 일괄수정 클래스 적용 및 캡션 배경색 넣기 | |
| 49강 이미지에 링크 걸고 링크 없는 이미지 고려하여 2개 클래스 적용하기 | |
| 50강 가독성을 위한 배경색 클래스 지정하고 대소문자 적용하기 | |
| 51강 Left and Right Controls 구현 | |
| 52강 indicators 동작 구현 | |
| 53강 캐러셀 슬라이드 배너 핵심 pt 정리 | |
| 54강 아이콘 이미지 수정하기(1) | |
| 55강 아이콘 이미지 수정하기(2) | |
| 56강 아이콘 이미지 수정하기(3) | |
| 04_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.4 | |
| 57강 캐러셀 이미지 가로 너비 조절하기 | |
| 58강 부트스트랩 3 버전과 4 버전의 호환성 및 차이점(1) | |
| 59강 부트스트랩 3 버전과 4 버전의 호환성 및 차이점(2) | |
| 60강 네비게이션 상단 메뉴 만들기 개요 및 전체 구조 미리보기 | |
| 61강 상단메뉴 마크업 및 CSS 코딩(1) - 로고, (2) - li | |
| 62강 상단메뉴 마크업 및 CSS 코딩(3) - 센저리프 계열 폰트 적용, (4) - flexbox | |
| 63강 우측 로그인 버튼 만들기 및 메뉴 수평 정렬 | |
| 64강 스무스한 애니메이션 적용을 위한 Transition 속성 사용하기 | |
| 65강 트랜지션 속성 4가지 정리하기 | |
| 66강 트랜지션 옵션들 정리 | |
| 67강 Transition linear ease 옵션의 차이점 눈으로 확인하기 | |
| 68강 상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(1) | |
| 69강 상단메뉴 우측 회원가입 버튼 디자인 클래스 처리하기(2) | |
| 70강 상단 네비게이션 디자인과 하단 디자인 PT 정리 | |
| 05_CSS 기반의 웹사이트 레이아웃 정복하기 (활용강좌) Part.5 | |
| 71강 하단 디자인 레이아웃(1) | |
| 72강 하단 디자인 레이아웃(2) | |
| 73강 하단 디자인 레이아웃(3) | |
| 74강 하단 디자인 레이아웃(4) - 마무리 | |
| 75강 Grid 강의개요 및 Grid 이전의 전통적인 레이아웃 구성 | |
| 76강 Grid 기술을 사용한 레이아웃 구성(1) - grid | |
| 77강 Grid 기술을 사용한 레이아웃 구성(2) - fr 단위 | |
| 78강 Grid 기술을 사용한 레이아웃 구성(3) - columns | |
| 79강 Grid 기술을 사용한 레이아웃 구성(4) - areas | |
| 80강 Grid 기술을 사용한 레이아웃 구성(5) - other options | |
| 81강 Grid 기술을 사용한 레이아웃 구성(6) - perpendicular merge | |
| 82강 Grid의 새로운 단위 fr 개념 좀 더 자세히 이해하기(1) | |
| 83강 Grid의 새로운 단위 fr 개념 좀 더 자세히 이해하기(2) | |
| 84강 Grid fr 단위 auto 자세히 이해하기 | |
| 85강 Grid 레이아웃을 상단메뉴에 활용하는 실전 연습(1) | |
| 86강 Grid 레이아웃을 상단메뉴에 활용하는 실전 연습(2) |