위 강좌 이미지를 클릭하시면 강의목차(table of contents)로 바로 이동합니다. 본 강좌는 다운로드 방식 강좌입니다. 따라서, 수강신청 후 내pc로 다운 저장하여 학습합니다.
| 수강기간 | VIP 프리패스로 이용시10개월 단과로 이용시2개월 |
|---|---|
| 교육방식 | 다운로드 방식 - 강의를 내pc로 다운로드 받아서 저장해놓고 학습하는 방식 |
| 수강금액 | 110,000원 / 2개월 (VIP 프리패스로 이용시는 무료 이용이며, 프리패스 수강기간이 적용) |
| 자료제공 | 제공되는 자료가 있는 경우 1회차 목차에서 강의소스 및 첨부파일 제공 |
상세설명 및 참고사항
| 1 강 |
HTML이란 무엇이고 무엇을 배우는 것인가 [전체 강의소스 다운]
|
|---|
| 2 강 | HTML 태그별 배우는 난이도가 어려운거는 |
|---|
| 3 강 | HTML CSS 종합예술 - 레이아웃 예제 미리보기 |
|---|
| 4 강 | 코딩 전문 에디터 아톰 - 학습을 위한 준비물 |
|---|
| 5 강 | 코딩 전문 에디터 아톰 - 설치하기 |
|---|
| 6 강 | 코딩 전문 에디터 아톰 - welcome 페이지 숨기기 |
|---|
| 7 강 | 코딩 전문 에디터 아톰 - 기본환경 설정하기 |
|---|
| 8 강 | HTML5 기본적인 형태 |
|---|
| 9 강 | 한글이 깨져서 나타나보일 때 |
|---|
| 10 강 | title 태그 |
|---|
| 11 강 | 태그 들여쓰기에 대해서 |
|---|
| 12 강 | 텍스트태그 - p |
|---|
| 13 강 | 텍스트태그 - br |
|---|
| 14 강 | 텍스트태그 - pre |
|---|
| 15 강 | 텍스트태그 - b |
|---|
| 16 강 | 텍스트태그 - i |
|---|
| 17 강 | 텍스트태그 - u |
|---|
| 18 강 | 텍스트태그 - strike |
|---|
| 19 강 | 텍스트태그 - 제목태그 |
|---|
| 20 강 | 텍스트태그 - 한자어 표기 |
|---|
| 21 강 | CSS로 메이크업(화장) 시켜보자 - 한글 표기음 축소 |
|---|
| 22 강 | 이미지태그 사용법1 |
|---|
| 23 강 | 이미지태그 사용법2 |
|---|
| 24 강 | a 링크 태그 사용법1 |
|---|
| 25 강 | a 링크 태그 사용법2 |
|---|
| 26 강 | 번호없는 목록 태그 ul |
|---|
| 27 강 | 번호있는 목록 태그 ol |
|---|
| 28 강 | 목록 태그 디자인타입 3가지 및 안보이게 css로 처리 |
|---|
| 29 강 | 쉬어가는 페이지 - 목록 태그가 실제 많이 쓰이는 곳은 |
|---|
| 30 강 | 테이블태그1 - 가장 기본적인 형태 |
|---|
| 31 강 | 테이블태그2 - 용어이해 cell |
|---|
| 32 강 | 테이블태그3 - cellpadding cellspacing |
|---|
| 33 강 | 테이블태그4 - Cell 병합 |
|---|
| 34 강 | 테이블태그5 - 다중 Cell 병합 |
|---|
| 35 강 | 테이블태그6 - Raw(줄) 병합 |
|---|
| 36 강 | 테이블태그7 - Raw(줄) 병합 여러가지 실습 테스트 |
|---|
| 37 강 | Video 태그 사용법1 - 가장 기본적인 형태 |
|---|
| 38 강 | Video 태그 사용법2 - 동영상 컨트롤 제어 및 자동플레이 |
|---|
| 39 강 | Form1_폼 태그 기본 사용법 |
|---|
| 40 강 | Form2_input |
|---|
| 41 강 | Form3_input_password |
|---|
| 42 강 | Form4_input_checkbox |
|---|
| 43 강 | Form5_input_checkbox_multi |
|---|
| 44 강 | Form6_input_checkbox_multi_checked |
|---|
| 45 강 | Form7_input_radio |
|---|
| 46 강 | Form8_input_button |
|---|
| 47 강 | Form9_input_file |
|---|
| 48 강 | Form10_input_search |
|---|
| 49 강 | Form11_input_reset |
|---|
| 50 강 | Form12_input_submit |
|---|
| 51 강 | Form13_select |
|---|
| 52 강 | Form14_select_selected |
|---|
| 53 강 | Form15_label |
|---|
| 54 강 | Form16_label2 |
|---|
| 55 강 | Form17_placeholder |
|---|
| 56 강 | Form18_input_size |
|---|
| 57 강 | Form19_textarea |
|---|
| 58 강 | Form20_fieldset |
|---|
| 59 강 | Form21_fieldset2 |
|---|
| 60 강 | Form22_input_hidden |
|---|
| 61 강 | 00_CSS란 무엇이고 선수학습은 무엇인가 |
|---|
| 62 강 | 01_CSS Annotation |
|---|
| 63 강 | 02_CSS 작성법1 - inline |
|---|
| 64 강 | 03_CSS 작성법2 - embedded |
|---|
| 65 강 | 04_CSS 작성법3 - external |
|---|
| 66 강 | 05_외부 css 파일 연동시 문자코드 기술하기 |
|---|
| 67 강 | 06_import 방식으로 외부 css 파일 불러오기 |
|---|
| 68 강 | 07_css 작성방식 4가지 비교 |
|---|
| 69 강 | 08_css 범위와 들여쓰기 |
|---|
| 70 강 | 09_css 상속에 대해서 |
|---|
| 71 강 | 10_외부 import 파일의 속성을 바꿔서 사용하기 |
|---|
| 72 강 | 11_BreakTime - CSS는 어떤걸 배우는 건가요 |
|---|
| 73 강 | 12_div 태그는 박스모델이다 특징과 속성 이해 |
|---|
| 74 강 | 13_div 태그 속성 변경 border padding margin |
|---|
| 75 강 | 14_div 태그 속성 변경2 |
|---|
| 76 강 | 15_css 코드 기술 방식에 대해서 |
|---|
| 77 강 | 16_글자 수직으로 가운데 정렬하는 Tip |
|---|
| 78 강 | 17_css 초기화 작업이 뭔가요 |
|---|
| 79 강 | 18_마진영 오토 - div 박스 가운데 정렬하기 |
|---|
| 80 강 | 19_헤갈리는 패딩 옵션 값 정복하기1 |
|---|
| 81 강 | 20_헤갈리는 패딩 옵션 2가지 값만 사용한건 뭐지 |
|---|
| 82 강 | 21_padding 옵션 값 3개만 있는 경우 |
|---|
| 83 강 | 22_margin 속성도 padding 과 똑같다 |
|---|
| 84 강 | 23_인라인 방식과 블럭 속성의 개념 및 차이(중요) |
|---|
| 85 강 | 24_다른 태그들의 인라인 블럭 속성 알아내는 방법 |
|---|
| 86 강 | 25_인라인 속성과 블럭 속성 종합정리 |
|---|
| 87 강 | 26_인라인 속성과 블럭 속성 종합정리 - 실습 |
|---|
| 88 강 | 27_인라인 블럭 속성을 다 가지는 인라인블럭 속성 |
|---|
| 89 강 | 28_패딩 옵션 4방향을 명시적으로 지정하는 방법(보강) |
|---|
| 90 강 | 29_블럭 속성을 사용한 세로 메뉴 만들기 |
|---|
| 91 강 | 30_display 인라인블럭 속성 이해 더 나아가기 |
|---|
| 92 강 | 31_선택자란 무엇이고 무엇을 학습하는건가 |
|---|
| 93 강 | 32_타입 선택자 - 태그 선택자 |
|---|
| 94 강 | 33_클래스 선택자1 |
|---|
| 95 강 | 34_클래스 선택자2 |
|---|
| 96 강 | 35_클래스 선택자3 |
|---|
| 97 강 | 36_클래스 선택자4 - 타입선택자와 클랙스선택자 혼합 |
|---|
| 98 강 | 37_아이디 선택자1 |
|---|
| 99 강 | 38_아이디 선택자2 |
|---|
| 100 강 | 39_아이디 선택자3 |
|---|
| 101 강 | 40_지금까지 배운 선택자 3개 종합연습 |
|---|
| 102 강 | 41_css 코딩연습(1) - 1 마크업 2 네이밍작성 |
|---|
| 103 강 | 42_css 코딩연습(2) - 3 스타일선언 4 명시적 선언이란 |
|---|
| 104 강 | 43_css 코딩연습(3) - 명시적인 선언의 우선순위 |
|---|
| 105 강 | 44_css 코딩연습(4) - 스타일 상속 및 우선순위 |
|---|
| 106 강 | 45_전체 선택자 |
|---|
| 107 강 | 46_선택자 Grouping |
|---|
| 108 강 | 47_쉬어가는 Breaktime |
|---|
| 109 강 | 48_폰트 색상 적용하는 다양한 방법 3가지 |
|---|
| 110 강 | 49_Color Picker로 원하는 색상 추출하기 |
|---|
| 111 강 | 50_폰트 속성(1) - font-family font-size |
|---|
| 112 강 | 51_폰트 속성(2) - 쌍따옴표 홑따옴표 영문이름명 띄어쓰기 |
|---|
| 113 강 | 52_폰트 속성(3) - 나눔고딕 및 영문이름 표기원칙 |
|---|
| 114 강 | 53_폰트 속성(4) - 영어는 영문폰트로 나타내고 싶을 때는 |
|---|
| 115 강 | 54_폰트 속성(4) - 영문폰트 적용시 주의사항 |
|---|
| 116 강 | 55_폰트 속성(5) - 폰트 스타일 italic normal oblique |
|---|
| 117 강 | 56_폰트 속성(6) - font-weight bold 100 900 단위로 주기 |
|---|
| 118 강 | 57_폰트 속성(7) - 글자 간격을 조절하려면 |
|---|
| 119 강 | 58_serif sans serif monospace 서체가 뭔가요 |
|---|
| 120 강 | 59_serif sans serif monospace 실습하기 |
|---|
| 121 강 | 60_폰트 속성 상속을 개발자도구로 확인하기 |
|---|
| 122 강 | 61_글자 라인간의 간격을 넓히고 줄이고 싶다면 |
|---|
| 123 강 | 62_텍스트에 선긋기(1) - underline overline line-through |
|---|
| 124 강 | 63_텍스트에 선긋기(2) - 아래 위로 선긋기 선 없애기 |
|---|
| 125 강 | 64_font-family 사용법 종합정리 및 generic family 정확히 이해하기 |
|---|
| 126 강 | 65_텍스트에 은은한 그림자효과 주기 |
|---|
| 127 강 | 66_div 박스모델에 은은한 그림자효과 주기 |
|---|
| 128 강 | 67_모든 텍스트를 대문자로 바꾸려면 |
|---|
| 129 강 | 68_텍스트 정렬하기 - justify center left right |
|---|
| 130 강 | 69_박스 영역을 넘어가는 긴문장 잘라서 박스안으로 넣으려면 |
|---|
| 131 강 | 70_글자 단위로 잘라내기 및 단어 단위로 잘라내기 |
|---|
| 132 강 | 71_단어 사이의 간격을 벌려주고 싶다면 |
|---|
| 133 강 | 72_white-spacing 옵션 특징 3가지 - 줄바꿈 공백 줄라인 |
|---|
| 134 강 | 73_white-spacing pre pre-line 특징 정리하기 |
|---|
| 135 강 | 74_white-spacing pre-wrap 특징 정리하기 |
|---|
| 136 강 | 75_긴 텍스트를 2단으로 나누기 - column-count |
|---|
| 137 강 | 76_단과 단 사이의 공간인 gap을 넓혀주려면 |
|---|
| 138 강 | 77_단과 단 사이에 막대 bar 를 넣고 스타일 적용하기 |
|---|
| 139 강 | 78_쉬어가는 차원에서 간단한 연습문제 |
|---|
| 140 강 | 79_column-rule 스타일을 축약형으로 짧게 한줄로 쓰려면 |
|---|
| 141 강 | 80_막대기 bar 스타일 다양하게 지정해보기 |
|---|
| 142 강 | 81_아주 중요한 반응형 속성으로 컬럼 단 조절하기 ★★★ |
|---|
| 143 강 | 82_컬럼 내부 상단에 제목을 넣어 중앙에 정렬시키기 |
|---|
| 144 강 | 83_컬럼 내부 상단에 제목 좌우로 정렬 |
|---|
| 145 강 | 84_자손 선택자와 자식 선택자의 개념 이해하기(중요) |
|---|
| 146 강 | 85_자손 선택자 자식 선택자 - 연습 및 개념복습 |
|---|
| 147 강 | 86_pseudo-class 개념이해 및 사용법 |
|---|
| 148 강 | 87_다소 어려운 nth-child 선택자 완벽히 이해시킨다(1) |
|---|
| 149 강 | 88_다소 어려운 nth-child 선택자 완벽히 이해시킨다(2) |
|---|
| 150 강 | 89_다소 어려운 nth-child 선택자 완벽히 이해시킨다(3) |
|---|
| 151 강 | 90_nth-child 완벽이해(4) - 왼쪽메뉴 예제1 |
|---|
| 152 강 | 91_nth-child 완벽이해(5) - 왼쪽메뉴 예제2 |
|---|
| 153 강 | 92_nth-child 완벽이해(6) - 게시판 글목록 예제 |
|---|
| 154 강 | 93_배경 색 지정하기 |
|---|
| 155 강 | 94_배경 색상의 상속에 대해서 |
|---|
| 156 강 | 95_배경으로 이미지를 지정해서 넣기 |
|---|
| 157 강 | 96_div 박스 배경으로 이미지를 지정해서 넣기 |
|---|
| 158 강 | 97_배경 색상을 상속받기를 원한다면 inherit |
|---|
| 159 강 | 98_배경 색을 지정해서 넣어주려면 background-clip |
|---|
| 160 강 | 99_배경 이미지 반복해서 지정하는 방법 |
|---|
| 161 강 | 100_배경이미지를 박스 사이즈에 맞춰서 출력하기 background-size |
|---|
| 162 강 | 101_배경이미지 픽셀과 퍼센트 단위로 사이즈 조절하기 |
|---|
| 163 강 | 102_배경이미지 사이즈 값을 하나만 주는 경우는 |
|---|
| 164 강 | 103_배경이미지 위치를 잡아주고 싶다면 background-position |
|---|
| 165 강 | 104_배경이미지 위치를 픽셀 단위로 콕 찍어서 지정하기 |
|---|
| 166 강 | 105_background 속성과 값들을 한 라인에 축약형으로 쓰는 방법 |
|---|
| 167 강 | 106_Position 속성 개념 이해하기 |
|---|
| 168 강 | 107_Position 속성 이해하기 - static |
|---|
| 169 강 | 108_Position 속성 이해하기 - relative 완벽이해(1) |
|---|
| 170 강 | 109_Position 속성 이해하기 - relative 완벽이해(2) |
|---|
| 171 강 | 110_Position 속성 이해하기 - relative 완벽이해(3) |
|---|
| 172 강 | 111_relative 속성을 사용해서 가운데 정렬시키기 |
|---|
| 173 강 | 112_relative 적용시 주의할 사항 |
|---|
| 174 강 | 113_영역을 벗어난 경우 안보이게 감추기 overflow - hidden |
|---|
| 175 강 | 114_가장 많이 사용하는 포지션 속성 absolute 완벽이해(1) |
|---|
| 176 강 | 115_가장 많이 사용하는 포지션 속성 absolute 완벽이해(2) |
|---|
| 177 강 | 116_포지션을 이용하여 원하는 위치에 배너박스 고정시키려면 |
|---|
| 178 강 | 117_쇼핑몰 우측에 고정된 배너처럼 만들어보기 |
|---|
