웹표준 [실무] + CSS코드 분석 - 총 18시간 28분 / 강의당평균 : 55분23초

웹표준 [실무] + CSS코드 분석

전체 : 18시간 28분 / 강의당평균 : 55분23초

CSS2.1 실무

01 XP-IE8 과 윈도우7-IE8 은 다릅니다! UTF-8 에 따른 DTD선언,실무적인 CSS기본선언

charset=utf-8 과 XHTML 1.0 선언 했을때 작업해야 될 내용들을 실무로 보여드립니다. 실무 작업하다 보니 IE8이라도 XP와 윈도우7 은 다른점이 있어서 알려드립니다.

45분

책갈피 : [00:06] 웹표준 실무 / [01:46] xp IE8과 윈도우7 IE8 / [02:27] 브라우저 접속 / [03:07] 윈도우7 / [03:28] 볼릿기호가 생긴 문제점 / [04:00] xp IE8 접속 / [04:30] IE tester / [05:38] xp IE8과 윈도우7 IE8 차이 확인 / [06:00] 해결 방법 / [06:46] li목록 확인 / [07:00] list-style을 none으로 설정 후 저장 / [07:12] 윈도우7 IE8에서 새로고침 / [07:46] 윈도우7 IE8에 여백이 생긴 이유 / [08:20] padding값을 0으로 설정 / [10:11] utf8로 변경하는 부분 / [10:56] 서버 언어셋 셋팅-utf8 / [12:05] index.html을 editplus3으로 열기 / [12:50] 내부 내용까지 utf8로 바꾸기 / [13:09] utf8.exe 실행 / [13:20] euckr에서 utf8로 변경 / [13:45] 서브 dir까지 일괄변환 / [14:03] index.html utf8로 변경된 것 확인 / [14:22] 내부 내용 변경 / [15:35] 변경 후 업로드 / [16:03] 확인 / [17:37] 인증마크 / [19:48] 159에러 확인 / [20:33] 에러 수정 후 새로고침 / [22:55] li값 마무리 / [23:33] 18line 수정 / [25:45] body값과 img값 / [26:15] 다른 내용으로 변경 / [26:37] overflow / [28:11] word-break:break-all / [29:17] keep과 break의 차이 / [31:14] body,input,button / [31:22] em과 pixel / [32:05] 스마트폰이나 태블릿 인지를 위해 em을 사용 / [32:22] line-height:1.5em 선언의 이유 / [34:52] fieldset / [35:49] li list-style none으로 설정 / [36:22] border-color / [36:45] a링크 선언 / [37:15] border-collapse:collapse

02 레이아웃 좀더 실무적으로 접근하자, 존속되는 내용만 완벽히 알아도 OK

많은 분들이 레이아웃 을 다양하게 다루어 보고 싶다고 합니다. 그런데 그렇게 다양하게 다룰줄 아시려면 기본적인 내용을 완벽히 아셔야 합니다. 예를 들어 #으로 지정된 항목들이 해당내용만 적용되는것이 아니라 여러가지 정의한 내용들이 존속을 받고 있다는 것까지 세부적으로 알려드립니다.

42분

책갈피 : [00:27] 레이아웃 구체적으로 알아보기 / [00:58] html(고정)과 css(수정) / [01:52] layout.html / [03:00] body값 내용 추가 / [03:22] width값을 800px로 정한 이유 / [05:00] wrap / [06:30] wrap값 안에 종속되어 있는 것들 / [07:15] 상속받는 값 / [07:29] 정렬의 center값 / [07:45] body,input,button / [08:28] header값 설정 / [09:56] header,container,footer / [10:33] header값에 대한 정의 / [10:52] position / [11:33] height / [13:05] header값 종속받은 것 / [13:28] overflow속성 / [14:03] visible / [15:11] relative / [16:26] wrap값에 margin과 padding종속 / [16:48] header값은 padding만 종속 / [18:03] body-종속은 됐지만 적용은 안된 값 / [18:48] body,input,button / [20:07] container / [21:33] zoom값 1 / [23:07] clear:both의 역할 / [24:48] after와 content / [26:11] footer / [27:18] position:relative / [27:30] clear:both / [28:15] padding(내부여백) / [28:33] footer기능의 상속 과정 / [30:00] width값을 600px로 변경 / [30:47] container값 2개로 나누기 / [31:07] left / [31:33] float에 대한 절대값 / [31:51] 저장 / [33:07] left값 상속관계 / [33:49] #header,#container,#footer 적용 / [35:00] right / [35:36] background-color값 / [35:42] 저장 / [36:12] 해결 방법 / [39:07] 내용 삽입 / [39:45] float에 대한 절대값을 없앴을 경우 / [40:49] bottom값의 15px / [41:52] margin-top값으로 변경

03 상황에 따른 요소 출력방법

레이아웃만 가지고는 아무것도 할수 없기때문에 실제 홈페이지를 제작한다고 예를 들고 코딩을 해나가기 시작합니다. 많은 분들이 요청하셨던 실제 사용되는 위치별 구성을 상황에 맞도록 배치 하는 강의입니다. 절대위치를 위주로 작업하게 되며 상황에 맞는 핵처리 등을 배우실수 있게 됩니다.

1시간 2분

책갈피 : [00:47] 헤더부분 세팅 / [01:19] layout의 헤더부분 코딩 / [01:32] logo / [01:53] absolute로 작업 / [02:15] 내용 확인 / [02:51] header값에 h1 / [03:21] 오른쪽을 기준으로 작업 / [03:49] a링크에 block처리 / [04:30] logo-img값 적용 / [04:46] 마진과 패딩 0처리 / [05:15] font-size/color값 적용 안됨 / [06:30] message를 로고 왼쪽에 배치 / [07:00] message클래스의 값 / [07:24] padding / [07:46] 로고와 높이가 맞지않는 이유 / [08:39] 높이값 입력 / [10:33] text를 한줄만 보이게 변경 / [11:24] line-height / [11:46] line-height값 1.4em으로 변경 / [12:11] line-height값 1.2em으로 변경 / [12:54] border와 padding인식 / [14:50] margin값 0적용 / [15:22] text-align:left적용 / [15:54] dd태그와 dt태그 / [16:47] dl태그 / [16:52] 저장 / [17:22] right,top absolute값으로 좌표 지정 / [17:29] float 절대값 정렬 / [17:37] 저장 / [17:55] padding-left:13px / [18:18] text사이의 img / [19:02] a링크의 color값 / [19:45] text말고 img를 넣어야 할 때 / [20:33] img에 수직정렬 / [22:25] 위 아래 투명 이미지 / [23:11] 다음 포털사이트의 메뉴 이미지 선택 / [23:32] 네이버 포털사이트의 메뉴 이미지 선택 / [24:52] 알지오 메뉴-li태그 높이값 / [25:15] 상속되는 관계 / [25:47] class에 span 기본 상속 / [25:56] 링크가 있고 class에 mi가 상속 / [26:11] 저장 후 상단에 링크로 나오는것 확인 / [26:30] too_menu생성 / [26:40] absolute값 / [27:52] margin:0과 padding:0적용 / [28:40] 글꼴과 text-align:left적용 / [29:03] header값으로 들어가 있기 때문에 상속 / [30:48] span.mi클래스 추가 / [31:11] 확인 / [31:51] 수평정렬의 문제 / [32:45] img가 올라가지 않는 이유-bg개념 / [34:05] display:inline을 block처리 / [34:37] letter-spacing / [35:30] left값으로 맞춰보기 / [36:22] font-size변경 / [37:04] 넓이 정하기 / [38:07] 브라우저 padding값과 margin값을 계산하지 않아 생긴 문제 / [39:12] width값은 padding값 포함 225px / [39:20] border값 포함해서 227px / [39:36] 확인 / [40:07] background삽입 / [40:29] 사이즈가 227px인것 확인 / [41:07] background제거 / [41:28] text정렬값을 center / [41:37] 새로고침 확인 / [42:07] span이 상속된 값 / [44:22] color값 적용 / [44:30] font-family/line-height값 적용

04 utf-8 및 em변경 문제, 패드나 태블릿pc에서의 표준화 필요

시즌2 강의에서 진행한 프로젝트 파일을 가지고 utf-8로 강의를 진행하여, 문제가 발생하는 브라우저의 문제를 해결하고 앞으로 모두 em으로 진행하면서 중복되는 문제를 해결합니다. 태블릿pc에서도 표준화를 적용해야하는 이유를 시뮬레이터를 통해 강의합니다.

18분

책갈피 : [00:10] 에뮬레이터와 시뮬레이터 설치 후 홈페이지 표준으로 코딩 / [00:38] 에뮬레이터 설치 이유 / [01:33] utf-8로 변경하기 / [02:53] html문서 원격저장 / [03:05] 우측 하단에 내용 확인 / [03:22] 원격저장 / [03:51] 인코딩을 utf-8로 변경 후 저장 / [04:00] 웹사이트 열어보기 / [04:25] meta태그에 euc-kr선언을 변경 / [04:46] 저장 후 새로고침 확인 / [05:15] 연동되는 css파일까지 전부 변경 / [06:15] document dtd선언 / [07:30] px을 em으로 바꾸기 / [07:59] em태그로 바꾸기 위해 css파일 수정 / [08:22] em과 px차이점 / [08:48] font검색해서 px찾기 / [09:09] font:13px를 font:0.8em으로 일괄 변경 / [09:26] 변경된것 확인 / [10:11] font:15px를 font:0.95em으로 일괄 변경 / [10:28] font:11px를 font:0.7em으로 일괄 변경 / [10:45] 글자가 작게 깨지는 문제점 / [11:54] 아이디저장 부분의 span값 / [12:09] login확인 / [12:26] mem클래스 확인 / [12:56] login에 있는 부분 삭제 / [13:07] 문제없이 나오는 것 확인 / [14:07] user / [14:28] user부분만 남기고 나머지 부분 삭제 / [15:09] 저장 확인 하면 제대로 나오는 것 확인 / [16:11] 문제점을 해결하기 위한 방법 / [17:33] css파일 원격저장으로 인코딩을 utf-8로 변경

05 적용할 수 있는 웹페이지를 제작합니다 NO1.

XHTML로 제작하고 웹표준 인증마크를 받을 수 있도록 제작하여, 모든 브라우저 및 태블릿과 스마트폰까지 동일하게 적용됩니다.

56분

책갈피 : [01:21] 오른쪽 하단 문서 속성 확인 / [01:30] css는 ansi/html은 utf-8 / [01:53] 문서 선언 / [02:35] xml과 html의 통합된 내용 / [03:07] dtd선언 / [03:38] html까지 선언 / [04:00] meta태그 / [04:46] css를 stylesheet로 지정 / [05:00] title적용 후 head마무리 / [05:30] utf-8로 적용했을 경우 문서 속성도 utf-8 / [05:59] div세팅 / [06:30] 문서 저장 후 css선언 / [06:45] 전부 적용 / [06:57] margin과 padding은 0으로 선언 / [07:15] body의 내용 / [07:39] sans-serif / [08:11] color값 / [08:41] tect-decoration은 none으로 설정 / [09:07] a:hover, a:focus / [09:39] p태그 / [10:31] line-height(줄간격) / [10:58] em태그 사용 이유 / [11:41] img태그-border값 / [12:16] content / [12:26] margin:0 auto / [13:50] 기본적인 문서 선언 / [14:07] 상단 내용 만들기 / [14:35] div 따로 선언 / [15:00] 저장 후 새로고침 확인 / [15:35] h1 / [16:02] letter-spacing(자간간격) / [16:22] padding-bottom / [16:48] span값 세팅 / [17:47] top-menu / [18:15] margin-top값 입력 / [18:48] li태그 / [19:03] ul태그 / [19:33] display:inline / [20:15] a링크 / [21:06] font color를 따로 설정 / [21:52] font-weight를 bold처리 / [22:22] 상하좌우 padding값 적용 / [22:48] 마우스 오버했을 경우 / [23:07] 마우스 오버 컬러 정의 / [24:07] 마우스 오버했을 때 font color와 bg색 설정 / [24:48] top-bina / [24:59] float에대한 절대값 left로 하는 이유 / [25:48] width값 설정 확인 / [26:21] p태그 / [27:03] plo / [27:41] position:relative / [28:00] text-align:right / [28:22] 저장 후 확인 / [30:03] z-index:-1 / [31:00] m2_line / [31:11] clear:both / [31:52] solid값 / [32:20] margin-bottom / [32:58] munue class사용 / [33:14] css명을 두가지로 쓸때 / [34:06] css적용 / [34:22] munue class정의 / [35:04] margin값 설정 / [35:27] h3정하기 / [36:00] font-size와 padding-bottom값 입력 후 확인 / [36:34] munue h3정의 / [36:45] border-left와 solid값 입력 후 확인 / [37:52] munue a정의 / [37:59] font-weight:bold / [38:22] p태그 / [38:45] munue p의 margin-bottom값 / [39:22] jiaj정의 / [39:30] border-left와 solid값 입력 / [39:52] padding으로 여백 / [40:29] ollla정의 / [40:37] margin-right를 0값으로 적용 / [41:37] m_line / [42:07] clear:both선언/실선 / [42:34] margin-bottom값 입력 / [43:15] m_line p태그 정의 / [43:52] 저장 후 새로고침 / [46:05] mun_ueb정의 / [46:15] position은 relative로 설정 / [46:42] fourth정의 / [47:51] 외부여백 정의 / [48:22] solid값으로 구분 / [49:35] h4, h5정의 / [50:28] fourth p, fourth.ollla정의 / [51:37] m3_line정의 / [51:57] clear:both와 margin-bottom적용 / [52:37] footer / [53:37] foot정의 / [54:15] 새로고침 확인 / [54:30] foot a링크 / [55:12] menu-f / [55:27] 새로고침 확인

06 적용할수 있는 웹페이지를 제작합니다 NO2.

XHTML로 제작하고 웹표준 인증마크를 받을 수 있도록 제작하여, 모든 브라우저 및 태블릿과 스마트폰까지 동일하게 적용됩니다.

35분

책갈피 : [00:10] 해상도 / [01:23] css3로 작업했을 때 그래픽 완벽하게 가능 / [01:47] utf-8로 설정 후 저장 / [02:38] title변경 / [03:15] header선언 / [03:57] body선언 / [04:15] sans-serif / [04:43] a링크 / [04:53] text-decoration / [05:00] p태그 / [05:15] line-height / [05:46] #header정의 / [06:00] 퍼센트 정하기 / [06:57] #header h1정의 / [07:09] color와 정렬값 / [08:03] #wrap정의 / [08:20] width값 98% / [08:35] 본문에 메뉴 삽입 / [08:50] img는 border:0적용 / [09:18] #top_menu정의 / [09:50] #top_menu a정의 / [10:22] 마우스 오버했을 경우 컬러값 변경 / [11:00] #top_menu.p정의 / [11:22] 왼쪽에 숨김메뉴 만들기 / [12:15] #left-m정의 / [12:26] float:left / [12:50] 저장 후 확인 / [13:28] #menu정의 / [13:43] position:relative / [13:48] #menu a정의 / [14:01] line-height / [14:35] #menu span정의 / [15:26] #menu a:hover / [15:52] 새로고침 확인 / [16:44] span으로 박스값 넣기 / [17:00] #left-m.boxa정의 / [17:32] 내부여백 / [17:52] #left-m p정의 / [18:37] 한글이 많을 때는 font-family:굴림 / [19:11] text-align:justify / [19:40] 본문 제목 입력 / [20:03] #amain정의 / [20:41] float에 대한 절대값 정렬 / [21:00] margin을 주는 이유 / [21:32] 저장 후 새로고침 / [22:37] .maintwo정의 / [23:15] .maintwo p정의 / [23:45] padding값 적용 / [24:18] .bottbox정의 / [24:33] position:relative / [25:14] .bottbox p, .bottbox h2정의 / [26:03] .bottbox .left정의 / [26:41] 새로고침 확인 / [27:03] .bottbox .right정의 / [27:15] bg컬러만 left와 다르게 설정 / [27:48] border값을 흰색으로 보이지 않게 설정 / [28:30] 오른쪽 내용 정의 / [29:00] #right정의 / [29:48] #right .box정의 / [30:11] margin-bottom값 / [30:52] #footer정의 / [31:29] 저장 후 내용 확인 / [32:37] width값은 반드시 100%로 설정 / [32:59] #footer a정의 / [33:22] 저장 후 확인 / [33:57] margin값 입력 / [34:15] #footer p정의 / [34:37] #footer p a정의

07 적용할수 있는 웹페이지를 제작합니다 NO3.

XHTML로 제작하고 웹표준 인증마크를 받을 수 있도록 제작하여, 모든 브라우저 및 태블릿과 스마트폰까지 동일하게 적용됩니다.

60분

책갈피 : [00:45] 기본적인 문서 선언 / [01:07] body정의 / [01:26] a링크 정의 / [02:00] a:hover정의 / [02:14] a링크의 text-decoration / [02:21] img정의 / [02:53] header정하기 / [04:15] #header정의 / [04:28] 요소를 가운데로 오게 설정 / [04:55] #logo정의 / [05:14] float에 대한 절대정렬 / [05:40] padding-top값 입력 / [06:15] header의 면적 확인 / [07:15] #logo h1정의 / [07:42] font-weight:bold / [08:01] #logo h1 a정의 / [08:28] #logo h1 a:hover정의 / [08:58] a링크와 a:hover를 따로 정의 했을 때 / [09:35] #logo_a정의 / [10:13] border-left값 입력 / [10:56] padding-left값 입력 / [12:52] 메뉴들 떨어뜨려서 정렬 / [13:13] #top_right정의 / [13:43] text-align:right / [14:16] #top_right a정의 / [14:54] bg컬러 삽입 / [15:07] margin-left값 / [15:35] 새로고침 확인 / [15:52] border-bottom값 입력 / [16:18] #top_right a:hover정의 / [16:52] border-bottom값 입력 / [19:15] a링크의 text-decoration:none값만 적용 / [20:10] 기본적인 메뉴 작업 / [20:36] content / [20:48] #content정의 / [21:26] #articles정의 / [21:44] margin: 0 auto 10px auto / [22:52] #main정의 / [23:11] margin-right:10px을 왜 주는지 확인 / [23:56] #main h2정의 / [24:14] #main h2 a정의 / [24:33] #main h2 a:hover정의 / [25:15] #main p정의 / [25:30] line-height / [25:45] time태그 / [26:10] #main .time정의 / [27:15] #main .time a정의 / [28:15] background:none적용 / [28:52] 외부여백 10px정한 부분 / [29:22] h2 / [30:18] p태그 살펴보기 / [32:22] #right정의(나머지 값) / [33:15] #search정의 / [34:30] input.texta정의 / [35:19] 검색창 내부 글꼴의 굵기 설정 / [36:15] input.bna정의 / [37:07] border:none적용 / [38:22] cursor:pointer적용 / [39:52] input.texta:hover정의 / [42:14] .righ-box정의 / [42:52] margin상하값만 적용 / [43:21] line-height적용 / [43:37] .righ-box a정의 / [44:00] .righ-box a:hover정의 / [44:42] .righ-box_two정의 / [45:05] font-weight:bold적용 / [45:28] margin상하값만 적용 / [46:12] 새로고침 후 확인 / [47:52] #rmenu정의 / [48:07] #rmenu a정의 / [48:45] padding값 적용 / [49:15] #rmenu a:hover정의 / [50:06] #main-bar정의 / [51:00] 넓이 따로 지정 / [51:50] 새로고침 확인 / [52:35] #main-bartwo정의 / [52:58] 가운데 정렬 적용 / [54:15] text-align:center적용 / [55:00] padding 상하좌우 10px부분 / [55:58] padding 상하 10px부분 / [57:04] #footer정의 / [57:51] #footer p정의

08 적용할수 있는 웹페이지를 제작합니다 NO4.

XHTML로 제작하고 웹표준 인증마크를 받을 수 있도록 제작하여, 모든 브라우저 및 태블릿과 스마트폰까지 동일하게 적용됩니다.

42분

책갈피 : [01:15] utf-8세팅 / [01:38] 기본적인 틀 만들기 / [01:59] css선언 / [02:43] #container정의 / [03:07] html의 기본 내용 넣기 / [04:41] #topbax정의 / [04:54] text-align:right적용 / [05:30] 저장 후 확인 / [06:23] margin-bottom값 적용 / [07:00] border-bottom값 적용 / [08:16] #topbax .logosub정의 / [08:46] float에대한 절대값 / [09:11] font-weight:bold적용 / [10:13] #topbax .logosub span정의 / [11:11] letter-spacing적용 / [12:13] #leftnavi정의 / [12:33] 넓이값 200px적용 / [13:01] font-size 0.9em적용 / [13:26] #leftnavi ul정의 / [14:05] border-right solid값 적용 / [14:33] #leftnavi li정의 / [14:54] font-size적용 / [15:39] height값 적용 / [16:03] dotted적용 / [16:26] #leftnavi li a정의 / [17:11] display:block적용 / [17:52] padding-right적용 / [18:26] #leftnavi li a:hover정의 / [19:11] .lefttwo정의 / [19:21] position:relative적용 / [19:52] line-height적용 / [20:21] h1정의 / [20:40] margin-bottom적용 / [20:55] padding-top적용 / [21:21] padding-bottom적용 / [22:33] 저장 / [23:32] .lefttwo .sp정의 / [24:15] margin-top적용 / [25:22] 저장 후 확인 / [25:56] #main_m정의 / [26:56] padding-left적용 / [27:15] line-height적용 / [27:56] #main_m h2정의 / [28:47] #main_m p정의 / [29:00] width:300px적용 / [29:56] .main_ma정의 / [31:18] padding으로 내부여백 적용 / [31:37] border-left적용 / [32:22] .main_ma p정의 / [32:37] font-size 퍼센트로 적용 / [33:45] .main_ma a정의 / [34:30] border-bottom값 적용 / [35:22] .main_mb정의 / [36:20] margin적용 / [36:44] 좌우의 padding값 적용 / [37:13] border-left적용 / [38:36] #main_mc정의 / [39:14] solid값으로 상자형태 / [39:45] #main_mc p정의 / [40:34] #footer정의 / [40:50] text-align값 right적용 / [41:07] 확인 / [41:22] margin값 적용 / [41:52] #footer a정의 / [42:07] underline적용 / [42:14] #footer a:hover정의

09 적용할수 있는 웹페이지를 제작합니다 NO5.

XHTML로 제작하고 웹표준 인증마크를 받을 수 있도록 제작하여, 모든 브라우저 및 태블릿과 스마트폰까지 동일하게 적용됩니다.

1시간 7분

책갈피 : [01:00] 틀 만들기 / [01:32] body정의 / [02:07] sans-serif체 / [02:38] a링크 정의 / [02:49] bg inherit(상위값 상속)적용 / [03:23] a:hover정의 / [03:46] inherit(상위값 상속)적용 / [04:30] p태그 정의 / [05:27] line-height적용 / [05:46] img정의 / [06:09] border값 0으로 적용 / [06:46] #content정의 / [07:11] margin:20px auto적용 / [08:13] 위에서 20px떨어진 상태로 가운데 정렬 / [08:35] background적용 / [09:58] .header정의 / [10:16] padding값 상하좌우 적용 / [10:56] 높이 값을 정의 해야하는 이유 / [12:00] 브라우저 확인 / [13:03] .rightm정의 / [13:56] float:right / [14:43] #navi정의 / [15:09] #navi ul정의 / [15:31] list-style:none로 처리 / [15:48] 저장 후 확인 / [16:10] #navi li정의 / [16:48] li마다 넓이 정하기 / [18:51] 구분선 border-right적용 / [19:07] #navi a정의 / [20:11] text-align값을 center로 적용 / [20:22] display:block처리 / [20:48] 내부영역 정하기 / [21:18] text-decoration:none적용 / [25:02] #navi li.current정의 / [25:41] #navi li.current a정의 / [26:56] #navi li.a:hover정의 / [27:25] #navi li a:hover변경 / [28:18] #searchon정의 / [28:41] clear:both적용 / [29:07] bg삽입 / [29:37] padding적용 / [29:52] 확인 후 padding-left값 적용 / [30:26] #searchon p태그 정의 / [30:56] #searchon form태그 정의 / [31:40] #searchon input.sa정의 / [32:00] border값 적용 / [32:12] input에 라인값 적용 이유 / [32:37] 내부여백 상하좌우 적용 / [33:07] #searchon input.sb정의 / [33:44] 버튼의 넓이 조정 / [36:22] #logoon정의 / [36:52] bg컬러 적용 / [37:52] border-top과 border-bottom적용 / [38:43] #logoon p태그 정의 / [39:21] #logoon p a태그 정의 / [39:58] text-decoration:none적용 / [41:30] .headertwo정의 / [42:36] .headertwo p a정의 / [42:44] display:block과 font-weight:bold적용 / [44:30] #left정의 / [45:00] width:620px적용 / [45:42] margin-right적용 / [46:13] .left_m정의 / [46:30] float:left적용 / [47:30] 넓이 170px로 설정 / [48:22] padding-left정의 / [48:52] .top_title정의 / [49:19] height와 width적용 / [50:07] .top_title h2정의 / [51:13] .box정의 / [51:30] border-left와 border-right적용 / [52:07] border-bottom값 적용 / [52:28] 내부여백 / [52:49] padding-bottom값 / [53:36] margin-bottom값 / [54:52] .main_m정의 / [55:05] float에 대한 절대값 right로 적용 / [55:15] 넓이값 정하기 / [55:43] .article정의 / [56:22] .article img정의 / [56:57] margin값 / [57:07] border값 / [57:43] .article h2정의 / [58:07] .article h3정의 / [59:07] .right정의 / [60:04] .bottom_box정의 / [60:44] 구분을 위해 bg컬러 삽입 / [60:57] .bottom_box a정의 / [61:22] .bottom_box a:hover정의 / [61:52] .bottom_box p정의 / [62:30] border-bottom값 / [63:22] #footer정의 / [63:30] position:relative적용 / [64:00] clear:both적용 / [64:40] text값 가운데로 하고 bg컬러는 진하게 적용 / [65:00] padding 상하 값 적용 / [65:40] #footer p정의 / [66:15] #footer a정의 / [66:40] 밑줄 대신 dotted사용

CSS3, HTML5 실무

10 실무에 적용하는 HTML5, CSS3 ! (Series 1)

HTML5의 가상요소(::), CSS3의 linear-gradient, border-radius, box-shadow속성을 사용하여 웹페이지를 제작해 나갑니다.

48분

책갈피 : [01:17] css위주의 실습 / [02:30] utf-8설정 / [03:07] 모든 내용의 border를 0으로 처리 / [03:53] html, body, *의 font-family설정 / [04:56] 모든 텍스트 text-shadow효과 설정 / [06:13] 저장 확인 / [06:30] aside정의 / [07:15] label선언 / [07:58] display:block처리 / [09:56] input의 type를 구분해서 하는 이유 / [11:00] input type text, input type email, textarea / [11:11] linear-gradient로 bg적용 / [12:11] 저장 확인 / [12:35] border-radius값 적용 / [13:33] box-shadow값 적용 / [13:50] 저장 확인 / [14:18] 상단에 그림자 주기 / [14:46] rgba / [14:58] alpha값으로 불투명도 조절 / [15:28] inset / [16:18] 글꼴 값 / [16:29] letter-spacing / [16:41] line-height지정 / [17:17] padding 상하좌우로 지정 / [17:29] text-shadow / [18:59] width값 100%의 의미 / [19:15] max-width개체값의 최대값 지정 / [19:55] float절대값 반드시 설정 / [20:40] input type text:hover, input type email:hover, textarea:hover / [21:37] webkit계열 브라우저의 그라데이션 지원 방법 / [22:18] 저장 후 새로고침 / [22:55] top에서 bottom방향으로 linear-gradient 진행 / [23:21] text-shadow적용 / [24:14] 저장 확인 / [24:41] input type text:focus, input type email:focus, textarea:focus / [25:00] linear-gradient적용 / [25:15] 그라데이션 방향을 정하지 않았을 경우 기본값은 top / [26:18] text-shadow / [27:22] box-shadow설정 값 / [28:02] 저장 확인 / [28:41] inset으로 안쪽도 설정 / [29:15] input type text:focus:invalid+span.validate::before, input type email:focus:invalid+span.validate::before, textarea:focus:invalid+span.validate::before / [29:37] 인접선택자 / [30:29] input요소 + span요소 / [33:04] content / [33:30] 알파벳 x가 출력되도록 삽입 / [34:51] content내용 변경 / [35:37] required / [36:50] span.validate정의 / [37:12] margin-left설정 / [37:34] 저장 후 새로고침 / [38:43] submit / [39:07] 버튼 bg의 그라디언트 효과 / [39:59] border-radius값 / [40:22] box-shadow삽입 / [41:30] 텍스트 그림자 상단으로 삽입 / [41:52] font-family설정 / [42:06] letter-spacing설정 / [42:20] line-height설정 / [43:15] send버튼을 클릭했을 때의 변화 작업 / [43:22] active / [43:45] 클릭했을 때 bg 변화 / [44:36] 박스 그림자 설정 / [45:45] ::-webkit-input-placeholder / [46:30] 가상 요소

11 실무에 적용하는 HTML5, CSS3 ! (Series 2)

CSS3를 이용한 웹메뉴에 오버시 하부트리가 출력되는 방식이며 실무에 적용할 수 있는 내용으로 진행합니다.

38분

책갈피 : [00:28] 기본메뉴와 서브메뉴 / [02:12] utf-8설정 / [02:30] body처리 / [02:53] 이미지가 아닌 배경컬러를 주는 이유 / [03:37] a:link, a:visited, a:active / [04:00] 새로고침 확인 / [04:14] #menu정의 / [04:25] position:absolute지정 / [04:46] top과 right값 지정 / [05:30] font-size를 작게 설정 / [05:46] text-transform:upper case / [06:30] letter-spacing적용 / [07:11] #menu li정의 / [07:44] position:relative지정 / [08:35] display:block처리 / [09:54] float에 대한 절대값 정렬 / [10:15] padding-bottom / [11:11] #menu a링크 정의 / [12:20] height설정 / [12:43] bg컬러 rgba설정 / [13:20] line-height 높이값과 동일하게 설정 / [14:05] margin-left와 padding값 / [14:35] float의 절대값 반드시 필요 / [15:18] #menu strong정의 / [15:31] font-weight:normal로 설정 / [16:11] #menu .sublevel정의 / [17:06] position:absolute지정 / [18:51] 하위메뉴에 대한 배경 / [19:07] 넓이값 / [20:00] margin-top값 / [20:52] padding-bottom값 / [21:33] cursor:pointer설정 / [22:51] visibility:hidden설정 / [24:22] #menu li a정의 / [25:22] border-radius설정 / [25:52] #menu li:hover .sublevel정의 / [26:29] visivility:visible지정 / [27:22] 하단메뉴 이동 / [27:44] #menu li:hover a정의 / [28:02] height값 적용 / [29:41] border-bottom의 right와 left의 radius값을 0으로 지정 / [30:07] 저장 후 새로고침 확인 / [30:36] #menu li .sublevel a정의 / [31:18] cursor:pointer설정 / [31:36] height:auto로 설정하고 bg는 transparent로 설정 / [32:07] float는 none로 지정 / [32:37] text-transform을 none로 설정 / [33:29] line-height값 설정 / [33:52] padding값 설정 / [34:15] #menu li:hover a정의 / [35:07] #menu li .sublevel a정의 / [35:37] 저장 확인 / [35:58] #menu li .sublevel a:hover, #menu li .sublevel a:focus정의 / [36:22] focus와 hover의 다른점 / [37:04] background값 설정 / [37:24] 적용된 값 확인

12 실무에 적용하는 HTML5, CSS3 ! (Series 3)

CSS3의 transition, border-radius, text-shadow속성을 사용하여 마우스 오버 효과를 준 메뉴를 제작해 나갑니다.

49분

책갈피 : [00:23] html 문서내용 / [00:54] utf-8설정 / [01:30] 전체 적용 / [01:49] list-style:none설정 / [02:21] margin값 0으로 적용 / [02:36] padding값 0으로 적용 / [03:34] background:transparent설정 / [03:53] vertical-align:baseline설정 / [04:30] body정의 / [04:46] font선언 / [05:59] color값 설정 / [06:15] background 설정 / [06:46] h1, h2정의 / [07:43] a, a:visited, a:active정의 / [08:13] text-decoration:none적용 / [08:35] text-shadow적용 / [08:56] 저장 후 확인 / [09:58] transition:애니메이션 변화를 조절 / [10:39] transition-property / [10:50] transition-duration / [10:58] transition-delay / [11:09] transition-timing-function / [11:35] transition-duration: .2s적용 / [12:31] a:focus, a:hover정의 / [12:50] 배경 색 삽입 / [13:01] 글자 색 적용 / [13:33] text-shadow흐림효과만 삽입 / [14:18] border-radius적용 / [15:26] .list li정의 / [16:30] display:inline-block적용 / [17:00] padding값 넣기 / [17:22] margin-left적용 / [18:00] border-left 실선 적용 / [18:48] line-height적용 / [19:11] .list li:first-child정의 / [20:00] border-left를 none값으로 적용 / [20:25] margin-left와 padding-left를 0값 적용 / [21:00] .main정의 / [21:14] 기본 개체의 넓이 / [21:37] background정하기 / [22:51] text 또한 왼쪽정렬 / [23:30] border를 주고 border-radius값 입력 / [23:52] box-shadow적용 / [24:33] .wrap정의 / [25:03] border값을 주어 구분 / [25:45] border-radius값을 입력하여 둥글게 적용 / [26:25] .page-header정의 / [26:33] position:relative(상대배치) / [27:00] text-align을 가운데 정렬로 적용 / [27:22] .page-header h1정의 / [28:18] text-shadow적용 / [28:41] .page-header .current a정의 / [29:03] cursor:default적용 / [29:41] .page-header .current a:hover정의 / [30:33] .social li정의 / [31:07] float:right설정 / [31:40] .social a정의 / [31:52] display:block처리 / [32:07] min-height와 min-width적용 / [32:52] .social .facebook a, .social .twitter a정의 / [34:04] ul정의 / [34:36] list-style:none적용 / [35:00] .wrap .page-content정의 / [35:22] position:relative적용 / [36:22] 연회색으로 border값 입력 / [36:37] .page-content .vcard정의 / [37:49] .page-content section정의 / [38:07] .page-content h2정의 / [38:51] font-size 퍼센트로 적용 / [39:15] 2개의 그림자 효과 구분해서 적용 / [40:12] .page-content p정의 / [40:36] .social정의 / [41:30] .page-content ul정의 / [42:45] .page-content .resume-type a정의 / [43:27] background로 이미지 삽입 / [44:07] .page-content .resume-type정의 / [45:20] a[tooltip / [45:45] content의 속성 / [46:34] background컬러 삽입 / [47:15] tooltip내용의 position값 / [48:07] border와 border-radius값 적용 / [48:45] box의 발광 효과 / [49:04] text-shadow값 적용

13 실무에 적용하는 HTML5, CSS3 ! (Series 4)

마우스 롤오버시 하위메뉴가 펼쳐지는 메뉴와 마우스 롤오버시 부드럽게 움직이는 메뉴. 두가지 메뉴를 CSS3, HTML5 속성을 사용하여 제작해 나갑니다.

1시간 3분

책갈피 : [00:08] 마우스 오버시 펼쳐지는 메뉴 만들기 / [01:06] 자료 확인하기 / [01:29] 모든 요소의 margin과 padding값 0적용 / [02:07] body정의 / [02:22] 전체적인 text내용 설정 / [03:22] 확인 / [03:45] a링크 정의-밑줄 제거 / [04:00] a:focus정의 / [04:46] outline:red thin dotted적용 / [05:00] 빨간색의 점선 아웃라인 확인 / [05:30] #navcat정의 / [05:46] text-transform:uppercase적용 / [06:24] 글꼴의 굵기 설정 / [07:00] #navcat ul정의 / [07:30] ul요소에 따로 font-size설정 / [08:13] padding값을 좌우 1%적용 / [08:37] #navcat .pp정의 / [09:09] margin값 적용 / [10:15] #navcat li a정의 / [10:24] display:inline-block처리 / [11:13] margin과 padding값 설정 / [11:31] 메뉴를 구분할 수 있는 외곽선 삽입 / [12:39] border-radius값 입력 / [13:03] #navcat li a:hover정의 / [13:52] #navcat ul li정의 / [14:41] position:relative적용 / [15:13] #navcat ul ul정의 / [15:35] font-size설정 / [16:02] display:none값 적용 / [17:44] #navcat li:hover > ul정의 / [18:29] 부모요소의 li와 자식요소의 ul / [19:48] display:block적용 / [20:11] position:absolute적용 / [20:44] padding값 설정 / [21:33] #navcat ul ul li정의 / [21:51] margin과 padding값 적용 / [22:22] border-right와 border-left적용 / [23:07] #navcat ul ul li a정의 / [23:26] display:block처리 / [23:47] border값 0으로 적용 / [24:03] #navcat ul ul li:first-child정의 / [24:56] padding-top값 적용 / [25:11] #navcat ul ul li:last-child정의 / [25:30] padding-bottom값 적용 / [25:44] border-bottom값 적용 / [26:18] 두번째 메뉴 만들기 / [27:03] 먼저 결과물 확인 / [27:33] html문서 살펴보기 / [29:45] 전체요소의 정의 / [30:18] box-sizing:border-box적용 / [30:48] box-sizing의 속성값 / [31:37] color:inherit적용 / [31:52] outline, border, margin, padding 0값으로 적용 / [33:05] 링크 밑줄 없애기 / [33:20] body의 font속성 정의 / [34:19] 확인 / [34:45] h5, h6 공통적인 사항 정의 / [35:15] h5, h6 각각의 사항 정의 / [35:51] a:link, a:visited정의 / [36:14] text-shadow값 적용 / [36:30] transition값 적용 / [37:12] a:hover, a:active정의 / [37:36] color값과 그림자효과 적용 / [38:07] input요소 cursor:pointer로 정의 / [38:30] input type text, textarea정의 / [39:00] background적용 / [39:37] box-shadow적용 / [41:13] cursor:text설정 / [41:37] input type text:hover, textarea:hover정의 / [42:30] input type text:focus, textarea:focus정의 / [43:57] box-shadow설정 / [44:37] input type submit정의 / [45:35] box-shadow설정 / [46:37] padding 상하좌우 값 입력 / [46:49] input type submit:active정의 / [47:30] ::-webkit-input-placeholder / [48:05] 배경색상전환 / [48:28] form.searchform정의 / [48:57] positioｎ:fixed적용 / [49:45] form.searchform input.search-input정의 / [50:29] padding을 상하로 적용하고 padding-left적용 / [51:36] transition값을 검색창 요소에 적용 / [52:07] form.searchform input.searchsubmit정의 / [53:13] text-indent설정 / [54:19] form.searchform:hover input.search-input정의 / [55:19] 중간 테스트 / [55:42] form.searchform:hover input.searchsubmit정의 / [56:07] 라운드값을 기본적으로 0으로 설정 / [56:57] aside#alzioCart정의 / [57:30] box-shadow값 설정 / [57:52] transition설정 / [58:57] position 고정값으로 설정 / [59:45] aside#alzioCart a정의 / [60:29] aside#alzioCart:hover정의 / [61:19] aside#alzioCart h5정의 / [61:30] aside#alzioCart h6.price정의 / [62:09] margin-left값 적용

14 실무에 적용하는 HTML5, CSS3 ! (Series 5)

transform과 transition 속성을 이용해 애니메이션 효과를 넣고 메뉴와 홈페이지를 제작실습합니다.

53분

책갈피 : [00:11] 웹문서열기 / [00:28] nav 삽입 / [00:45] 이번강의 주요속성:transform / [01:02] body / [01:41] 모바일에서의 넓이사용 / [02:17] body의 css적용 출력화면 / [02:32] ul / [03:09] #menu > header ul / [03:39] float: right / [03:59] right값 상세설명 / [05:12] #menu > header ul li / [05:43] float: left / [05:58] css적용 출력화면 / [06:11] margin: 50px auto / [07:21] left값 상세설명 / [07:40] #menu > header ul li a / [08:06] display: block / [09:05] font-size: 1.3em / [09:23] padding: 1em / [09:55] css적용 출력화면 / [10:14] text-shadow: 0 1px 1px #848484 / [10:50] -webkit-transition-duration: .3s 주석처리 / [11:13] #menu > header ul li a:hover / [11:32] -webkit-transform: scale(1.4) rotate(-5deg) / [12:20] transform:scale / [12:25] transform:rotate / [12:43] transform 적용 출력화면 / [12:52] -webkit-transition-duration: .3s / [13:32] transition-duration 적용 출력화면 / [13:48] 새로운문서열기 / [14:29] header, section, nav, footer / [15:03] 전체적용 / [15:15] margin, padding / [16:30] css적용 출력화면 / [16:43] vertical-align: baseline / [17:29] body / [17:43] background: #1e3246 / [18:36] color: #788ca0 / [19:03] font일괄지정 / [19:26] text-shadow: 0 2px 0 #00000a / [19:56] css적용 출력화면 / [20:44] h1, h2, h3, h4, h5, h6 / [21:18] h1 / [21:42] h2 / [22:04] h4 / [22:18] a, a:visited / [23:08] a:hover, a:focus / [23:49] -webkit-transition: color 0.75s ease / [25:10] a:active / [26:02] #container / [26:58] header / [27:38] header ul / [27:59] header ul li / [28:52] header nav / [30:16] header nav ul li / [30:41] header nav ul li:first-child / [32:10] header nav ul li a, header nav li a:visited / [32:49] header nav ul li a:hover, nav ul li a:focus / [33:34] -webkit-gradient / [35:28] border-radius / [35:46] box-shadow / [36:13] text-shadow: none / [36:41] header nav ul li a:active / [36:56] -webkit-linear-gradient / [37:50] box-shadow / [39:50] #intro / [40:30] #intro h2 / [40:49] #content / [41:29] #content ul.thumbs / [41:51] #content ul.thumbs li / [42:48] #content ul.thumbs li a / [44:05] #content ul.thumbs li a:hover / [44:32] #content ul.thumbs li a:active / [45:04] #content ul.thumbs li a:hover img / [45:15] css적용 출력화면 / [46:24] 소스오류수정 / [46:54] #content ul.thumbs li a img / [47:02] opacity: 1 / [47:08] -webkit-transition: opacity 0.75s ease / [47:51] footer ul / [48:05] footer #cols / [49:55] footer #cols ul / [50:44] footer #cols ul li / [51:10] footer #cols .col / [52:03] footer #colophon

15 실무에 적용하는 HTML5, CSS3 ! (Series 6)

transform과 transition 등 CSS3속성을 적극 활용한 홈페이지와 메뉴제작 완벽실습.

56분

책갈피 : [00:15] 실무1-html 문서내용 / [00:35] body / [01:18] #wrap / [02:07] h2 / [02:30] font일괄지정 / [03:17] em / [03:40] background:#FACC2E / [04:18] em적용상황 / [04:42] a / [04:49] a:hover / [05:30] header / [05:48] header h1 / [07:02] header h1 a / [07:26] border-radius / [07:59] box-shadow / [08:31] transform:rotate(-4deg) / [09:31] margin-top, padding / [10:10] transition-property / [10:38] transition-duration / [11:08] header h1 a:hover / [11:17] transform:rotate(0deg) / [11:54] footer / [12:03] footer a / [12:09] footer a:hover / [12:30] footer .Twitter / [12:52] 실무2-html 문서내용 / [13:18] header, section,aside, nav, article / [13:32] body / [14:24] h2, h3 / [15:00] a / [15:29] a:link, a:visited / [15:56] a:hover, a:active / [16:50] ul / [17:26] .body / [18:04] #banner / [18:25] #banner nav / [20:02] #banner nav ul / [20:30] #banner nav li / [20:57] #banner nav a:link, #banner nav a:visited / [21:48] #banner nav a:hover, #banner nav a:active / [22:45] text-shadow / [23:00] banner nav li:first-child a / [23:18] border-radius: 5px / [23:32] #content / [25:13] #content h2 / [25:32] #content h3 / [25:44] #content h3 a:link, #content h3 a:visited / [26:08] #content h3 a:hover, #content h3 a:active / [26:24] #extras / [26:50] #extras ul / [27:28] #extras li / [27:50] #extras h2 / [28:16] #extras a:link, #extras a:visited / [29:19] #extras a:hover, #extras a:active / [29:26] #extras li:last-child / [30:00] #extras .blogroll / [30:43] #extras .social / [31:20] .footer / [31:27] .footer a / [31:35] 실무3-html 문서내용 / [31:54] * / [32:23] h1, h2, h3, p, blockquote, ol / [32:39] blockquote / [33:41] article, aside, footer, header, nav, section / [33:50] body / [34:02] a / [34:13] a:hover, a:focus / [34:38] #content / [35:46] .post / [36:14] box-shadow / [36:52] border-radius: 15px / [37:46] .post p, .post h2, .post h3 / [38:05] .post a / [38:50] .post footer / [39:54] .post footer p / [40:12] .post .tags / [40:22] .post .link / [41:34] .post .link h1 / [42:11] #content header / [43:30] #content header a / [43:48] #content header p / [44:01] #content header h1 / [44:24] #content header h1 a / [44:54] #content .last / [47:07] #pageheader / [48:44] #pageheader h1 a:hover / [49:00] #sidebar / [49:59] #sidebar section .widget / [51:02] #sidebar section .widget ul / [52:01] #sidebar section .widget li / [52:31] #sidebar section .widget li a:hover / [54:02] #sidebar section .widget .legal / [54:23] input(type="submit") / [55:13] #sidebar #search-2 input / [55:51] input(type="text")

16 실무에 적용하는 HTML5, CSS3 ! (Series 7)

실무에 사용할 수있는 버튼과 메뉴, 웹페이지를 css3속성을 사용해 제작하고 transform을 사용한 홈페이지 디자인. CSS3와 함께 실무에 적용하는 메뉴&홈페이지 제작합니다.

1시간 26분

책갈피 : [00:10] html,body/[00:56] font/[01:06] body/[01:14] a, a:hover/[01:29] h1/[02:17] 현재 적용상황/[02:25] #page/[02:58] padding: 0 250px 0 20px/[03:48] border-radius: 4px/[04:13] #pageHeade/[04:52] z-index: 2/[05:17] #pageHeader .logo/[05:35] #pageHeader .tagline/[06:16] font-family/[06:33] 현재 적용상황/[07:16] #pageContent/[08:29] position: relative/[09:00] #mainNav/[10:23] #mainNav .menu, #mainNav .menu li/[10:59] #mainNav .menu li a/[11:39] #mainNav .menu li a:hover/[12:39] #mainNav .menu li.white a/[13:23] nav#mainNav .submenu/[14:15] font-size: 18px/[14:54] #mainNav .submenu:hover/[15:14] #pageFooter/[16:04] #footNav ul/[16:14] #footNav li/[16:59] #footNav #first/[17:45] * , html,body/[18:02] body/[18:14] #container/[18:51] nav/[19:20] nav ul/[20:11] nav li a, nav li a:visited/[22:33] nav li a:hover/[23:45] nav li a:active/[25:01] nav li a/[26:20] * , body/[26:37] #wrapper, a, h3/[27:15] ul/[27:57] .menu/[28:56] .menu li a/[30:42] .menu li a:hover/[31:21] .menu .sub-menu/[32:35] .menu li:hover>.sub-menu/[33:24] .menu .sub-menu li/[34:05] .menu .sub-menu li a:hover/[34:24] #content/[35:34] #sidebar/[35:49] .widget li a/[36:25] .widget li a:hover/[37:05] .clearfix:after/[38:32] *, html, body/[39:20] #wrap/[40:06] 현재 적용상황/[40:19] #button/[41:55] span.title/[43:03] box-shadow/[43:50] -webkit-transition/[44:49] #in/[45:56] 현재 적용상황/[46:09] #in p/[47:08] .bottom/[47:30] .bottom:hover/[48:15] 실습1 alzio-menu3/[48:39] */[48:58] body, ul/[50:19] h2/[50:51] #container/[51:17] .menu/[52:04] .menu ul li/[53:00] -webkit-transform/[53:34] .menu ul li a/[54:12] .menu ul li.one, two, three/[54:24] .menu ul li.one/[55:06] .menu span/[55:48] .main/[56:21] margin: 0px auto;/[57:07] .rectangle/[57:18] .rectangle h2/[57:50] .left/[59:14] position: relative;/[59:51] .right/[01:00:22] .info/[01:00:52] .info h2/[01:01:11] .info p/[01:01:28] .info p a/[01:01:55] .info p a:hover/[01:02:03] .main .alzio/[01:02:22] 실습2 alzio120523-a/[01:02:53] body/[01:03:03] .h1, h4, p/[01:03:53] header .h1/[01:05:45] section/[01:05:59] .main/[01:06:25] .content/[01:07:27] nav/[01:07:51] nav ul li/[01:08:55] text-transform: uppercase/[01:09:30] nav a/[01:10:09] nav li:hover/[01:10:43] footer/[01:11:05] footer nav/[01:11:42] .footermenu/[01:11:57] .footermenu li/[01:14:07] 실습3 alzio120523-c/[01:14:19] */[01:14:26] body/[01:14:46] 웹폰트의 사용/[01:15:21] 웹폰트의 문제점/[01:15:44] #global/[01:16:13] #footer-push/[01:16:35] #contents-inner/[01:17:21] #home nav/[01:17:59] #home nav .right, #home nav .left/[01:19:09] #home nav .right/[01:19:53] #home #contents-inner/[01:19:58] overflow-x/[01:20:48] body/[01:21:06] #home nav p/[01:22:17] #home nav .right/[01:22:53] #home nav .left/[01:23:10] #home nav a/[01:23:22] #home nav #alzio1/[01:23:48] #home nav #alzio2/[01:24:13] #home nav #alzio3

[실무자 초빙 강의] 실무역량 강화를 위한 웹표준 실전편

17 잘 만들어진 웹사이트 제작 No1

실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기

1시간 25분

책갈피 : [00:00] 완성 홈페이지 살펴보기 / [01:08] 전체적인 레이아웃 / [02:36] 상단 헤더 / [03:15] header 정의 / [03:28] div class="bar" / [03:35] title / [03:53] 리셋 / [04:27] 여백 제거/넓이 지정/기본 스타일 정의 / [05:13] header a / [05:31] header a:hover / [05:56] header div.bar / [06:58] text-shadow / [07:37] header div a/span / [07:50] 로고 / [08:24] header a h1 / [09:11] 결과 확인 / [09:32] header a:hover h1 / [10:27] 상단 메뉴 / [10:44] nav 정의 / [11:05] 결과 확인 / [11:58] clear: both; / [12:57] nav ul li / [13:47] nav ul li a / [14:28] dispaly:block / [14:41] 결과 확인 / [15:05] nav ul li a em / [15:47] nav ul li a:hover / [16:59] transition / [18:47] nav ul li a.nav-on / [19:50] footer 정의 / [21:03] footer / [22:24] footer a / [23:13] footer .rt/footer .lt / [24:22] article 정의 / [26:11] section 추가 / [26:41] div class="col-1" / [27:01] div class="col-2" / [28:03] #welcome / [28:44] #welcome .col-1 / [29:14] #welcome .col-2 / [31:26] #welcome ul / [32:39] #welcome ul li / [35:15] #welcome ul.col-last li / [36:09] #welcome ul li a / [36:32] #welcome ul li a:hover / [37:15] section1 / [39:05] article / [40:09] section h2 / [41:52] text-shadow / [42:14] text transform: uppercase / [44:22] section h1 / [44:54] section a / [45:58] section p / [46:45] section a:hover / [47:21] section h1 a:hover / [48:57] section a.btn / [50:22] section a.btn span / [52:44] section a.btn:hover / [55:47] section a.btn:hover span / [59:28] section abbr / [01:01:02] section2 / [01:04:35] #recent-articles / [01:06:44] #recent-articles .article-1, #recent-articles .article-2 / [01:09:22] #recent-articles .article-1 / [01:10:14] #recent-articles .article-1 a img / [01:11:29] #recent-articles .article-1 h1,#recent-articles .article-1 p / [01:12:08] #recent-articles .article-2 / [01:12:59] #recent-articles .article-2 h1,#recent-articles .article-2 p / [01:13:48] #recent-articles .article-2 a.btn / [01:14:17] #recent-articles em / [01:15:20] #recent-articles .article-2 em / [01:16:25] #recent-articles a img / [01:17:52] section3 / [01:18:52] #personal-overview / [01:19:45] #personal-overview .overview-1 / [01:20:41] #personal-overview .overview-1 a img / [01:20:53] #personal-overview .overview-2 / [01:21:58] #personal-overview .overview-2 strong / [01:22:39] #personal-overview .overview-2 em / [01:23:30] #personal-overview .overview-2 ul / [01:24:33] #personal-overview .overview-2 ul.sq

18 잘 만들어진 웹사이트 제작 No2

실무에 활용도가 높은 메뉴&홈페이지 제작하면서 레이아웃 구성과 디자인 익히기

1시간 25분

책갈피 : [00:00] 완성 홈페이지 살펴보기 / [02:13] 전체적인 레이아웃 / [03:28] main / [03:57] article / [04:24] aside / [05:13] footer / [05:53] 상단 nav / [06:51] 현재 적용상황 / [07:31] #globalheader / [08:27] 현재 적용상황 / [09:32] box-shadow / [10:53] z-index / [11:26] #globalheader #globalnav / [11:54] #globalheader #globalnav li / [12:21] #globalheader #globalnav li a / [14:24] background / [15:33] #globalheader #globalnav li a span / [17:28] 메뉴 이미지 불러오기 / [18:08] hover/focus / [19:06] outline:none / [19:31] 버튼 3D 효과 / [19:53] #globalheader #globalnav li a active / [20:56] #globalheader #globalnav li#an-apple a / [23:21] 검색창 / [24:36] #globalsearch / [25:57] #g-search / [26:22] #sp-searchtext / [27:31] #sp-searchtext:focus / [28:50] #g-search label / [29:27] article 정의 / [30:28] div 생성 / [31:51] 이미지 삽입 / [32:15] 동영상 이미지 삽입 / [36:06] 현재 적용상황 / [37:10] 기본사항 / [39:32] #globalheader / [40:16] #main / [40:58] #billboard, .promos, #homefooter / [41:36] #billboard / [43:11] position:relative / [45:06] #billboard .videos / [47:14] display:block / [47:49] border solid / [48:53] content 생성 / [50:20] opacity / [51:20] box-shadow:inset / [53:13] #billboard .videos-thumb i img / [54:11] #billboard .videos-thumb:hover i .play / [58:18] webkit-transition / [59:56] #billboard .videos-thumb .link / [01:00:45] 레이아웃 정리 / [01:02:01] #billboard .hero-image / [01:02:46] #billboard .hero-image img / [01:03:16] overflow:hidden / [01:04:06] z-index / [01:05:01] aside 정의 / [01:06:05] li 추가 / [01:06:36] 현재 적용상황 / [01:07:04] .promos ul / [01:07:41] .promos ul li / [01:09:24] .promos ul li.first-child / [01:11:10] .promos ul li.last-child / [01:12:12] border-radius / [01:15:05] .promos ul:after / [01:18:06] .promos ul li a

CSS코드 분석

19 CSS코드 분석 활용 방법

다른 웹사이트에 적용된 CSS코딩을 내 웹페이지에 그대로 적용할 수 있게 하는 방법 및 어떤 웹페이지도 분석해낼수 있는 CSS코딩의 지존이 될 수 있는 고급기술을 알려드립니다.

56분

책갈피 : [00:04] 웹표준 사이트 제작의 기본 단계 / [01:15] 웹표준 사이트의 구성요소 / [04:10] 웹표준의 주요점 / [04:30] 브라우저의 예 / [05:30] 웹표준이 잘 적용되는 브라우저 순서 / [08:35] 간단한 플러그인 사용 / [08:56] 확장 프로그램 보기 / [09:45] 플러그인 사용법 / [10:37] 플러그인 작동 방식 / [11:26] 자바스크립트를 이용하여 이동하기 / [12:16] 플러그인 사용해 사이트 살펴보기 / [13:22] 페이지 소스보기 / [14:16] 요소검사 / [15:05] css 부분 보기 / [16:03] 속성 적용 / [17:56] computed style 보기 / [18:37] Resources 부분 보기 / [19:03] Fonts / [19:25] Images / [20:11] 주소값을 이용해 이미지값 적용확인 / [20:37] Stylesheets / [21:10] 홈페이지 주소 적용후 확인 / [22:26] 이미지에 적용된 구성 확인 / [23:37] 이미지 오퍼시티 해제 / [25:15] 연습작업 / [25:32] 새 문서에 소스 적용 / [26:00] css 스타일 적용되는 부분 살펴보기 / [27:07] class=top 보기 / [28:03] main 클래스 보기 / [29:22] 소스가져와서 css 파일로 만들기 / [30:18] 결과 확인 / [31:37] style 태그에 css 생성 / [33:00] 이미지 주소 옮기기 / [33:30] 이미지가 적용된 속성 확인 / [34:07] 문서구조상으로 보기 / [34:50] 결과 확인 / [34:58] 링크를 통해 이미지 나타나게 하기 / [35:34] top에 적용돼 있는 소스 보기 / [36:21] 요소 검사 / [38:52] head 적용된 속성값 보기 / [40:07] body class / [42:20] nav class / [43:15] 웹 폰트 보기 / [43:36] 폰트페이스 적용 / [44:15] li, table 태그 전체속성 / [44:50] img 값 설정 보기 / [46:00] 결과 확인 / [46:50] 적용돼 있는 속성 분류 / [48:12] 변경된 부분 보기 / [48:51] 적용 확인 / [49:36] style 삭제 / [50:22] 마진, 패딩값 입력 / [51:15] article 입력 / [51:42] 확인 / [52:15] 로고 요소검사 / [52:34] body 부분 적용 / [53:58] 아이콘 예로 style 적용 / [54:37] 확인

샘플확인 : 알지오 검색후 -> 강의검색란 -> 웹표준 [실무] + CSS코드 분석