| 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_쇼핑몰 우측에 고정된 배너처럼 만들어보기
|
|
|
