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