웹표준 [입문 + 고급]
![웹표준 [입문 + 고급]](/img_file/builder/Date/201510136495bestcss_a.jpg)
웹표준 [입문 + 고급] 사용법 강좌
웹개발을 시작하는 분들이 반드시 이용해야 하며 전문가적 형태로 강의구성이 진행되고 있어 단계에 따라 체계적으로 학습할 수 있습니다. 입문자뿐만 아니라 전문가에게도 도움이 되는 내용입니다.
- 웹표준 [입문]
-
01.27분 웹표준 스킬의 폭풍성장을 위한 필수과정! 1
웹문서 및 소스 관련 팁
책갈피 : [00:00] 웹문서 개념/[00:25] doctype html/[00:43] style type/[00:52] 웹문서에 css 적용하는 방법/[01:06] 꿀팁/[02:34] p태그, div태그/[02:46] body태그/[03:03] css 적용/[03:15] 꿀팁/[03:37] 콜론과 세미콜론의 차이/[03:57] font size 단위(px, em, pt)/[04:10] 꿀팁/[04:16] em이 사용되는 경우/[04:25] 꿀팁/[05:03] 결과 확인/[05:53] 꿀팁/[06:03] 꿀팁/[07:05] 꿀팁/[07:55] color/[08:40] 꿀팁/[10:03]color 값 우선 순위/[10:27] 꿀팁/[11:10] 꿀팁/[11:45] 요소별 줄 바꿈/[12:09] 주석처리 방법/[12:43] 아이디에 css 적용/[13:08] 아이디값 코딩/[13:12] 꿀팁/[13:17] 꿀팁/[13:33] 꿀팁/[13:49] sans-serif/[13:56] 꿀팁/[14:24] body 내용 생성/[14:41] 꿀팁/[15:35] 클래스에 css 적용/[15:56] font-size, color/[16:13] 꿀팁/[16:51] img/[17:16] 이미지 테두리 없애기/[17:29] 꿀팁/[17:33] border:0 none/[18:33] img, fieldset, iframe/[19:03] a태그/[20:04] 꿀팁/[20:36] 꿀팁/[20:53] 꿀팁/[21:10] 꿀팁/[21:17] a:hover/[21:22] a;active/[21:23] a:visited/[21:39] 꿀팁/[22:04] a:hover css 선언/[22:09] 꿀팁/[22:13] color/[22:15] 꿀팁/[23:15] 꿀팁/[23:16] a;active css 선언/[23:51] background-color/[24:36] 강의자료 소스 관련 팁/[24:46] 꿀팁/[25:00] 꿀팁
-
02.27분 웹표준 스킬의 폭풍성장을 위한 필수과정! 2
마우스 오버 및 내부 외부
책갈피 : [00:00] select/[00:39] ul 목록으로 select 작성/[01:12] 꿀팁/[01:17] 꿀팁/[01:26] select/[01:54] font-size, font-family/[02:05] color/[02:19] id값으로 select 작성/[02:34] 꿀팁/[02:36] color, background-color/[03:01] id값 정의/[03:23] 텍스트 사이즈/[03:36] 내가 원하는 옵션에 id값 정의/[04:22] 꿀팁/[04:58] border-color/[05:21] 꿀팁/[06:07] 꿀팁/[06:30] div, br 태그, input/[07:00] input, textarea/[07:36] 꿀팁/[07:40] color, font-size, font-family/[07:47] 꿀팁/[08:05] maxlength/[08:33] border-color/[09:21]효율적으로 css를 관리하는 방법/[10:22] css 정의/[12:00] class값 추가 /[12:17] .alzio4 정의/[12:28] 꿀팁/[12:31] select name/[13:14] .alzio5 정의/[13:23] .alzio5 입력값/[14:19] border: solid/[15:33] css 정의/[16:49] style=width/[17:42] input에 style=width 적용/[18:31] .alzio100 정의/[18:40] width/[19:47] 꿀팁/[20:01] line-height/[20:35] line-height 줄간격/[21:05] 꿀팁/[22:20] hr태그/[22:56] 꿀팁/[23:05] display:none/[23:29] br태그/[23:45] hr 주석처리/[23:53] width/[24:15] border-top solid/[25:54] 내부외부여백/[26:15] 꿀팁
-
03.31분 웹표준 스킬의 폭풍성장을 위한 필수과정! 3
박스구현, 넓이값 계산방법, 상속관계 차별화
책갈피 : [00:01] 제목타이틀/[00:22] H1~H6태그/[00:31] H1/[00:51] H6/[01:21] h1,h2,h3,h4,h5,h6/[02:20] 꿀팁/[02:23] 꿀팁/[03:06] .alzio6 정의/[03:22] color, font-size, line-height/[03:26] 꿀팁/[03:35] 꿀팁/[03:57] 꿀팁/[04:21] 실무내용/[04:29] span태그, p태그/[04:55] CSS내용/[05:16] .alzio7 정의/[05:49] width, height/[06:27] 꿀팁/[06:39] 결과확인/[07:58] p태크변경/[08:45] .alzio7 p 정의/[08:58] 꿀팁/[09:18] .alzio7 span 정의/[09:53] color/[11:21] 꿀팁/[11:59] .alzio7 h5 정의/[12:53] padding/[13:23] 넓이값 계산방법/[14:59] 상속관계/[15:25] div/[15:54] body/[16:12] p태그/[16:59] span태그/[18:04] h5태그/[19:20] a링크/[19:29] 기본적인 a링크값과 상속에 대한 차별화/[20:27] .alzio7 a 정의/[20:32] 꿀팁/[20:33] color, text-decoration:underline/[20:56] .alzio7 a:hover 정의/[20:59] 꿀팁/[20:57] font-weight:bold, background-color, text-decoration:none/[21:03] 꿀팁/[21:07] 꿀팁/[21:29] color추가/[21:43] 텍스트 추가/[22:33] margin/[23:12] height: auto/[25:37]line-height/[26:02] 꿀팁/[27:36] letter-spacing/[28:08] 꿀팁/[28:39] text-align/[28:56] 꿀팁/[30:33] text-align: justify
-
04.28분 웹표준 스킬의 폭풍성장을 위한 필수과정! 4
가운데 및 위아래, 상대 및 절대 포지션
책갈피 : [00:00] div 가운데 정의/[00:02] alzio8추가수정/[00:36] width 정의/[00:51] margin0 auto/[00:51] 하단 내용 추가/[02:14] 불필요한 내용 주석처리/[02:35] 자리수/[02:49] .alzio9/[02:57] css 정의/[02:59] 꿀팁/[03:09] 꿀팁/[03:35] 꿀팁/[03:57] padding-top/[04:36] padding-left/[05:06] padding-right/[05:34] padding-bottom/[06:14] padding 3자리 표현/[06:15] 꿀팁/[07:07] margin/[07:18] border-color/[07:27] 꿀팁/[07:28] border: 1px solid red;/[07:50] width, border/[08:38] position:absolute/[09:17] 꿀팁/[09:30] position 위치 설정/[11:47] z-index/[11:49] z-index 실습/[12:35] 꿀팁/[13:46] z-index 변경/[14:38] position:absolute/[16:31] 꿀팁/[16:35] position:relative/[16:56] absolute와 relative의 차이점/[18:04] br 태그/[18:26] 고정위치/[18:39] position:fixed/[19:16] table/[19:38] border-collapse, spacing/[20:27] .alzio10/[20:52] tb/[21:03] 꿀팁/[21:14] 꿀팁/[22:10] table 선 제거/[22:46] border-spacing/[23:28] 결과확인/[24:05] width/[24:50] padding/[25:01] 꿀팁/[25:26] color, font-size, font-family, sans-serif/[25:33] 꿀팁/[25:49] 꿀팁/[26:24] 꿀팁/[26:45] 꿀팁/[26:47] te.bak/[27:03] background-color/[27:29] 꿀팁
-
05.23분 웹표준 스킬의 폭풍성장을 위한 필수과정! 5
떠있는 요소및 상속관계
책갈피 : [00:10] ul ol dd dt/[01:25] 꿀팁/[03:36] width border/[03:44] 꿀팁/[04:09] 꿀팁/[05:54] 꿀팁/[06:27] 꿀팁/[06:33] 꿀팁/[07:39] 꿀팁/[07:41] border/[08:48] 꿀팁/[10:22] padding li태그에 a/[10:53] 꿀팁/[13:00] line-height, background/[13:02] 꿀팁/[13:57] 꿀팁/[14:36] 꿀팁/[16:24] 꿀팁/[17:37] 꿀팁/[17:38] 상속관계 확인/[19:09] 꿀팁/[19:15] 꿀팁/[20:06] 꿀팁/[20:25] 꿀팁/[21:38] a 태그/[21:49] 꿀팁/[22:05] 꿀팁/[22:43] 꿀팁
- 웹표준 [고급]
-
06.46분 스킬 향상을 위한 Finishing up! 메뉴 총정리 1
종류별 메뉴 세팅
책갈피 : [00:14] alzio12 margin:0 auto/[00:34] 꿀팁/[02:25] 꿀팁/[02:32] 꿀팁/[03:16] 꿀팁/[03:18] padding display:block/[03:29] 꿀팁/[03:58] 꿀팁/[04:32] 꿀팁/[04:47] 꿀팁/[06:06] body ul목록/[07:23] 꿀팁/[07:50] 꿀팁/[08:15] 꿀팁/[08:28] 꿀팁/[08:48] 꿀팁/[09:51] 꿀팁/[10:25] 꿀팁/[10:49] 꿀팁/[11:09] 꿀팁/[11:16] 꿀팁/[11:26] 꿀팁/[12:43] 상속관계/[16:10] width, border-top/[16:14] 꿀팁/[16:46] 꿀팁/[18:12] 꿀팁/[19:18] 꿀팁/[19:45] 꿀팁/[19:46] display:none/[20:01] 꿀팁/[21:15] 꿀팁/[22:09] 꿀팁/[22:25] 꿀팁/[22:50] 꿀팁/[25:43] .alzio15 width/[26:34] 꿀팁/[26:54] 꿀팁/[27:35] 꿀팁/[27:49] 꿀팁/[28:09] 꿀팁/[28:33] 꿀팁/[29:02] 꿀팁/[29:20] 꿀팁/[30:45] 꿀팁/[33:55] alzio16 li/[34:06] 꿀팁/[34:17] 꿀팁/[34:30] 꿀팁/[35:20] 꿀팁/[35:34] 꿀팁/[36:01] 꿀팁/[37:45] border-left/[38:37] 꿀팁/[38:52] 꿀팁/[39:22] 꿀팁/[41:11] 꿀팁/[40:28] display:inline/[42:27] 꿀팁/[42:56] 꿀팁/[43:58] 꿀팁/[44:11] 꿀팁/[44:16] 꿀팁/[44:39] 꿀팁/[44:59] 꿀팁/[45:09] 상속관계확인/[45:13] 꿀팁
-
07.34분 스킬 향상을 위한 Finishing up! 메뉴 총정리 2
float:left, position, white-space
책갈피 : [00:13] .alzio 20 li/[00:34] 꿀팁/[00:28] float:left/[00:53] float:right/[01:49] width/[02:57] .alzio 20 ul/[03:14] .alzio 20 a/[03:18] 꿀팁/[03:24] 꿀팁/[03:30] 꿀팁/[03:33] border-left, top, right/[03:55] padding/[04:11] .alzio 20 a:hover/[04:14] text-decoration/[04:15] 꿀팁/[04:33] 꿀팁/[05:37] 꿀팁/[05:38] .alzio 21 li/[05:38] float:left/[05:43] 꿀팁/[05:46] .alzio 21 li a/[05:47] .alzio 21 li a:hover/[05:55] 꿀팁/[06:18] background-color/[06:43] css 정의/[07:30] 꿀팁/[07:32] .alzio 22 li/[07:41] .alzio 22 li a/[07:44] 꿀팁/[07:54] 꿀팁/[07:56] position:relative, float:left/[08:17] 결과 확인/[08:35] 꿀팁/[08:37] white-space:nowrap/[08:52] .alzio 22 li a span/[08:57] 꿀팁/[09:03] 꿀팁/[09:13] 꿀팁/[09:23] border-width/[09:26] 꿀팁/[09:40] 꿀팁/[10:07] .alzio 22 li a b/[10:09] 꿀팁/[11:33] 마우스오버/[11:48] 꿀팁/[11:54] 꿀팁/[12:31] .alzio 22 li a:hove em/[13:01] 꿀팁/[13:32] border/[13:44] 꿀팁/[14:26] 꿀팁/[14:43] position:relative/[15:26] 결과확인/[17:26] 상속관계확인/[18:33] 꿀팁/[19:25] 꿀팁/[20:37] .alzio 23 /[20:53] text-align:center/[21:09] 꿀팁/[23:02] margin0 auto/[23:22] width/[23:44] .alzio 23 a /[23:57] position:relative/[24:04] 꿀팁/[24:08] display:block/[24:11]width, height/[24:33] 꿀팁/[25:41] .alzio 23/[25:57] 꿀팁/[26:11] 꿀팁/[26:36] a .topright /[26:39] left, border-right/[26:42] 꿀팁/[27:24] 꿀팁/[28:23] .alzio 23 a:hover/[29:30] 상속관계 확인/[29:57] div/[31:55] topleft/[33:26] 꿀팁/[33:35] topright
-
08.35분 스킬 향상을 위한 Finishing up! 메뉴 총정리 3
컬러별 메뉴
책갈피 : [00:09] 꿀팁/[00:11] border-right/[00:47] 꿀팁/[01:16] 꿀팁/[01:28] 꿀팁/[02:01] border-right/[02:26] .alzio 24 li a/[02:35] 꿀팁/[02:55] 꿀팁/[03:31] 꿀팁/[03:52] 꿀팁/[04:07] 꿀팁/[04:31] left, top/[04:37] 꿀팁/[04:48] width, height/[06:34] 상속관계 설명/[09:53] 컬러별 메뉴 생성/[10:01] .alzio 25 li/[10:13] 꿀팁/[10:31] width, height/[10:44] 꿀팁/[11:15] 꿀팁/[11:30] 꿀팁/[11:45] 꿀팁/[12:44] 꿀팁/[11:47] width, height, text-align/[12:18] .alzio 25 a em/[12:40] font:bold/[13:29] .alzio 25 a .rad/[13:42] 꿀팁/[14:09] .alzio 25 a:hover/[14:47] z-index/[15:18] 꿀팁/[15:20] position:absolute/[16:38] 꿀팁/[17:12] background-color/[18:39] 상속관계 확인/[20:37] .alzio 26/[20:51] height/[20:55] 꿀팁/[21:00] background: url/[22:24] 꿀팁/[22:39] .alzio 26 li a/[22:59] float:left, line-height/[23:39] .alzio 26 li a b/[23:55] 꿀팁/[24:03] display:block, padding/[24:24] .alzio 26 li.on a/[24:29] 꿀팁/[25:14] .alzio 26 li.on a b/[25:32] 꿀팁/[26:43] padding/[28:17] 꿀팁/[28:21] .alzio 26 li a:hover/[29:01] background:url, no-repeat/[29:14] 꿀팁/[29:36] cursor:default/[29:46] 꿀팁/[31:05] 상속관계 확인/[30:16] 꿀팁/[31:19] ul목록/[31:40] body/[31:43] li목록
-
09.49분 웹표준의 정석! 제대로 배우자 1
난이도 있는 레이아웃 만들기
책갈피 : [00:00] 레이아웃/[00:14] 기본사항/[00:25] .alzio 30/[00:30] float:left/[00:40]꿀팁/[00:51] width/[01:15]height/[01:22]꿀팁/[01:27] text-align, font-weight/[01:31] color/[01:49]꿀팁/[01:51] background-color/[02:00] 결과 확인/[02:11] 3단 레이아웃/[02:50] 상속관계 확인/[03:39] p 태그/[04:04] 난이도 있는 레이아웃/[04:34] margin-left:20%/[05:10] css코딩/[05:21] .alzio 32/[05:33] height:100%/[05:41]꿀팁/[05:52] .alzio 32 a/[06:04] padding/[06:15]꿀팁/[06:29]꿀팁/[06:33] background-color/[07:11] transition/[07:38] container/[08:04]꿀팁/[08:27] box-shadow/[08:55] background-color/[08:59]꿀팁/[10:00] position:fixed/[10:11]꿀팁/[10:41] 결과확인/[11:08]꿀팁/[11:13] 상속관계 확인/[13:01] 박스 정렬/[14:08] .alzio_com span/[14:20] width, height/[14:25] margin, padding/[14:30]꿀팁/[14:33]꿀팁/[15:02] border/[15:51] box-shadow/[16:36] 상속관계 확인/[18:48] line-height/[19:41] .alzio31-gap/[19:45]꿀팁/[19:56] margin-bottom/[20:08]꿀팁/[20:51] float:left/[21:01]꿀팁/[23:36] overflow:hidden/[24:08]꿀팁/[24:33] background-color/[24:47] 결과 확인/[26:46] overflow/[27:56] 내용 추가/[29:17] 레이아웃 나누기/[30:56] 상속관계 확인/[33:45] header/[33:58]꿀팁/[34:01] padding/[34:14] background-color/[34:16]꿀팁/[34:30] 본문내용 작성/[35:22] 테이블 추가/[35:27] 기본적인 선언/[35:36] width, display: table/[36:02] border:none/[37:03] border-bottom/[37:40] table-cell, vertical-align/[38:02]꿀팁/[38:05]꿀팁/[38:50] background-color/[39:28] padding-left/[40:07] footer/[40:23] 상속관계 확인/[42:31] 배너식 활용/[43:03] .alzio33/[43:09] float:left/[43:26] width/[43:40] padding/[44:23]꿀팁/[45:10] box-shadow/[45:57] width:100%/[46:31] 상속관계 확인/[48:14] margin/[48:30] 31%로 정의한 이유
-
10.46분 웹표준의 정석! 제대로 배우자 2
레이아웃 전체적인 구성
책갈피 : [00:00] 기본적인 레이아웃/[00:17] 전체적인 구성/[00:38] background-color/[00:48]꿀팁/[01:02] padding/[01:16]꿀팁/[01:36] float:left/[01:49] width/[02:10] line-height/[02:36] padding/[02:40] text-align: justify/[02:46]꿀팁/[03:13]꿀팁/[03:17] box-sizing/[04:02] 상속관계 확인/[06:44]꿀팁/[06:54] background-color/[07:15] color, font-size, text-align/[07:23]꿀팁/[07:50]꿀팁/[07:53] padding/[08:31] 오른쪽 내용 생성/[09:15] folat:left, width/[09:17]꿀팁/[10:03] line-height/[11:09] margin-bottom/[12:31]꿀팁/[12:54]꿀팁/[12:56] line-height/[13:44] padding/[15:13] 결과 확인/[16:15] 상속관계 확인/[19:33] form기본사항/[19:59] width/[20:17]꿀팁/[20:47] box-shadow/[21:38] position:relative/[22:38] line-height/[23:13] width/[23:38] padding/[24:38] border:none/[24:49]꿀팁/[24:56] border-bottom/[26:24] border:none/[26:39]꿀팁/[27:12] background-color /[27:15] transition/[27:36]꿀팁/[27:47]꿀팁/[27:39] cursor:pointer/[27:49] font-weight/[27:59] box-shadow/[28:25] 상속관계 확인/[30:21] input/[30:57] box-sizing/[31:37] 기본적인 기반사항/[31:55]꿀팁/[32:04]꿀팁/[32:25] background: url/[33:32] position/[33:39]꿀팁/[34:57] text-indent/[35:17]꿀팁/[36:14] font-style/[36:17]꿀팁/[37:00] em 태그/[37:56] 메뉴/[38:24]꿀팁/[38:51]꿀팁/[40:38]꿀팁/[40:48] list-style/[41:43] 테이블/[43:03] text-align; left/[43:45]꿀팁/[45:00] height/[45:10]꿀팁/[45:25] padding
-
11.37분 웹표준의 정석! 제대로 배우자 3
값들의 정의
책갈피 : [00:00] 넓이값/[01:43] 꿀팁/[00:16] padding, border, margin/[00:19] 넓이값 계산/[01:30] border/[01:40] border-style/[01:46] border-width/[01:51] border-color/[01:54] 꿀팁/[02:12] border-top-style/[02:18] 꿀팁/[03:27] 꿀팁/[03:29] 함축해서 표현하기1/[03:49] 꿀팁/[03:43]outline-style/[04:32] 꿀팁/[04:55] 꿀팁/[04:56] width, border/[05:58] max-width/[06:18] min-width/[06:59] 꿀팁/[07:32] visibility: hidden/[09:11] float: left, width/[09:23] 꿀팁/[09:27] margin/[09:30] border/[09:55] 꿀팁/[10:30] border/[10:43] float/[11:47] border, clear: left/[10:48] 꿀팁/[11:46] 꿀팁/[13:10] 꿀팁/[14:17] 꿀팁/[14:21] overflow: auto/[14:54] inline-block/[15:30] width, height, margin/[15:36] 꿀팁/[15:42] border/[16:01] 꿀팁/[16:31] display: inline-block/[17:00] 꿀팁/[17:19] margin auto/[17:36] div > p/[18:07] 꿀팁/[18:54] div > em/[19:04] div + p/[19:43] div ~ p/[20:15] 꿀팁/[20:47] 꿀팁/[21:15] p:first-of-type/[21:22] 꿀팁/[21:39] p:last-of-type/[21:41] 꿀팁/[21:49] p:last-child/[21:54] 꿀팁/[21:59] p:only-child/[22:30] p::after/[22:31] 꿀팁/[23:17] p::before/[23:46] p::first-letter/[23:56] 꿀팁/[24:17] 꿀팁/[25:12] ::selection/[25:28] p:nth-of-type(3)/[25:30] 꿀팁/[26:12] input:read-only/[26:50] input:read-write/[27:42] input[type=text] 꿀팁/[28:05] disabled/[28:19] input:focus/[28:39] input:in-range/[29:11] input:invalid/[29:46] input:optional/[30:06] input:required/[31:11] input:out-of-range/[31:57] 꿀팁/[32:31] p:nth-child(1)/[32:48] p:nth-last-child(3)/[32:53] 꿀팁/[33:18] p:nth-last-of-type(1)/[33:28] p:nth-last-of-type(4)/[33:38] p:nth-of-type(3)/[33:48] 꿀팁/[34:08] q:lang/[34:13] 꿀팁/[35:08] :not(p)/[35:43] :root/[36:03] :target
-
12.40분 웹표준의 정석! 제대로 배우자 4
응용 예제
책갈피 : [00:00] target 관리, 표현/[00:12] 꿀팁/[00:20] target/[00:23] 꿀팁/[00:36] 결과 확인/[00:48] background-color/[00:53] a[target=_blank] 꿀팁/[01:23] [title~=alzio] 꿀팁/[04:18] input[type=text] 꿀팁/[04:27] 꿀팁/[04:33] margin-bottom/[04:43] input[type=bottom] 꿀팁/[05:22] 꿀팁/[05:33] 꿀팁/[05:39] 꿀팁/[05:52] 꿀팁/[06:19] 꿀팁/[06:23] cursor:pointer/[07:13] 꿀팁/[07:14] alzio37-a/[07:31] 꿀팁/[07:32] padding/[08:02] 꿀팁/[08:31] border-radius값/[08:44] 결과값/[10:52] 반지름 넓이 높이/[11:41] 퍼센트/[12:21] border-radius/[13:41] 배경/[14:04] 꿀팁/[14:08] background-image/[14:45] 꿀팁/[14:46] 배경 두번 까는 방법/[14:49] no-repeat, repeat/[15:39] 꿀팁/[15:43] background-position/[16:06] 꿀팁/[16:22] width 값/[17:09] 축소 url/[17:44] border/[17:57] 꿀팁/[17:59] border/[18:04] background-color, repeat/[18:01] 꿀팁/[18:04] 꿀팁/[18:11] 꿀팁/[18:32] 꿀팁/[18:33] 외부 여백 margin/[18:56] 꿀팁/[18:57] background-size/[20:02] 꿀팁/[20:12] contain/[20:39] cover/[21:22] 이미지 사이즈 조절/[21:24] 꿀팁/[21:34] left top no-repeat/[21:44] right bottom/[21:48] left top repeat/[22:03] 꿀팁/[22:04] background-size/[22:53] 꿀팁/[23:13] background-origin/[23:15] 꿀팁/[23:35] border-box/[24:03] content-box/[24:38] 꿀팁/[24:40] dotted/[24:55] 클립/[25:00] 꿀팁/[25:05] background-clip/[26:13] 꿀팁/[26:22] linear-gradient/[26:39] webkit, moz, o/[27:02] 꿀팁/[27:04] linear-gradient/[27:13] 컬러값 적용/[27:58] 꿀팁/[28:41] 꿀팁/[30:50] rgb/[31:47] 방향/[31:50] 꿀팁/[32:32] 꿀팁/[32:33] 원형 gradient/[32:43] 결과 확인/[33:16] 응용 예제/[33:45] 꿀팁/[33:53] circle/[34:18] 꿀팁/[34:21] 방사형 gradient/[34:53] 결과 확인/[35:01] farthest-side/[36:00] 꿀팁/[36:01] repeating-radial-gradient/[36:42] 꿀팁/[36:45] text-shadow/[37:08] 그림자 컬러/[37:25] 뿌옇게 하는 효과/[38:06] 컬러값/[39:24] 꿀팁/[39:56] box-shadow
-
13.36분 웹표준의 정석! 제대로 배우자 5
웹폰트, 3D
책갈피 : [00:03] 꿀팁/[00:04] 기본적인box/[00:15] 줄 바꿈/[00:31] 꿀팁/[00:34] white-space/[00:52] 꿀팁/[01:06] text-overflow/[01:07] 꿀팁/[01:52] clip/[02:33] ellipsis/[02:45] 꿀팁/[03:02] 꿀팁/[03:07] break-word/[03:40] 꿀팁/[03:45] word-break/[04:21] break-all/[04:52] 웹 폰트 연동 /[05:19] 구글 웹 폰트 사용 방법/[06:34] 소스 클릭하여 복사/[07:01] 꿀팁/[07:18] font-family/[07:39] 꿀팁/[08:45] 꿀팁/[08:52] 꿀팁/[08:53] transform/[08:35] 박스 모델 만들기/[08:54] rotate/[09:55] 모질라, 파이어폭스, 사파리/[10:18] 픽셀 이용해서 이동/[10:31] transform/[11:24] margin/[11:30] 꿀팁/[11:35] 꿀팁/[12:56] 꿀팁/[13:00] skewX, skewY/[14:39] 꿀팁/[14:42] matrix/[15:11] 꿀팁/[15:13] 3D transform/[16:40] transform 기준점/[16:43] 꿀팁/[16:50] origin/[18:03] 3D 스타일에 중첩된 요소 지정/[18:26] 꿀팁/[18:40] 꿀팁/[19:40] initial/[19:58] preserve/[20:26] 원근법, 회전, 각도/[20:47] 꿀팁/[20:53] rotateX/[21:18] perspective/[22:08] 기준점 추가/[21:12] 꿀팁/[22:25] 꿀팁/[23:04] 꿀팁/[23:05] backface-visibility/[23:24] 꿀팁/[23:32] 꿀팁/[23:33] rotate/[24:10] hidden, visible/[24:11] 꿀팁/[24:51] transition/[25:06] 꿀팁/[25:07] width 2s/[28:42] 꿀팁/[28:43] transition-timing-function/[29:19] ease/[29:56] ease-in/[30:33] ease-in-out/[30:54] 꿀팁/[30:55] transition-delay/[32:30] 꿀팁/[32:31] transform: rotate/[33:51] 근본 원리 transition/[34:15] 꿀팁/[34:48] linear
-
14.32분 웹표준의 정석! 제대로 배우자 6
애니메이션
책갈피 : [00:00] 애니메이션/[00:20] 꿀팁/[00:21] animation-name/[01:11] from, to/[01:19] 꿀팁/[01:20] background-color/[02:41] webkit/[02:48] keyframes, webkit/[03:54] 꿀팁/[05:20] keyframe 움직이는 방법/[05:22] 꿀팁/[05:45] 30 퍼센트 일 경우/[06:00] 60 퍼센트 일 경우/[06:14] 80 퍼센트 일 경우/[06:43] 0 퍼센트와 100 퍼센트/[07:31] 꿀팁/[07:36] position: relative/[07:52] position: relative 없는 경우/[08:19] 애니메이션의 지연/[08:28] 꿀팁/[08:35] animation-delay/[09:12] 꿀팁/[09:13] animation-iteration-count/[09:54] infinite/[10:25] 역방향 애니메이션/[10:37] 꿀팁/[10:41] reverse/[11:13] alternate/[11:09] 꿀팁/[11:39] infinite/[11:46] 꿀팁/[12:02] 꿀팁/[12:37] ease/[13:22] ease-out/[13:47] ease-in-out/[14:06] 꿀팁/[14:32] 축소한 표현/[15:23] 꿀팁/[15:27] column-count/[16:04] 꿀팁/[16:08] gap/[16:37] 꿀팁/[16:42] style, solid/[17:16] 꿀팁/[17:25] width, style/[17:39] 꿀팁/[17:58] 함축한 표현/[18:12] webkit/[18:30] 브라우저 성향/[19:00] 꿀팁/[19:05] count 분리/[19:48] column-span/[20:06] 최적의 넓이값 정의/[20:07] 꿀팁/[20:58] 꿀팁/[21:04] auto/[21:39] balance/[22:02] 꿀팁/[22:05] width, border/[22:18] 결과값/[22:31] 꿀팁/[22:32] resize: horizontal/[22:35] 꿀팁/[22:37] overflow: auto/[22:59] vertical/[23:40] 꿀팁/[23:41] resize: both/[24:49] 꿀팁/[24:54] outline/[25:08] 꿀팁/[25:10] offset/[25:47] 꿀팁/[25:48] box-sizing/[27:06] 꿀팁/[27:44] 꿀팁/[27:45] display: flex/[28:03] 꿀팁/[28:09] body/[28:59] 꿀팁/[29:00] row-reverse/[29:25] 꿀팁/[29:56] 꿀팁/[29:57] column-reverse/[31:00] 꿀팁/[31:02] flex-end/[31:18] center/[31:27] 꿀팁/[31:33] space-between/[32:03] space-around
-
15.54분 웹표준의 정석! 제대로 배우자 7
반응형웹 단계별 적용
책갈피 : [00:00] 반응형 웹/[00:21] min, max/[00:33] 꿀팁/[00:39] 색상/[00:46] 꿀팁/[00:49] 꿀팁/[00:50]media 쿼리/[00:52] min-width/[02:22] 브라우져 레이아웃/[02:35] 메뉴, 콘텐츠/[02:46] 꿀팁/[02:54] margin-left/[03:26] 리스트/[04:09] 꿀팁/[04:10] min-width/[04:43] 꿀팁/[04:52] width, float:left/[05:12] 꿀팁/[05:17] margin-left/[05:35] 내용 확인/[07:24] 메뉴/[07:42] media screen 정의/[07:45] 꿀팁/[07:51] 꿀팁/[07:53] max, min/[08:01] 꿀팁/[08:03] 꿀팁/[08:04] padding-left/[08:51] li a/[10:17] max-width/[10:40] 꿀팁/[10:43] 꿀팁/[10:45] content/[10:49] min-width/[10:51] 꿀팁/[11:55] before/[12:27] 꿀팁/[12:28] min-width/[12:35] 꿀팁/[12:37] :after/[12:51] 결과 확인/[13:35] 여러기기/[13:51] 스마트폰/[14:22] view port 설정/[14:52] box-sizing/[14:57] 꿀팁/[15:55] 꿀팁/[16:01] 꿀팁/[16:03] padding, border/[16:28] 꿀팁/[16:35] float:left/[17:03] 결과 확인/[17:28] 꿀팁/[17:34] box-sizing/[18:06] meta name/[18:43] 비슷한 내용 하나로 묶기/[18:57] head/[20:23] 해상도width 값/[21:00] 해상도에 따라서/[22:11] float:left, padding/[22:21] 꿀팁/[23:30] 꿀팁/[22:38] 결과 확인/[23:27] 실습/[23:38] 상단/[24:42] 꿀팁/[23:44] 메인/[23:59] 본문/[24:03] 우측 배너/[24:09] div 종료/[25:03] 꿀팁/[26:14] float:left, padding/[26:17] 꿀팁/[26:20] 꿀팁/[27:18] 문제점/[28:45] 꿀팁/[28:58] 꿀팁/[28:49] after/[29:08] 꿀팁/[30:35] 반응형 웹 실습/[31:09] 꿀팁/[31:13] max-width/[33:09] 꿀팁/[33:10] box-sizing/[35:20] 꿀팁/[35:25] min-width/[36:12] float:left/[36:23] 설명/[37:04] width/[39:22] clear, display/[39:40] 결과 확인/[40:05] 왼쪽 메뉴/[40:09] width/[40:30] float, padding/[41:04] width, float, padding/[43:44] 실제 기기/[43:57] img/[44:12] max-width/[44:52] 꿀팁/[46:56] 꿀팁/[46:57] background-image/[47:16] background-repeat/[47:20] 꿀팁/[47:23] contain/[47:52] 꿀팁/[47:59] cover/[48:23] 꿀팁/[49:03] 꿀팁/[49:16] 꿀팁/[50:11] device/[51:52] video/[52:47] width/[53:12] 꿀팁/[53:29] max-width
-
16.35분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 1
참고, 잘못된 사례
책갈피 : [00:00] 홈페이지 제작/[00:09] 방법 1/[00:19] 제작 방법 2/[00:41] 홈페이지 제작/[00:54] position:relative/[00:56] 꿀팁/[01:01] 꿀팁/[01:34] 꿀팁/[01:47] 꿀팁/[01:57] 참고 사항/[02:31] 꿀팁/[02:47] select,input,textarea/[02:55] 꿀팁/[03:19] display:none/[03:26] 꿀팁/[03:36] 꿀팁/[03:46] text-decoration/[03:48] 꿀팁/[03:54] 꿀팁/[03:55] :hover, :active/[04:20] table/[04:25] 꿀팁/[04:27] list-style:none/[05:03] wrap/[05:27] 꿀팁/[05:38] position:relative/[06:05] height/[07:30] 꿀팁/[07:33] float:left/[07:41] 결과 확인/[09:29] 꿀팁/[09:30] display: block/[11:04] 꿀팁/[11:12] position:absolute/[11:17] 결과 확인/[12:29] 꿀팁/[12:41] float:left/[13:17] display:block/[13:22] 꿀팁/[13:29] 꿀팁/[13:41] 결과 확인/[13:50] letter-spacing/[13:54] 꿀팁/[14:03] :hover/[14:09] 꿀팁/[14:24] 메뉴 추가/[15:37] 꿀팁/[15:56] 꿀팁/[15:57] float:left/[16:30] 꿀팁/[16:39] background:url/[16:49] 결과 확인/[17:08] 꿀팁/[18:03] 꿀팁/[18:45] a2_on의 값 넣기/[18:58] 결과 확인/[21:15] 보더의 존재/[21:32] 꿀팁/[22:46] float 절대값/[23:17] 잘못된 사례/[23:18] 꿀팁/[23:21] position:relative/[23:32] 결과 확인/[24:37] float:left/[25:16] 꿀팁/[25:18] clear:both/[25:26] ul 넓이 값/[25:41] new 버튼 추가/[26:00] 꿀팁/[26:01] position:absolute/[26:44] 꿀팁/[26:46] no-repeat/[26:51] 결과 확인/[27:17] z-index/[27:20] 꿀팁/[27:32] 상속 관계/[27:39] wrap/[28:03] margin: auto/[28:04] box-sizing/[28:14] header/[29:02] a link 속성/[29:26] right, top/[29:36] ul 목록/[30:00] link 값 정의/[31:15] position:absolute/[31:52] 정렬 값/[32:12] 메뉴/[32:44] float:left/[33:48] line-height값이 같은 이유/[34:35] new 버튼 만들기/[34:51] z-index
-
17.40분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 2
본문, 로그인, 위치 수정
책갈피 : [00:00] 글자 숨기기, 배경 이미지 넣기/[00:42] 꿀팁/[00:45] background-color/[01:07] border/[01:10] 꿀팁/[01:30] 꿀팁/[01:32] float:left/[01:44] 꿀팁/[01:52] 결과 확인/[02:11] 꿀팁/[02:21] 꿀팁/[02:23] text-align:center/[02:45] 경로 지정/[03:10] 꿀팁/[03:26] 클래스명 삽입/[03:40] 꿀팁/[04:10] 꿀팁/[04:16] text-indent/[04:19] 결과 확인/[04:37] 꿀팁/[05:04] 한 개의 여백만 밀기/[05:08] 결과 확인/[06:25] 꿀팁/[06:32] hover 사용시 문제점/[06:25] 해결 방법/[06:55] 꿀팁/[07:26] 결과 확인/[07:35] 내용 정리/[07:36] ul목록/[07:43] 꿀팁/[08:18] 꿀팁/[08:26] no-repeat/[08:53] 꿀팁/[09:09] 꿀팁/[09:03] float:left/[09:25] text-decoration/[09:36] div 마무리/[10:28] 꿀팁/[10:32] padding/[11:24] 꿀팁/[10:47] 메뉴 만들기/[11:25] position:absolute/[11:52] right/[12:15] 꿀팁/[12:16] position:fixed/[12:40] 꿀팁/[12:45] 꿀팁/[13:19] 꿀팁/[13:32] 꿀팁/[14:43] 꿀팁/[14:48] padding-bottom/[15:42] 꿀팁/[16:07] 꿀팁/[16:12] padding-left/[16:15] 결과 확인/[16:41] 꿀팁/[17:47] 꿀팁/[18:03] font-weight:bold/[18:06] 결과 확인/[18:28] 꿀팁/[19:03] font-weight:bold/[19:06] 꿀팁/[19:13] 결과 확인/[20:36] 우측 메뉴 상속 관계/[20:52] 꿀팁/[20:54] position: absolute/[21:04] 꿀팁/[21:05] position: fixed/[21:13] ul목록/[21:52] 꿀팁/[21:57] 꿀팁/[22:59] 꿀팁/[23:14] 본론 세팅/[23:58] 꿀팁/[24:19] 로그인 창 만들기/[24:57] 꿀팁/[24:59] background:url/[25:14] 꿀팁/[25:20] width, height/[25:28] 로그인 세팅/[25:47] 꿀팁/[25:48] float:left/[27:29] 꿀팁/[27:41] 꿀팁/[27:47] font-size/[28:08] label/[29:28] 한번에 동일하게/[29:36] login/[29:48] login .id input,/[29:52] #login .pw input/[29:55] width/[30:21] 결과 확인/[30:33] height/[30:41] 꿀팁/[30:44] padding-left/[30:59] 결과 확인 /[32:12] 꿀팁/[32:15] border-color/[32:27] background-color/[32:45] 입력값 색깔 지정/[33:04] button type/[33:21] 꿀팁/[33:26] float:left/[33:43] margin/[33:46] 꿀팁/[33:55] 결과 확인/[34:14] 꿀팁/[34:15] overflow:hidden/[34:36] width, height/[34:46] 결과확인/[34:50] 꿀팁/[35:13] 꿀팁/[35:40] cursor:pointer/[35:51] 꿀팁/[35:53] 위치 수정/[37:09] 꿀팁/[37:12] 패스워드와 아이디/[37:36] 로그인 창/[39:20] 장점
-
18.44분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 3
회원가입, 로그아웃
책갈피 : [00:00] ul목록 정의/[00:29] 꿀팁/[00:55] 꿀팁/[00:56] padding/[00:59] 결과 확인/[01:38] font-size, letter-spacing/[01:40] 꿀팁/[01:47] 결과 확인/[02:06] 꿀팁/[02:07] float-left/[02:11] 결과 확인/[02:27] 꿀팁/[02:39] 꿀팁/[03:12] .login_al li a/[03:16] color/[03:19] 결과 확인/[03:39] 꿀팁/[03:40] a:hover/[04:03] 문제점/[04:25] .ps/[05:04] 배경 이미지/[05:30] padding-left/[05:35] 꿀팁/[05:41] 꿀팁/[06:25] css 요소/[06:38] width, color/[06:43] 결과 확인/[06:51] 꿀팁/[06:53] 상속 관계/[07:03] 로그인 배경/[07:23] 꿀팁/[07:39] input/[08:03] 커서 깜빡이게 하는 것/[08:56] 회원가입/[10:10] 로그 아웃 버튼/[10:32] 배경 깔기/[10:34] width,height/[10:37] 꿀팁/[10:39] 꿀팁/[11:08] 여백 없이 하는 방법/[11:25] 코딩/[11:35] infous/[11:48] 꿀팁/[11:51] margin, padding/[12:32] p태그/[12:33] 꿀팁/[12:35] margin: 0/[12:56] .m/[13:20] 꿀팁/[13:21] padding-left, font-size/[13:42] 로그아웃 버튼 만들기/[14:09] 꿀팁/[14:20] 배경 포지션/[15:23] 꿀팁/[15:24] background, borde, line-height/[15:40] 결과 확인/[15:53] user/[16:32] user strong/[16:19] user span/[16:43] 결과 확인/[17:09] 꿀팁/[17:33] 꿀팁/[17:35] text-align:center/[18:09] margin/[18:11] 꿀팁/[18:18] color/[18:38] 꿀팁/[19:20] 상속 관계/[19:38] 로그아웃/[19:58] background, border/[20:51] line-height/[21:41] margin/[22:11] 링크 불러오기/[23:29] 파일 연동하기/[23:40] link rel/[25:18] 꿀팁/[27:24] left-img a, display: block/[27:28] 꿀팁/[28:13] 메뉴 삽입/[28:40] 꿀팁/[29:10] top 태그 코딩/[29:37] 꿀팁/[29:43] position, margin/[29:44] 꿀팁/[30:07] 꿀팁/[30:34] tagbox ul/[30:44] 꿀팁/[30:49] text-align:justify/[31:11] 꿀팁/[31:31] 꿀팁/[31:45] padding/[32:07] 꿀팁/[32:10] display: inline/[32:11] 꿀팁/[33:39] color/[32:40] 꿀팁/[34:07] 꿀팁/[34:09] font-weight:bold/[34:31] a:hover/[34:32] text-decoration/[34:37] 꿀팁/[35:34] 꿀팁/[36:13] background, text-align/[36:31] 꿀팁/[36:49] 꿀팁/[36:56] 꿀팁/[37:16] 꿀팁/[37:17] display:inline/[37:54] 꿀팁/[37:56] display:block/[37:57] 꿀팁/[38:52] 꿀팁/[39:01] 꿀팁/[39:03] 꿀팁/[39:05] width,, solid/[39:56] 꿀팁/[39:58] overflow/[40:19] 상속 관계/[40:25] contentBox/[40:41] 꿀팁/[40:47] text-decoration/[41:09] ul목록/[41:28] li목록/[41:33] a링크/[41:47] tagbox/[42:31] tagbox ul/[43:06] 특정 태그/[43:56]
-
19.36분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 4
Main 페이지 코딩마무리
책갈피 : [00:00] Main/[00:16] float:left/[00:18] 꿀팁/[00:24] width/[00:50] 꿀팁/[00:54] maring/[00:57] 결과 확인/[01:40] 꿀팁/[01:41] float:right/[02:07] 꿀팁/[02:13] height: line-height/[02:28] 결과 확인/[02:39] 꿀팁/[03:18] 꿀팁/[03:40] 꿀팁/[03:46] padding/[04:53] color, font/[05:01] 꿀팁/[05:25] 꿀팁/[05:37] 꿀팁/[05:41] margin-bottom/[05:56] 꿀팁/[06:21] 꿀팁/[06:41] 꿀팁/[07:19] 꿀팁/[09:20] 상속 관계/[09:27] 꿀팁/[09:38] 꿀팁/[09:48] 꿀팁/[10:12] 꿀팁/[11:01]main_top/[11:18] 꿀팁/[11:29] 꿀팁/[11:40] 꿀팁/[11:45] padding, font-size/[11:49] 꿀팁/[11:55] line-height/[12:08] 꿀팁/[12:40] 꿀팁/[12:42] background-color/[13:03] 꿀팁/[13:05] margin/[14:43] 꿀팁/[14:45] margin/[15:19] img, float:left/[15:21] 꿀팁/[15:36] 꿀팁/[16:00] 꿀팁/[16:04] 꿀팁/[16:05] position, line-height/[16:28] 구분선 만들기/[16:41] 꿀팁/[16:44] no-repeat, margin/[16:56] 꿀팁/[17:04] 결과 확인/[18:19] main_info/[18:32] 꿀팁/[18:38] 꿀팁/[18:51] 결과 확인/[19:44] 꿀팁/[20:39] margin, color, font-size/[20:35] 꿀팁/[20:46] 꿀팁/[20:55] 결과확인/[22:02] span 바꾸기/[22:18] 결과확인/[22:30] 상속관계확인/[22:41] 꿀팁/[22:44] text-decoration/[23:51] 꿀팁/[24:39] 꿀팁/[25:24] 꿀팁/[26:25] main_ju/[26:37] 꿀팁/[26:41] 꿀팁/[26:46] 꿀팁/[27:25] h5, font-size, margin/[27:29] 꿀팁/[27:36] 꿀팁/[27:53] 꿀팁/[27:56] text-decoration/[27:57] 결과확인/[28:18] main_ju p/[28:20] 꿀팁/[28:45] 꿀팁/[29:12] main_ju li/[29:13] 꿀팁/[29:14] line-height/[29:46] li a, color/[30:04] 꿀팁/[30:25] font-size/[30:27] 꿀팁/[30:46] a:hover, background/[30:47] 꿀팁/[31:30] float:left/[31:38] 꿀팁/[32:20] 꿀팁/[32:29] border/[32:33] 꿀팁/[32:38] 결과 확인/[33:07] float:right/[33:11] 꿀팁/[33:26] 꿀팁/[33:25] main_ju/[33:42] margin, padding/[34:03] h5/[34:22] ul목록/[34:38] p태그/[35:04] li목록/[35:22] b태그/[35:34] a링크/[35:45] left/[35:47] 꿀팁/[36:05] right
-
20.35분 실전! 웹페이지 코딩의 기술! 웹페이지 코딩실습 5
우 메뉴, 퍼센트 제작
책갈피 : [00:00] 우측 메뉴 세팅/[00:41] right/[00:48] width, float/[00:53] 꿀팁/[01:14] 제목글/[01:29] 꿀팁/[01:33] position, padding/[01:37] 꿀팁/[02:03] 꿀팁/[02:33] h3 span/[03:05] 꿀팁/[03:15] font-size/[03:18] 꿀팁/[03:39] 꿀팁/[03:44] 꿀팁/[03:49] background-color/[03:58] 상속 관계/[04:05] h3/[04:07] 꿀팁/[04:44] 꿀팁/[05:01] h3 span a/[05:11] right/[05:52] newlist/[06:14] 꿀팁/[06:17] position:relative/[06:20] 꿀팁/[06:25] 꿀팁/[06:56] 꿀팁/[07:00] background-color/[07:20] 꿀팁/[07:38] newlist li/[08:01] 꿀팁/[08:14] 꿀팁/[08:44] 꿀팁/[09:10] newlist li a/[09:20] 꿀팁/[09:22] li a:hover, color/[09:45] 꿀팁/[09:47] padding/[10:00] 꿀팁/[10:27] 꿀팁/[10:42] 상속 관계/[11:18] ul목록/[11:44] li목록/[12:13] 꿀팁/[12:24] li a/[12:27] 꿀팁/[12:42] li span/[12:56] 꿀팁/[12:57] img/[13:28] 하단 리스트 추가/[13:38] datalist/[13:45] 꿀팁/[13:48] background-color/[13:50] 꿀팁/[14:05] 꿀팁/[14:09] padding, height/[14:40] 꿀팁/[15:26] font-weight:bold/[15:29] 꿀팁/[15:50] 꿀팁/[16:12] a:hover, text-decoration/[16:14] 꿀팁/[16:17] 꿀팁/[16:36] li .memo/[16:49] 꿀팁/[16:50] font-weight:normal/[17:19] li .name/[17:51] li b, display: block/[17:57] 꿀팁/[18:15] 꿀팁/[18:23] 꿀팁/[18:44] 결과확인/[18:51] 문제점/[19:21] 상속 관계/[19:26] datalist/[19:28] ul목록/[19:33] li목록/[19:49] 꿀팁/[19:53] li a/[21:02] 꿀팁/[21:05] 꿀팁/[20:18] li .memo/[20:39] li b/[21:01] bottom/[21:03] position, margin-top/[21:24] div/[21:43] footmenuA/[21:46] 꿀팁/[21:57] 꿀팁/[22:06] 꿀팁/[22:25] text-align:center/[22:27] 꿀팁/[22:40] img, margin/[22:52] 꿀팁/[22:55] footmenuA img/[23:29] 꿀팁/[23:30] footmenuA .red/[23:45] footmenuA .blue/[23:50] a:hover, text-decoration/[23:52] 꿀팁/[24:14] 꿀팁/[24:15] footmenuB/[24:26] 꿀팁/[24:48] 꿀팁/[25:50] 꿀팁/[25:56] 꿀팁/[24:54] 상속 관계/[26:02] W3C css/[29:11] 파일명 교체/[31:08] 꿀팁/[31:10] clear: both, width/[31:15] 결과 확인/[32:18] margin/[33:31] width, position/[31:34] 꿀팁/[32:16] 꿀팁/[33:25] 꿀팁/[34:39] margin:10px/[34:34] 꿀팁/[34:44] 결과 확인
- 홈페이지 제작 [특강]
-
21.36분 레이아웃의 기본이해1
html5 레이아웃, 종류별 메뉴
책갈피 : [00:00] 레이아웃 설정/[00:59] font-family 설정/[01:34] word-break/[03:33] a 링크/[04:26] outline: none/[05:19] a:hover, a:focus/[06:35] list-style: none/[06:45] 공통 적용 사항 설정/[07:20] container/[09:32] header/[10:23] line-height/[12:28] nav/[14:25] nav li/[15:39] position: relative/[16:48] text-align: center/[17:28] nav li a/[17:59] overflow: hidden/[19:58] nav li a:hover/[23:35] 메뉴 사이 구분선 생성/[24:40] 아이콘 삽입하기/[28:08] 오류 수정/[29:27] 아이콘 위치 변경하기/[31:44] nav .main_newimg/[32:40] nav li img/[34:39] 실습메뉴2/[35:28] .nava
-
22.37분 레이아웃의 기본이해2
아무도 알려주지 않은 버그해결, 또다른 하단 메뉴
책갈피 : [00:00] display: inline/[02:49] display: inline-block/[03:43] display: block/[04:35] margin-right/[06:20] 가운데로 메뉴 정의/[08:35] text-align: center/[09:16] first-child/[11:02] last-child/[11:56] 가상요소/[12:38] 모바일 홈페이지/[13:50] 검색바 추가/[15:06] 검색바 위치 정의1/[17:16] position: relative/[17:56] 검색바 위치 정의2/[18:28] float: right/[20:02] input 설정/[22:56] 소스 확인/[23:44] position:relative/[24:49] article 정의/[26:21] line-height/[27:21] footer 정의/[28:34] float: left/[29:39] ul 목록 정의/[30:48] li 목록 정의/[31:58] 메뉴 사이 구분선 생성/[32:15] 소스 확인/[33:29] 메뉴 색상 변경/[33:53] first-child, last-child/[36:14] copyright/[36:26] clear: both
