알지오 평생교육원

로그인|회원가입|고객센터
HOME>IT전문가>핵심 웹표준퍼블리셔>반응형웹 + 부트스트랩 [전문과정]

반응형웹 + 부트스트랩 [전문과정]

반응형웹 + 부트스트랩 [전문과정]
35회차 속성과정
전체 : 25시간 17분|회차당 평균 : 43분20초

이용기간 2개월

전문강사 : 알지오 R&D [IT]

300,000185,000



반응형웹 + 부트스트랩 [전문과정] 사용법 강좌
반응형웹 [전문과정]은 알지오에서 배출된 웹퍼블리셔들의 요청에 의해 제작된 강의로, 전문가를 위한 강의입니다. 반응형웹은 많은 웹사이트를 제작해보고 분석해봐야 완벽해질 수 있기 때문에 실제 전문가들이 제작한 웹사이트를 대상으로 강의를 진행합니다.
  • 01.41분 반응형 웹 제작 핵심기술

    기본만 알아도 완벽한 구현이 가능합니다.

    책갈피 : [00:35] 강의전 알아야 할 점/[01:03] 작업할 내용/[02:53] 소스 보기/[03:07] 참고로 알아야 할 점/[04:09] 뷰 포트 설정/[05:00] 뷰 포트 속성 설명/[05:46] 결론/[06:15] 스크립트 파일 연동해서 불러오기/[07:38] 브라우저나 기기에 따라 사이즈 다르게 하는 방법/[07:56] media screen and/[09:03] media all/[09:13] media aural/[09:24] media handheld/[10:13] media embossed/[10:28] 결과적으로 보기/[11:18] 디바이스 최대, 최소 높이 정의/[12:05] 실행될 내용 입력/[12:50] 내용 확인/[13:16] 테블릿 사이즈일 경우/[14:00] 내용 확인/[15:18] 모바일 사이즈일 경우/[16:14] 내용 확인/[17:03] 실무에 사용되는 웹 페이지 다루기/[17:52] 핵심/[18:36] 창 크기 줄이기/[19:25] 코드 보기/[20:03] css 선언/[20:45] line-height 보기/[21:18] 컨테이너 입력/[21:40] 디바이스 넓이에 따라 미디어 각각 선언/[22:18] 최소 넓이 최대 넓이에 따른 컨테이너 요소 설정/[23:07] 테블릿과 와이드 내용 정의/[24:10] div 선언/[25:11] 내용 보기/[27:03] 중간 점검/[28:41] 버튼 확인/[29:37] 로고 설정/[30:37] 이미지 설정/[31:03] 새로고침/[31:17] pc 버전일때만 이미지 나오게 설정/[32:07] ul 목록 튜닝/[32:37] 미디어 타입 선언/[33:35] 실제 내용 보기/[34:27] 잘못된 경우/[34:45] 소스 추가/[35:57] 변경된 내용 보기/[37:15] js 적용 확인/[37:50] 맨 아래 내용 셋팅/[38:52] 이미지 width 값 설정/[39:09] 사이즈 설정해 주지 않아도 적용 되는 이유

  • 반응형 웹 제작실무
  • 02.48분 실제적용 사례 CSS실무코딩 1

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:08] 실제 사용된 웹사이트 소스 분석/[01:17] 완성된 내용 보기/[01:23] 사이트 크기 줄이기/[02:00] 웹 페이지 다운로드/[02:28] meta content 영역/[03:27] 설명 보기/[04:00] 세개의 css/[04:26] 세개의 css 분석/[05:46] 복잡한 코딩 보는 방법/[06:27] css 파일 불러오기/[06:38] 62번째 라인 찾기/[06:46] 기본 사항 확인/[07:15] 세번째 적용 부분/[07:46] index css/[09:58] 네비게이션 css/[10:13] 적용된 내용 확인/[11:15] 미디엄에 대한 css 적용 확인/[11:54] 컨테이너/[13:43] 로고 부분 설명/[14:35] 네비게이션 안에 있는 ul 목록/[14:58] 확인/[15:22] 메뉴가 스몰로 되어있을 경우/[16:26] 실제적으로 줄여지는 내용/[16:47] 로고 부분 보기/[17:11] 메뉴 부분 보기/[18:30] 숨겨진 메뉴/[19:25] 웹사이트 가운데 내용 확인/[20:29] 제목과 스펜/[20:52] 큰 문자/[21:30] 일반 텍스트/[22:32] 현재 선언된 부분/[23:41] 웹사이트가 좁혀졌을때/[24:41] 컬러 부분/[25:06] 컨텐트가 됐을 경우/[26:40] 자간 확인/[27:22] 내용 보기/[27:55] 바뀐 내용 확인/[28:41] p태그 숨어있는 부분/[29:30] 글자 움직이는 부분/[29:56] 이미지 부분 보기/[30:48] 확인/[31:25] 밑 메뉴 보기/[32:43] 변경 사항 확인/[33:22] 버튼 , 푸터 부분 보기/[34:15] 확인/[34:59] pc 버전 적용 내용/[35:34] pc 버전 전체 선언 보기/[36:52] 텍스트 외부 여백/[37:30] p 태그 소스 보기/[37:58] 스몰 사이즈 됐을 경우 확인/[39:22] pc버전에서 미디엄 버전으로 넘어갈 경우/[39:42] 내용 함축해서 줄이기/[42:22] 푸터 부분 보기/[43:15] 100프로로 나오는 이유/[44:52] 푸터 부분 스몰일 경우 확인/[45:52] 왼쪽 메뉴 보기/[46:34] 이미지가 위로 올라간 이유/[47:13] 확인

  • 03.38분 실제적용 사례 CSS실무코딩 2

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:07] 웹사이트 보기/[01:06] 소스 확인/[02:23] 복잡하게 선언된 이유/[04:00] 바디 부분 소스 보기/[05:27] wrapper 내용 보기/[06:00] 확인/[06:57] 좌우 여백이 생겼다가 없어지는 이유/[07:25] 사이트 크기 키운 뒤 로고 확인/[07:55] 로고 부분 소스 보기/[09:11] 사이트 크기 줄인 뒤 확인/[10:15] 로고 부분 확인/[10:50] 이미지 일부분만 보이게 변경하는 방법/[11:35] width 값 수정/[11:58] 확인/[12:18] 내용이 없어졌을 경우/[13:13] body 부분 보기/[13:48] display:none 보기/[15:01] 확인/[15:35] 사이트 확대 후 확인/[16:41] 우측 메뉴/[16:59] 소스 보기/[18:17] 어떻게 변경 되는지 알아보기/[19:30] 중심 부분 확인/[20:07] 삼단계 변경 설명/[20:52] 소스 보기/[21:32] max 값 확인/[22:22] 결과/[22:45] 선언된 내용 이미지/[24:47] 텍스트 부분 소스 보기/[25:11] 확인/[26:07] 섹션 확인/[27:15] 내부 여백 값 확인/[27:45] pc 사이즈일 경우/[28:07] 확인/[28:41] 좌측 값 확인/[29:03] 평상시 화면일 경우 선언/[30:26] 밑 여백 보기/[31:03] 10 픽셀로 수정 후 확인/[32:37] 함축이 됐을 경우/[33:30] 내부 여백 값 확인/[33:45] 첫번째 섹션/[34:12] 배경 컬러가 흰색인 이유/[34:30] pc 버전일 경우 sidebar 확인/[35:19] 아이콘 보기/[36:45] footer 내용 보기/[37:15] 기본 패딩값 확인/[37:53] 웹사이트 화면 줄인 후 확인

  • 04.53분 실제적용 사례 CSS실무코딩 3

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [01:18] 웹 사이트 보기/[01:55] 소스 확인/[02:23] lt로 돼 있을 경우/[03:43] home blog/[04:15] 네비게이션 태그 보기/[05:13] 좁혔을때 메뉴가 없어졌을 경우/[07:00] 상단 메뉴, 로고 부분/[07:38] 화면 줄인 후 확인/[08:26] 해당 내용 소스 보기/[09:22] 화면 작아질 때 공백/[10:01] 토글 스트림 확인/[11:07] 로고 확인/[11:54] ul 목록/[12:28] 소스에서 주목해야 할 점/[13:13] 기본 사항 보기/[14:03] 본 메뉴 확인/[14:37] 소스 보기/[15:20] css의 pc 적용 확인/[16:17] 상단 공백 부분/[16:33] 소스 보기/[17:56] 서치 바 부분/[18:18] 소스 보기/[19:03] 서치 바가 없어져 보이는 이유/[19:41] follow 버튼/[20:07] 소스 보기/[21:14] 메인 확인/[21:33] stream/[23:07] visibility:visible/[23:52] 전체 설명/[24:11] 소스 보기/[25:52] 모바일 화면일 경우/[26:17] 메인 부분 소스 보기/[27:17] 존속된 사항/[28:03] content-head 값 확인/[29:41] 메인 전체 감싸는 부분/[30:51] 모바일일 경우/[31:41] top-story-wrapper clearfix/[32:13] 추가 적용 부분/[33:42] 통합 적용 부분/[34:43] top-story/[35:42] bottom 값 보기/[36:36] 디바이스 사이즈가 줄었을 경우/[38:15] top-story-side/[39:27] 이미지가 커진 이유/[41:21] 따로 설정해야할 부분/[41:52] 사이즈가 줄어들었을 때/[43:15] 여섯개 라인 부분/[43:45] pc 버전 소스 확인/[44:07] 태블릿일 경우/[45:22] 모바일일 경우/[45:44] 소스 확인/[46:07] article-listing/[46:44] 태블릿일 때 제일 먼저 적용 받는 사항/[47:37] 하단 메뉴 부분/[48:13] footer 보기/[49:13] 모바일 화면일때 메뉴 확인/[49:45] 소스 보기/[51:52] 카피라이트 부분/[52:22] 태블릿일 경우

  • 05.32분 실제적용 사례 CSS실무코딩 4

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:04] 홈페이지 살펴보기/[00:56] 소스 확인/[01:07] meta name=viewport/[01:23] link href/[01:53] div id=header/[02:58] @media only screen/[03:14] 배경값/[04:30] 스텐다드인 경우/[05:40] 로고 설명/[06:46] h1 class=logo alt/[06:59] div id=mobile-header/[08:46] mobile-header/[09:35] 모바일 헤더 아래 로고 불러오기/[11:35] div class=wrapper/[11:50] position relative z-index/[12:33] div class=aside aside-left/[13:56] absolute 제거 했을 경우/[15:20] 결과값 확인/[15:43] 적용된 내용 확인/[16:07] left 값 확인/[17:03] 내부 여백 확인/[17:41] 위치 확인/[18:00] h2 class=hdr/[19:25] ul class=nav nav-permanent-actions/[20:07] 배너 이미지/[21:18] ul 목록 적용사항 보기/[22:15] row span3/[22:51] row card-break-2up/[23:56] div-class=figure/[24:22] 적용사항 보기/[25:00] 홈페이지 하단/[25:18] div class=wrapper homepage-sock/[26:15] div class=span3 gutter-horiz-in gutter-bottom-4/[28:45] div id=footer/[29:37] gutter-horiz-in/[30:18] 변경 값 확인/[31:15] span class=logo alt/[31:52] 하단 메뉴

  • 06.1시간 18분 실제적용 사례 CSS실무코딩 5, 6

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:58] 소스 보기/[01:25] meta name=handheldfriendly/[02:53] meta name=apple-mobile-web-app-title/[03:46] link rel=apple-touch-icon/[04:39] 상태바 컬러 정하기/[05:10] 웹사이트에 적용된 css/[05:30] id 값과 css값 보기/[06:13] body 확인/[06:30] div class=ihatetimvandamme/[07:13] em 정의 확인/[08:13] 차이가 margin-bottom 일 경우/[08:22] 태블릿으로 들어갔을때/[09:05] ihatetimvandamme/[09:43] 확인/[10:03] 로고/[11:05] 변경 내용 확인/[11:31] 로고 애니메이션 효과 확인/[12:48] 네비게이션/[13:43] 전체 화면일 경우 소스 보기/[14:28] 작은 화면일 경우 소스 보기/[15:05] 좌우 여백/[16:00] 메뉴 함축 됐을경우 적용 사항 확인/[17:07] 우측 단축 메뉴/[17:33] pc와 wide 일 경우/[18:59] 오퍼시티 값/[19:56] 웹사이트 이미지 확인/[20:11] div class=illustration/[20:33] 그룹화/[21:22] 확인/[21:59] div class=apes/[22:15] 이미지 애니메이션 효과 확인/[22:41] 최대 화면일 경우/[23:45] height 값 확인/[24:26] 미디어 사이즈 별 적용 부분 확인/[26:56] 태블릿 적용 내용 확인/[27:40] 작은 화면에서 아이콘 나왔을 경우/[28:30] 백그라운드 이미지/[29:33] 그림자 이미지/[31:00] 와이드 화면이 아닐 경우/[32:20] 적용된 내용 확인/[32:59] 메인 이미지/[33:30] 와이드 화면일 경우/[34:37] 와이드 화면보다 작을 경우/[36:37] div class=line/[37:15] 와이드 화면일 경우/[37:58] 화면 줄인 후 확인/[38:58] 모바일 화면일 경우/[40:29] div class=container/[40:51] 와이드 화면일 경우/[41:15] 줄인 화면일 경우/[42:15] 웹사이트 기본값 확인/[43:51] 기본 스텐다드 확인/[45:00] 화면 줄이기/[45:49] ul class=nav-sections/[46:59] 디자인 소스/[47:36] header class=section-header/[48:44] content/[49:27] 웹사이트 화면 줄이기/[50:12] ul 목록 이미지/[50:43] li 값 확인/[51:27] div class=section-header/[52:45] 텍스트 부분 소스 보기/[53:37] 여백 값 확인/[54:36] 폰트 사이즈/[55:22] 모바일일 경우 h1/[56:15] 모바일일 경우 p태그/[56:49] 기본 적용 부분/[58:29] div class=box box-writing/[58:45] 와이드 화면일 경우/[59:14] 백그라운드 이미지 확인/[59:37] box content/[61:07] 사이즈 줄일 경우/[62:37] 패딩 값 수정 후 확인/[63:36] 기본 사항일때/[64:11] 글꼴 변경 확인/[65:00] 섹션/[66:10] 제목글 부분/[66:30] 하단 p태그/[67:58] 아래 메뉴/[68:30] ul 목록 확인/[69:30] li 값 확인/[72:00] 홀수일 경우에만 백그라운드 컬러 지정/[73:00] 반복되는 내용/[74:10] 화면이 작아졌을 경우/[74:30] 기본값 적용 확인/[75:23] 웹사이트 하단/[76:00] footer 사항/[76:30] 기본 와이드값/[77:55] 모바일 화면일 경우

  • 07.54분 실제적용 사례 CSS실무코딩 7

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:15] 웹사이트 살펴보기/[00:36] 기본 설정 부분/[01:11] body 부분 해당 css/[02:53] 이미지 소스 확인/[03:05] 이미지 보기/[04:14] 내용 보기/[05:00] 기본 선언/[05:58] clouds img/[06:46] 모바일일 경우/[07:10] header/[08:48] contents/[09:46] 기본 pc일 경우 적용 사항/[10:46] 태블릿일 경우 적용 사항/[11:50] div role=navigation/[12:01] 기본 pc일 경우 적용 사항/[12:41] 태블릿일 경우 적용 사항/[13:28] a 링크/[13:58] li 부분/[14:13] 웹사이트 보기/[14:41] 기본 pc일 경우/[15:39] 일반 텍스트에 적용되는 컬러값/[15:56] main/[16:45] 소스 보기/[17:07] 배경 확인/[19:37] h1 텍스트 부분 보기/[19:45] 기본 pc일 경우/[19:56] 태블릿일 경우/[20:10] general/[20:25] 모바일 화면 보기/[20:52] serious/[21:37] 섹션/[22:03] h2 제목글/[22:22] 기본 pc일 경우/[23:37] 그림자/[24:26] 화면 줄인 후 확인/[25:30] hoist before/[25:55] strip wrap after/[26:41] 모바일일 경우/[27:07] strip/[27:18] 모바일일 경우 에프터에 대한 선언/[27:47] viewall/[28:48] gallery/[29:37] 기본 pc일 경우/[31:07] 모바일일 경우/[32:07] 밑 메뉴 확인/[33:20] 이미지 확인/[33:45] section class=group/[34:45] pc일 경우 이미지/[35:30] 태블릿일 경우/[36:22] p class=colonel serious/[38:15] split snip/[39:07] div class=reasons/[40:34] 현재 내용 확인/[42:15] 배경 이미지 확인/[42:37] 내부 텍스트 값/[44:30] div class=actions/[44:52] li 보기/[45:52] actions li/[46:43] 웹사이트 화면 보기/[47:29] nav class=conditions/[48:51] 메뉴에 대한 ul 목록/[50:14] footer role=contentinfo/[52:09] 이미지

  • 08.59분 실제적용 사례 CSS실무코딩 8

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:02] 웹사이트 확인/[00:10] 소스 보기/[01:19] 기본 설정 부분 확인/[01:59] 주의 할 부분/[02:43] div class=svtseGlobalHeaderContainer/[04:10] 모바일일 경우 차이/[05:00] 웹사이트 모바일로 함축/[05:56] nav 태그 내용/[06:45] div id=global-navigation/[07:15] 위치, width 값 확인/[08:01] media 태그 변경 확인/[08:35] header role=banner/[09:05] a 링크-pc 사이즈일 경우/[10:00] 모바일일 경우/[10:56] 실제 적용된 사항 살펴보기/[11:43] 이미지 css 확인/[13:01] div id=global-nav/[13:28] 일반 pc일 경우/[13:48] div id=global-links/[14:03] 일반 pc일 경우/[14:50] ul 태그/[15:35] 평상시 li 값 알아보기/[16:22] 기본적인 css 사항/[17:55] ul id=global-services/[19:06] li 값 확인/[20:07] ul id=global-search/[20:37] 기본 사항일 경우/[21:56] li에 대한 선언/[23:18] 일반 pc일 경우/[24:33] input 확인/[25:41] ul id=global-menu/[27:02] 바 부분/[27:26] 일반 pc일 경우/[28:15] 모바일일 경우/[29:14] div class=messageTypevma/[30:21] div class=svtContainerBase/[31:15] 일반 스텐다드 사항/[32:51] 태블릿일 경우/[33:58] 모바일일 경우/[34:37] 기본 설정 파일 셋팅/[35:07] 바 밑 부분 내용/[36:00] 기본 적용 사항 확인/[37:07] 기본적인 섹션 적용사항/[37:15] pc 일 경우/[38:00] 모바일일 경우/[38:28] 기본 설정 파일/[38:58] div class=svtServiceHeader svtXClearFix/[39:52] 확인/[40:37] 오른쪽 섹션/[42:21] 웹사이트 사진 div/[43:22] div class=svtUnit svtNth-1/[44:22] 기본 css/[45:07] 태블릿일 경우 변경 사항/[46:22] section class=svtContainerFull/[47:15] 내부, 외부 여백/[48:07] div class=svtnit-1 svtnit-1-2/[49:36] div class=svtUnit svtnit-3/[50:37] 모바일, 태블릿일 경우/[52:22] 절대값 정렬 확인/[54:06] footer/[55:07] 일반 pc 버전일 경우/[56:04] 모바일 버전일 경우/[57:52] 태블릿일 경우/[58:38] 하단 부분/[59:06] 요약

  • 09.1시간 6분 실제적용 사례 CSS실무코딩 9

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:10] 웹사이트 확인/[00:28] 소스 분석/[01:02] media=screen, projection/[02:46] meta name=viewport/[03:12] 모바일일 경우/[04:24] head content/[04:46] div id=header_area/[05:27] div class=page/[06:25] header 부분 사이즈가 바뀔 경우/[07:46] div class= faux_page/[08:15] 일반 pc일 경우/[09:48] 웹사이트 화면 확인/[09:58] div class=header_left/[11:31] 로고 이미지/[11:46] css 보기/[12:22] 모바일, 태블릿일 경우/[12:56] 로고 이미지 확인/[13:16] div class= menu-main-menu-container/[13:52] 일반 pc일 경우/[15:41] ul 확인/[16:03] 모바일, 태블릿일 경우/[16:44] li 확인/[17:44] 달라진 li 값 확인/[19:03] 절대값이 right 일 경우/[19:48] li 목록 확인/[21:10] div class=faux_feature/[22:40] 기본 스텐다드 사항 확인/[23:07] 이미지 확인/[23:37] img id=feature_backpack/[24:26] 모바일, 태블릿일 경우/[26:30] div class=feature_right/[26:47] 일반적인 사항일 경우/[28:45] p 태그 확인/[30:03] 로그인 창/[30:26] 소스 확인/[30:56] 폼 속성/[31:10] 기본 설정 부분/[32:07] in put/[34:04] 모바일 사이즈일 경우 버튼 확인/[34:52] div class=faux_page/[35:07] 일반적으로 정의된 내용/[36:30] h2 class=homepage_navigation/[37:35] 모바일 사이즈일 경우/[38:50] div class=format_text/[39:04] div class=group/[39:30] 이미지 소스 확인/[40:58] 텍스트 소스 확인/[42:57] div class=story_content format_text/[43:30] 일반적인 사항일 경우/[43:52] 추가 적용된 사항/[45:22] 이미지/[46:37] 추가 적용된 사항/[47:37] 모바일일 경우/[48:37] div class=homepage_quote format_text group/[49:22] 모바일일 경우/[50:07] 요소 확인/[52:22] 모바일일 경우/[53:27] div class=featured_logos group/[53:37] 이미지 확인/[54:30] 웹사이트 화면 줄이기/[54:54] 모바일 사이즈일 경우/[56:27] img class=img_opa/[57:07] 모바일 사이즈일 경우/[57:37] div class=homepage_latest format_text group/[58:59] div 설정 내용 확인/[59:30] 기본 사항일 경우/[60:30] 홈페이지 하단 확인/[61:22] pc 화면일 경우/[62:43] li 태그 확인/[63:49] 여백 내용 확인/[64:25] 추가적인 팁

  • 10.45분 실제적용 사례 CSS실무코딩 10

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:02] 웹사이트 확인/[00:23] 소스 보기/[01:15] div class=wrapper/[02:00] pc 부분 적용 확인/[03:37] body 부분 확인/[04:12] div id=header-main/[05:14] 일반 pc 적용사항 확인/[06:38] 로고/[07:30] div id=nav/[07:55] 해당 내용 확인/[08:45] 일반 와이드일 경우/[09:03] 변경된 패딩값 확인/[10:09] ul목록 확인/[11:01] li 메뉴 보기/[11:26] div id=topright/[12:24] 적용된 사항 확인/[13:41] div class=h-category hamburger/[15:20] div id=menu class=hamburger/[16:30] 요약/[18:07] 웹페이지 몸통 부분/[18:41] div class=wrapper clearfix/[19:11] 와이드 화면일 경우/[20:02] 특이한 점/[20:18] section id=author/[21:51] 적용 확인/[22:37] 웹사이트 화면 줄인 후 메뉴 확인/[23:47] section id=m-author/[25:22] section id=advert/[25:41] 평상시 화면 적용 확인/[26:03] 존속된 사항 확인/[28:03] css 보기/[28:59] 마진 값 수정/[30:00] 없어지는 사항/[30:21] 중앙 부분/[31:03] div id=announcement/[31:52] 존속된 사항 확인/[33:58] 모바일일 경우/[34:15] 차이 알아보기/[34:37] 포함되는 내용 확인/[35:07] 기본 반영사항 확인/[36:57] footer 부분/[37:42] 네비게이션/[38:45] ft-nav/[39:50] 기본 사항/[40:49] ul 목록/[40:59] 일반 pc일 경우/[41:44] 모바일일 경우/[42:44] float: right/[42:53] 카피라이트/[43:37] 백그라운드 이미지 부분 확인

  • 11.38분 실제적용 사례 CSS실무코딩 11, 12

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:07] 웹사이트 확인/[00:21] 소스 보기/[00:47] 기본적으로 선언된 사항/[01:23] div id=site/[02:42] div id=header/[03:34] 메뉴가 밀릴 경우/[04:30] 로고/[05:15] 화면이 줄어들었을 경우/[06:00] 모바일일 경우/[07:00] div id=contact/[08:15] 태블릿 이하 적용 사항 확인/[09:33] ul id=nav/[10:33] 변경 사항 확인/[11:37] 태블릿 이하 적용 사항 확인/[12:56] div id=illustration-parts/[14:18] 버튼/[15:07] cta-grey/[16:11] div class=markers/[17:32] div class=section/[17:52] 첫번째 섹션 확인/[18:56] 모바일일 경우/[19:48] 두번째 섹션/[20:14] 다르게 적용된 부분 확인/[21:17] nth-child/[21:45] 세번째 섹션/[23:00] 설정 값 확인/[23:51] div id=partners/[24:40] 설정 값 확인/[25:48] 하단 footer/[26:15] div class=center clearfix/[27:22] 모바일 사이즈일 경우/[28:18] ul id=client-services/[29:15] 2페이지 보기/[30:07] div id=header/[30:41] pc 화면일 경우/[31:52] 제목글 보기/[32:29] 태블릿일 경우 변경사항 확인/[33:00] ul 부분/[34:37] 화면 줄인 후 확인/[35:05] div class=work/[36:29] 내용이 두줄이 될 경우

  • 12.45분 실제적용 사례 CSS실무코딩 13

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:02] 웹페이지 확인/[00:10] 소스 보기/[00:24] div id=testata/[00:46] 기본 pc일 경우/[02:00] div id=menu/[02:38] 기본 pc일 경우/[03:00] 태블릿일 경우/[04:15] 로고/[04:24] div class=wrap/[05:30] 와이드일 경우/[06:11] 모바일일 경우/[06:41] 대 화면 로고 css 확인/[07:55] 태블릿일 경우/[09:05] a id=expand_menu/[09:58] 이미지/[11:09] span id=expand_button/[12:28] ul class=menu left it/[13:18] 메뉴가 두줄이 됐을 경우/[13:46] 태블릿일 경우/[14:18] css 정의 확인/[15:20] 모바일일 경우/[16:33] li에 a가 있을 경우/[17:15] pc와 와이드 화면 일때 비교/[18:07] 모바일일 경우/[19:18] ul class=menu right it/[20:07] div id=lingue/[20:41] 태블릿일 경우/[21:26] 모바일일 경우/[21:59] div의 ul 목록/[23:18] div class=imgtestata/[23:56] css 정의 확인/[25:03] div id=content/[25:37] pc와 와이드일 경우/[26:00] 소스 오류/[26:18] 태블릿일 경우/[27:29] div class=wrap/[27:51] 와이드일 경우/[28:15] pc일 경우/[29:21] 모바일일 경우/[30:00] div class=left_home/[31:40] div class=right_home/[32:30] div id=slide_vini/[32:49] 와이드, pc일 경우/[33:37] 태블릿, 모바일일 경우/[34:30] 이미지 내용 확인/[34:51] 이미지가 pc 버전에서 오버되는 이유/[36:22] div id=news_home/[36:30] 와이드, pc일 경우/[37:28] footer 내용 확인/[38:00] 태블릿일 경우/[38:43] 모바일일 경우/[39:37] div class=wrap/[40:30] 기본 셋팅 확인/[40:50] div class=sezione_footer sezi/[41:22] 와이드, pc일 경우/[42:27] 모바일일 경우/[43:15] 웹페이지 하단 부분/[44:06] pc 버전 이하 내용

  • 13.42분 실제적용 사례 CSS실무코딩 14

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:01] 웹페이지 확인/[01:00] div class=wrap header role=banner/[01:10] 평상시 적용된 내용/[02:00] 모바일일 경우/[02:57] div class=container/[03:15] 로고/[04:29] 모바일일 경우/[05:29] div class=externalWrap/[06:00] div class=external/[07:15] 첫번째 내용/[08:39] li 확인/[09:11] 평상시 내용/[09:33] 모바일일 경우/[10:28] 아이콘 부분/[10:54] 공통 적용된 li 값 확인/[11:31] 추가된 사항/[12:28] div class=external/[12:41] 기본 적용사항 확인/[12:58] nth-of-type/[13:18] 태블릿일 경우/[15:01] 이미지/[15:43] 존속된 사항 확인/[16:44] 웹페이지 세번째 메뉴/[17:06] p class=header-single-link/[17:52] 태블릿일 경우/[18:21] 모바일일 경우/[18:40] 검색바/[19:25] 모바일일 경우/[20:11] li 값 확인/[21:02] 일반 pc, 태블릿일 경우/[21:15] 모바일일 경우/[22:47] 기본적인 input에 대한 선언/[24:32] 버튼/[24:56] 모바일일 경우/[26:07] input 값 확인/[26:26] 평상시 적용 사항/[27:45] 메뉴/[28:00] ul id=nav role=navigation/[29:33] div class=container/[30:30] 모바일일 경우/[31:15] li 확인/[32:37] li 내부에 이미지가 있을 경우/[33:45] 태블릿일 경우/[34:07] 모바일일 경우/[35:21] fieldset/[37:12] 웹페이지 하단/[38:00] 모바일일 경우 컬러값/[39:05] li 값 확인/[40:07] 백그라운드 이미지 /[41:05] 모바일일 경우

  • 14.1시간 16분 실제적용 사례 CSS실무코딩 15

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:05] 웹페이지 확인/[00:20] header id=globalheader/[00:55] 평상시 화면일 경우/[01:30] 모바일일 경우/[02:15] div class=content/[03:30] 모바일일 경우/[04:46] 태블릿일 경우/[06:00] ul class=tbar-left/[06:39] li 값 기본 사항/[07:09] 모바일일 경우/[07:41] 변경된 폰트 사이즈 확인/[08:11] 이미지 확인/[08:46] pc, 태블릿일 경우/[09:01] ul id=umenu/[10:22] ul class=tbar-right/[10:46] li class=tb-maps/[11:03] 모바일일 경우/[12:13] a 링크 알아보기/[13:26] 모바일일 경우/[14:24] 태블릿일 경우/[15:28] li class=tb-lang/[16:26] li id=ibutton/[16:40] 평상시 화면일 경우/[17:00] 모바일일 경우/[17:59] 좌표/[18:33] div class=content/[20:52] 로고/[21:21] 일반 pc 일 경우/[22:14] 모바일 전 상황/[23:17] 모바일일 경우/[24:10] nav id=actionnavi/[24:26] 일반 pc 일 경우/[25:26] 모바일일 경우/[25:56] input 확인/[27:45] input type=submit/[29:29] li에 내용이 있을 때/[29:48] 태블릿일 경우/[30:21] 평상시 화면일 경우/[30:47] 모바일일 경우/[31:41] 메뉴/[32:15] nav id=globalnavi class=grid grid-12 first/[33:20] 태블릿일 경우/[34:13] 모바일일 경우/[34:52] ul class=sec-top/[35:42] 태블릿일 경우/[35:59] ul class=mainlinks/[36:35] 태블릿일 경우/[37:22] li 태그의 열쇠/[39:30] 모바일일 경우 li 값/[40:22] 두번째 a링크/[40:51] div class=content bm-10px/[40:58] pc 일 경우/[41:30] 태블릿일 경우/[42:50] div class=grid grid-12 first/[43:45] 모바일일 경우/[44:15] div id=slideshow/[45:37] 이미지가 변경됐을 때/[47:22] ul class=link-audience png_bg/[48:22] 작은 사이즈가 됐을때/[49:00] 모바일일 경우/[50:00] 텍스트 사이즈/[51:22] 모바일일 경우/[52:15] li class=btn-request-info/[53:15] 태블릿일 경우/[54:07] 모바일일 경우/[54:30] 간과하지 말아야 할 점/[56:15] 태블릿일 경우 폰트 사이즈/[56:35] 모바일일 경우 폰트 사이즈/[57:22] div class=program-links/[58:52] ul 목록 확인/[59:44] 패딩값/[60:44] div class=content featured/[62:22] 평상시 화면일 경우/[63:37] 태블릿일 경우/[64:14] 모바일일 경우/[64:38] 웹페이지 하단/[66:26] h1 적용사항 확인/[67:28] 평상시 화면일 경우/[67:45] 모바일일 경우/[69:00] footer/[69:53] 평상시 화면일 경우/[70:11] div class= grid gird-4 first grid-reset/[70:30] 평상시 화면일 경우/[71:15] 태블릿일 경우/[72:00] div class=grid grid-8 grid-reset/[73:18] 화면에 따른 크기 차이/[74:30] 카피라이트

  • 15.1시간 6분 실제적용 사례 CSS실무코딩 16

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:09] div class=navbar navbar-inverse navbar-fixed-top/[01:34] pc 사이즈일 경우/[02:20] 모바일일 경우/[02:53] 마진값 제거 후 확인/[03:28] div class=centered/[04:15] pc 사이즈일 경우/[05:25] 태블릿일 경우/[06:00] 모바일일 경우/[07:15] div class=navbar-inner/[08:18] 평상시 적용된 사항/[08:39] 모바일일 경우/[09:58] div class=nav-collapse collapse/[10:33] 평상시 적용된 사항/[11:33] ul class=nav/[12:26] 모바일일 경우/[14:41] li 목록 확인/[15:03] 와이드 화면일 경우/[15:35] 여백 확인/[15:56] 태블릿일 경우/[16:55] 모바일일 경우/[17:40] 여백 차이/[18:52] 평상시 css 선언/[19:33] li id=search/[20:45] 태블릿일 경우/[21:33] search가 없어진 이유/[22:26] div class=inline-search/[22:56] 평상시 설정/[23:56] button type=button/[24:41] button type=button/[25:30] section id=logowrap/[26:15] 태블릿 전 사이즈 일 경우/[26:52] 태블릿일 경우/[27:59] 모바일일 경우 이미지 확인/[28:51] 내용 보기/[29:41] nav id=global role=navigation/[30:37] pc일 경우/[31:36] 모바일일 경우/[32:07] tickets& shows/[32:19] 평상시 설정/[32:52] 모바일일 경우/[33:58] 평상시 내용일때 ul 목록/[34:35] 일반 pc 사이즈일 경우/[35:37] 모바일 li 값 확인/[37:42] 평상시 a가 있을 경우/[38:37] 이미지/[38:45] css 선언 보기/[39:49] 폰트 사이즈 변경 확인/[40:22] 태블릿일 경우/[41:00] 모바일일 경우/[41:37] 아래 이미지 와이드일 경우/[42:00] 일반 pc 사이즈일 경우/[42:22] 모바일일 경우/[43:21] 화면에 따른 폰트 사이즈 변경 확인/[44:00] pc 화면일 경우/[44:29] 모바일일 경우/[44:52] li 태그/[45:45] 평상시 내용/[47:00] 모바일일 경우/[48:04] 섹션 확인/[48:37] section class=callout/[49:30] 모바일일 경우/[50:57] section id=content/[51:19] 와이드일 경우/[52:22] 모바일일 경우/[53:45] 와이드일 경우 기본적인 사항/[54:22] 모바일일 경우 넓이값/[56:12] 두가지 텍스트 유형/[57:00] 모바일일 경우/[58:27] 모바일일 경우 p태그 사이즈 확인/[59:14] aside id=side bar/[59:30] 평상시 사이즈 확인/[60:45] footer/[61:59] 모바일일 경우/[62:37] 메뉴/[63:00] 평상시 내용/[64:00] li 보기/[65:43] 우측 하단 내용

  • [전문가 skillup]
  • 16.56분 실제적용 사례 CSS실무코딩 17

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:08] 웹페이지 확인/[00:44] 이미지/[01:07] div id=branding/[01:37] 일반적인 선언 보기/[02:06] 모바일일 경우/[02:38] 이미지 확인/[03:58] 밑 이미지 css 확인/[04:46] a링크 됐을 경우 로고 확인/[05:46] 평상시 백그라운드 포지션/[06:46] ul id=navigation_pri/[07:00] 평상시 화면일 경우/[08:54] 모바일일 경우/[09:58] li 태그/[10:09] 평상시 화면일 경우/[11:00] 백그라운드 이미지 설정 확인/[12:01] 외부 여백 확인/[12:33] 모바일일 경우 넓이/[13:48] 웹페이지 하단 내용 보기/[14:43] 새 웹페이지 확인/[15:05] div id=page class=sc-home/[15:58] div id=masthead/[16:37] 백그라운드 이미지 선언 확인/[17:22] 웹페이지가 줄어들었을 경우/[18:51] 모바일일 경우 적용사항/[19:55] 해당 css에 h1이 있을경우/[20:14] 로고 확인/[21:18] a링크에 이미지가 있을 경우/[22:21] 로고 추가 설정 부분/[22:52] ul id=nav/[23:06] 평상시 선언 확인/[24:15] 모바일일 경우/[25:51] 실제 적용된 사항/[27:45] 처음 이미지 적용 사항/[29:25] 화면이 줄었을 경우 li 확인/[30:45] 보더값/[31:17] 백그라운드 이미지에 포지션 주기/[31:30] 포지션 이미지 확인/[32:15] 가운데 메뉴/[32:37] div id=promo-nav/[32:52] 모바일일 경우/[33:52] 평상시 사항/[35:07] 평상시 li/[36:00] promo-nav li a 보기/[36:45] 좌,우 두개가 됐을 경우/[37:00] li와 a값 확인/[38:20] 평상시 최소높이/[39:04] div id=primary/[39:22] 평상시 사항/[40:00] 태블릿일 경우/[41:52] 웹페이지 오른쪽 부분/[42:15] 평상시 사항/[43:12] 모바일일 경우/[44:21] div class=inner/[45:50] 모바일일 경우/[46:30] 이미지 확인/[47:52] div id=footer/[48:30] div class=inner/[49:13] 평상시 사항/[50:15] div id=social/[50:37] 내용 확인/[52:07] 컬럼 카운트 확인/[52:49] 평상시 li 내용/[53:34] 카피라이트/[55:01] 모바일일 경우

  • 17.52분 실제적용 사례 CSS실무코딩 18

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:05] 웹페이지 확인/[00:35] header id=branding/[01:06] 웹페이지 상단 보기/[02:06] min-width 확인/[03:46] 평상시 선언 사항/[04:15] div id=head-inner/[04:46] 와이드 화면일 경우 변경 사항/[06:15] pc일 경우/[07:28] a id=back-home/[07:54] 일반적인 사항일 경우/[08:56] div clss=logo/[09:31] 모바일일 경우/[09:58] 와이드와 일반 pc일 경우/[10:26] 변경 사항 확인/[12:05] 이미지/[13:43] 일반적인 사항/[14:43] 아이콘 소스 보기/[14:58] div id=mini-nav/[15:58] a 링크/[17:14] 주목해야할 부분/[17:48] div id=mini-search/[18:30] 평상시 선언/[19:07] div id=search-container/[19:40] 평상시 선언/[20:18] 변수 확인/[20:37] 와이드 화면일 경우 width 값/[21:44] 메뉴/[23:11] css 설정 확인/[23:52] 메인 부분/[24:26] div id=main/[25:18] 외부 여백 확인/[26:45] div id=primary/[28:45] 모바일일 경우/[29:45] div class=inner/[30:03] 와이드일 경우/[30:37] pc와 태블릿일 경우/[31:41] h1에 대한 태그/[32:30] 모바일일 경우/[33:21] 이미지 값 살펴보기/[33:57] div id=social/[36:00] div id=secondary/[36:44] 기본 사항/[38:37] footer/[38:52] 일반적인 사항 보기/[39:35] 사이즈 확인/[41:07] div class=signup/[41:29] 평상시 화면일 경우/[42:34] colophon.signup/[43:20] 기본적인 적용 사항/[44:14] div class=item/[45:22] 일반적인 사항일 경우/[45:45] 화면 줄여졌을 경우/[47:14] ul class=nav/[48:58] colophon.nav li/[49:37] 차이점/[50:22] div class=mission/[51:14] 차이점

  • 18.1시간 32분 실제적용 사례 CSS실무코딩 19, 20, 21

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:05] 웹페이지 확인/[00:56] body 알아보기/[01:19] body id=Home class=no-js/[01:59] 팝업 확인/[03:30] ul id=Accessibility/[03:59] 평상시 사이즈, 와이드일 경우/[04:41] 모바일일 경우/[05:00] div id=ToolbarWrapper/[06:15] ul class=left/[07:46] ul class=right/[08:37] 변경 사항/[09:20] 평상시 내용 확인/[10:24] li 값 확인/[11:26] 화면 크기가 줄었을 경우/[12:22] 일반 li 값이 출력되는 이유/[13:05] width 값 해당하는 내용 확인/[13:37] li class=likontakt/[14:24] li class=lirss/[15:03] rss 정의 부분 확인/[16:03] 일반 설정 사항/[17:11] 로고 설정 확인/[18:26] search 대해 알아보기/[18:37] div id=searchform class=clearfix/[19:03] 일반 정의 내용 보기/[19:22] 화면 크기가 줄었을 경우/[20:37] 텍스트 사이즈 확인/[21:41] input type/[22:59] 메뉴/[23:18] ul에 대한 선언 알아보기/[24:56] 화면 크기 변화에 따른 ul 태그 확인/[25:48] 기본 사항 확인/[26:48] 평상시 정의된 a 사항/[27:33] a링크 확인/[28:33] 변경된 li 사항/[29:15] 내부 a링크 확인/[29:56] div id=Aktuellt/[30:18] 와이드 화면일 경우/[31:11] 화면 줄었을 경우 내부 여백 변경 확인/[32:06] 외부 여백 추가 확인/[32:22] p class=ribbon/[33:37] div class=featureimage/[34:37] div class=featureText/[35:52] div id=main/[36:04] 평상시 화면일 경우/[36:37] 모바일일 경우/[37:22] ul id=Breadcrumb/[38:22] h2 class=entry-title/[39:37] div class=entry-meta-wrapper/[40:29] ul의 평상시 설정/[41:30] li 목록 확인/[42:20] 텍스트 선언 확인/[42:45] a링크 확인/[44:36] 오른쪽 메뉴 div 확인/[45:51] 하단 메뉴/[47:14] div id=landskapswrapper/[48:21] div id=landskap1/[48:45] div id=landskap2/[50:20] div id=etikettmoln/[50:30] 평상시 화면일 경우/[52:19] footer 확인/[53:07] 카피라이트 부분/[53:43] 웹페이지 확인/[53:52] div id=wrap/[54:27] 화면 줄어들었을 경우/[55:27] header role=banner/[55:49] 모바일일 경우/[56:22] 로고 확인/[56:45] div id=logo/[56:50] 평상시 화면일 경우/[58:00] ul class=group/[58:52] 평상시 li 확인/[59:15] 평상시 a링크 확인/[60:30] article/[60:35] 기본 사항일 경우/[61:44] article aside/[62:45] 제목글에 h4가 있을 때/[62:50] 평상시 화면일 경우/[63:30] 본문 아래 텍스트 부분/[64:00] 모바일일 경우/[65:30] 웹페이지 아래 부분/[66:00] 모바일일 경우/[66:45] div.mod-main/[67:14] 모바일일 경우/[67:43] div.mod-alt/[68:41] footer/[68:58] 일반 사항일때/[70:08] 새로운 웹페이지 보기/[70:45] div class=inner/[73:38] 일반적인 설정일 경우/[74:27] 로고/[74:30] 와이드 화면일 경우/[75:00] 로고 뒤 이미지/[75:23] 일반 pc 화면일 경우/[77:14] ul.nav/[79:09] ul.nav li/[79:58] li.first a/[80:42] ul.nav li.first a/[81:15] intro 평상시 경우/[82:30] 모바일 화면일 경우/[83:15] 이미지/[83:30] .main/[84:30] 와이드 화면일 경우/[85:15] figure/[87:15] footer/[88:03] 추가 부분 확인/[89:30] margin-left 값 수정/[90:33] 넓이값

  • 19.1시간 8분 실제적용 사례 CSS실무코딩 22

    반응형웹이 적용된 웹페이지를 분석하고, CSS 코딩 실습을 진행합니다.

    책갈피 : [00:00] 웹페이지 확인/[00:11] body class=home/[00:46] 일반 body 설정사항 확인/[00:56] css 특이점/[02:45] 태블릿일 경우/[03:05] 태블릿 이상일 경우 해당 이미지/[04:15] 모바일일 경우 해당 이미지/[05:00] 태블릿 이상 사이즈일 경우 기본 내용/[05:43] 네비게이션 태그/[06:15] 현재까지 내용 확인/[07:00] 평상시 컬러값과 폰트 사이즈 확인/[07:15] 모바일일 경우/[07:57] ul class=clearfix/[09:46] li 값 확인/[09:56] 태블릿 이상일 경우/[10:33] 사이트 화면 줄었을 경우/[11:11] 반영 안되는 사항/[12:11] span class=nav-bar clearfix/[12:26] 일반 pc, 와이드일 경우/[13:46] 사이트 화면 줄었을 경우/[15:15] header class=vevent clearfix/[15:24] 일반 pc, 와이드일 경우/[16:03] 모바일일 경우/[17:37] hgroup/[17:56] 일반 pc일 경우/[18:52] 추가적인 일반사항/[19:29] 태블릿일 경우/[20:41] header h1/[21:26] 화면 줄었을 경우 텍스트 사이즈 확인/[22:03] 일반적인 사항일 경우/[23:07] header h2/[23:56] 화면 줄었을 경우/[24:26] 모바일 사이즈일 경우 기본 선언/[25:00] span class=ribbon/[25:29] 와이드 화면일 경우/[26:48] section class=introduction/[27:41] 화면 줄었을 경우 기본 정의사항/[28:26] h2 이미지/[29:18] 일반적인 사항/[30:10] pc나 와이드일 경우/[31:40] introduction img 일반적 사항/[32:22] div class=section/[34:04] 웹사이트 화면에 따른 내부 여백 확인/[35:07] 모바일일 경우/[36:45] span clss=we-are-8/[37:57] 평상시 화면일 경우/[38:22] section class=speakers-list section bleed clearfix/[38:45] 와이드일 경우/[39:07] 웹사이트 화면 줄어들었을 경우/[39:45] 모바일일 경우/[40:35] li 태그 확인/[41:04] 와이드일 경우/[42:04] li 별도 선언 값 확인/[43:30] 두번째 li 확인/[46:13] 기본적인 li 값 확인/[47:49] li 이미지 확인/[48:07] 태블릿일 경우/[49:36] 두번째 이미지 내용 확인/[50:45] 화면 줄어들었을 경우 첫번째 li 값 확인/[51:22] 두번째 내용 확인/[52:57] 흰색 라인 생성/[54:15] 주석 처리 부분 제거/[54:58] 확인/[56:22] div class=social-links section clearfix/[57:15] 화면 줄어들었을 경우/[58:45] li에 대한 차이/[59:12] li class=twitter/[59:37] 포지션 정의 부분/[61:37] 퍼센트 정의 부분/[62:59] 밑 메뉴 부분/[63:15] li에 a가 있는 경우/[63:57] 기본 적용 사항/[65:00] 화면 줄어들었을 경우/[66:41] 웹페이지 하단 로고/[67:12] footer small img/[67:46] 팁

  • 20.1시간 20분 워드프레스와 반응형웹

    반응형웹을 지원하는 워드프레스의 Twenty Twelve 테마, Twenty Fourteen 테마, Twenty Thirteen 테마, Twenty Eleven 테마를 활용해 코딩 실습을 진행합니다.

    책갈피 : [00:06] 워드프레스의 반응형 웹/[00:22] 내용 보기/[01:03] 미디어 스크린일 경우 적용사항/[02:15] pc, 와이드 이하일 경우/[03:07] 전체 내용 페이지 소스 확인/[04:29] body.site/[05:29] 반영된 내용 확인/[06:15] 사이즈 줄었을 경우/[08:50] 메뉴 확인/[09:13] 문제점/[09:35] 메뉴 소스 보기/[10:24] menu-toggle/[11:15] main-navigation ul.nav-menu/[12:37] 버튼 요소 확인/[13:18] 평상시 적용값 확인/[13:52] 테블릿 이하 모바일일 경우/[15:03] 평상시 사항일 경우/[16:00] main-navigation ul.nav-menu/[17:52] 컬러 추가/[18:37] 화면 줄였을 경우 나머지 부분/[19:18] 평상시 사항일 경우/[20:03] widget-area/[21:52] 워드프레스 테마 보기/[22:17] 헤드 부분 보기/[22:48] 화면 사이즈 변경/[23:18] masthead-fixed.site-header/[23:36] site-header/[24:03] 차이점/[25:07] div class=header-main/[26:17] 화면 줄어들었을 경우/[27:03] h1 class/[27:52] 화면 줄어들었을 경우/[28:11] 검색 버튼/[28:45] 화면 줄어들었을 경우/[29:51] 메뉴/[30:37] 메뉴 부분 페이지 소스 보기/[31:11] primary-navigation.nav-menu/[31:25] 화면 줄어들었을 경우/[32:22] 메뉴 단축 버튼/[33:22] menu-toggle/[34:37] menu-toggle:before/[36:15] secondary/[37:19] 와이드 화면일 경우/[38:22] 화면 줄어들었을 경우/[39:21] main-content/[39:29] 왼쪽에 메뉴가 있는 경우/[40:37] 평상시 사항일 경우/[41:52] 화면 줄어들었을 경우/[42:28] list-view.site-content.hentry/[43:29] 차이 비교/[44:50] site-description/[46:05] 마우스 오버시 메뉴 차이점/[46:44] secondary-navigation a/[47:00] site-navigation li/[48:22] secondary-navigation ul ul/[49:07] 하단 메뉴 부분/[49:45] footer-sidebar.widget/[50:30] 테마 보기/[51:13] 소스 보기/[51:52] 화면 확대 후 보더 확인/[52:22] 평상시 사항일 경우/[53:52] 화면 사이즈 줄였을 경우/[55:30] 링크 부분 소스 보기/[55:45] site-header.home-link/[57:34] site-title/[58:07] 도메인 주소/[58:30] clip/[60:28] menu-toggle/[61:29] 검색 버튼/[62:15] entry-header/[62:37] 태블릿 화면일 경우/[64:00] entry-title/[65:15] 태블릿 화면일 경우/[65:30] 화면 줄어들었을 경우/[66:30] 위젯 차이 확인/[67:53] 반응형 웹 화면 보기/[68:15] body, input,textarea/[69:45] site-title/[71:00] 링크 값/[71:38] site-title a/[72:13] site-description/[73:15] branding searchform/[74:43] access ul/[75:38] 본문 내용/[76:45] 우측 내용/[78:02] supplementary.two.widget-area

  • [Bootstrap]
  • 21.30분 부트스트랩 시작

    부트스트랩 셋팅, 그리드 시스템, container-fluid, h1~h6, small, mark, abbr, blockquote, blockquote-reverse, code, pre, kbd

    책갈피 : [00:22] 다운로드/[01:27] 문서보기/[01:40] 주석처리/[01:51] javascript, css 경로/[02:02] 내컴퓨터 경로/[02:12] 링크/[02:30] 서버 실행/[02:43] 소스 보기/[03:31] container 정의/[04:44] h1, p태그/[05:44] CDN/[06:03] jquery library/[06:13] javascript 파일 연동/[06:38] 그리드 시스템 설치/[06:44] 반응형웹 적용/[07:01] viewport/[07:48] container-fluid/[08:15] menu 넓이 조정/[09:08] 넓이 조정 (1~12)/[10:08] 주석처리/[10:32] font-size/[11:44] 균등/[11:58] F11/[12:04] small 태그/[13:29] mark/[13:41] title/[15:57] 인용구(blockquote)/[16:43] blockquote-reverse/[17:21] 스타일시트 반영/[17:42] 코드 태그/[18:17] kbd 태그/[18:30] 일반 브라우저 테스트/[19:10] pre 태그/[19:19] .display (block)/[19:43] span/[19:47] text-primary/[20:18] text-muted/[20:24] text-danger/[20:44] 배경/[20:53] bg-danger

  • 22.24분 테이블, 이미지

    p태그, class=lead, tr 태그, col-md-2, page-header, class=close, data-dismiss=alert, fade in, class=btn

    책갈피 : [00:13] p태그/[00:26] class 적용/[00:37] margin/[00:56] font-size/[02:04] class="lead"/[02:31] text-center/[03:01] initialism/[03:40] text-transform/[04:32] list-unstyled/[05:25] pre-scrollable/[06:38] table-striped/[06:54] table-bordered/[07:09] table-hover/[07:24] table-condensed/[07:42] tr 태그/[08:22] img-rounded/[08:25] img-circle/[09:12] img-responsive/[10:04] thumbnail/[10:52] col-md-2/[12:01] container/[12:33] 반응형웹/[13:21] page-header/[13:38] well/[14:56] well well-lg/[15:12] well well-sm/[15:24] container/[15:49] alert alert-success/[16:21] alert alert-warning/[17:05] class="close"/[17:16] data-dismiss="alert"/[18:35] fade in/[20:09] 버튼 스타일/[20:18] class="btn"/[20:34] btn-warning/[21:07] btn-link

  • 23.21분 버튼 그룹, 버튼 드롭다운, 라벨과 뱃지

    disabled, active, div class=btn-group, a link, dropdown-menu, data-toggle, date-toggle=dropdown, span class=caret, badge, container, label

    책갈피 : [00:54] btn-xs/[01:24] btn-block/[02:06] btn-default/[02:39] disabled/[03:33] active/[04:29] 그룹화/[04:38] div class="btn-group"/[05:56] btn-group-vertical/[06:39] btn-group-justified/[07:51] a link/[09:21] 주석처리/[10:57] tree menu/[11:39] dropdown-menu/[12:52] data-toggle/[14:28] dropdown-toggle/[14:44] date-toggle="dropdown"/[15:07] span class="caret"/[16:16] glyphicon glyphicon-search/[17:32] btn-lg/[18:12] badge/[18:52] container/[19:20] label/[20:03] label label-warning/[20:14] default 처리

  • 24.22분 progress bar, pagination, breadcrumb, list-group, panel

    progress bar, pagination, breadcrumb, list-group, panel

    책갈피 : [00:03] progress bar/[00:52] min, max 값/[02:36] progress-bar-danger/[03:09] progress-bar-striped/[03:14] active/[04:37] progress-bar-warning/[04:59] pagination/[05:37] 미디어 쿼리 반영/[06:35] class="active"/[06:51] class="disabled"/[07:30] pagination-sm/[08:33] pagination-lg/[09:08] breadcrumb/[10:29] pager/[11:27] previous, next/[12:00] list-group/[12:33] list-group-item/[13:54] container/[14:30] span class="badge"/[15:23] float값 (right)/[16:43] list-group-item disabled/[17:27] list-group-item-success/[18:05] list-group-item-text/[18:54] last-child/[19:30] list-group-item active/[19:47] 패널기능/[20:09] class="panel"/[20:36] panel-danger/[20:57] class="panel-body"/[21:23] list-group-item-heading/[21:56] panel-heading/[22:08] panel-footer

  • 25.23분 panel-group, dropdown, dropup, nav

    panel-group, dropdown, dropup, nav

    책갈피 : [00:25] panel-group/[01:14] 주석처리/[01:17] 드롭다운, 토글 만들기/[02:14] dropdown/[02:32] data-toggle="dropdown"/[02:53] class="btn"/[03:02] btn-primary/[03:21] dropdown-toggle/[03:40] class="dropdown-menu"/[04:40] class="divider"/[05:34] dropdown-header/[06:59] class="disabled"/[07:22] class="dropup"/[08:15] type="button"/[08:25] class="btn btn-danger"/[08:47] data-toggle="collapse"/[10:15] data-target/[10:48] class="collapse in"/[12:15] panel=group collapse/[13:13] class="list-inline"/[13:33] class="nav"/[14:05] class="nav nav-tabs"/[14:51] 드롭다운/[15:21] class="dropdown"/[15:46] class="dropdown-toggle"/[16:06] class="caret"/[16:23] dropdown-menu/[17:15] nav-pills nav-stacked/[18:54] class="nav"/[19:14] nav-tabs/[19:33] href="#index"/[19:42] data-toggle="tab"/[21:13] class="tab-content"/[21:24] class="tab-pane"/[21:55] tab-pane fade in active

  • 26.26분 navbar, form, input

    navbar-nav, navbar-inverse, navbar-fixed, navbar-brand, form-group, form-inline, form-horizontal, form-control, sr-only, checkbox-inline, input-sm, input-lg

    책갈피 : [00:38] navbar/[01:10] container-fluid/[01:48] div class=""ALZIO.CO.KR/[02:03] navbar-brand/[02:31] ul class="nav"/[02:50] navbar-nav/[03:18] navbar-inverse/[04:25] navbar-fixed-top/[04:50] navbar-fixed-bottom/[06:13] ul class="nav navbar-nav"/[06:49] navbar-right/[07:33] right! important/[08:28] glyphicon glyphicon-search/[09:01] glyphicon glyphicon-user/[09:07] glyphicon glyphicon-log-in/[11:12] placeholder/[12:26] div class="form-group"/[13:14] class="form-control"/[13:41] class="checkbox"/[14:12] btn btn-default/[15:09] form class="form-inline"/[16:27] label class="sr-only"/[16:54] form class="form-horizontal"/[18:54] div class="col-sm-9"/[20:24] div class="form-group"/[20:31] col-sm-offset-3 col-sm-9/[21:53] disabled/[22:11] checkbox-inline/[23:17] select/[23:27] select multiple/[23:55] select multiple class="form-control"/[24:56] form-control input-sm/[25:23] input-lg

  • 27.25분 carousel, button

    carousel slide, carousel-indicators, carousel-inner, #next, carousel-control, carousel-caption, modal, modal fade, modal-dialog, modal-header, modal-footer, modal-content, modal-sm, poull

    책갈피 : [00:31] div class="container"/[01:18] div id="next"/[01:29] class="carousel slide"/[01:55] data-ride="carousel"/[02:55] ul class="carousel-indicators"/[03:22] data-target="#next"/[05:10] div class="carousel-inner"/[05:50] div class="item active"/[07:34] absolute/[07:50] carousel/[08:33] css 적용/[08:39] style 시트 삽입/[09:11] width: 60%/[10:40] href="#next"/[11:21] class="left", class="right"/[11:40] carousel-control/[12:35] glyphicon /[12:42] 내용 확인/[13:55] 설명문구 삽입/[14:30] carousel-caption/[14:47] 팝업창/[15:29] input type 버튼 생성/[15:57] 내용 확인/[16:05] 버튼 기능 삽입/[16:21] modal/[16:25] data-toggle/[16:40] data-target/[16:51] 페이지 생성, 숨기기/[17:34] modal fade 정의/[17:52] 결과 확인/[18:30] modal-dialog/[19:13] header,footer 삽입/[19:49] modal content 생성/[20:36] modal-header/[20:59] data-dismiss/[22:02] modal 제거 후 결과 확인/[22:28] 버튼 선언/[22:47] 창 크기 설정/[23:46] 토글값 변수 정의/[24:03] tooltip/[24:38] 결과 확인

  • 28.26분 poull, popover, scroll

    data-placement, data-content, popover, data-spy=scroll, container-fluid, data-offset-top, data-spy=affix

    책갈피 : [00:24] data-placement="right"/[01:06] 자동출력된 부분/[02:40] tooltip/[03:13] data-placement="left"/[03:47] data-content="IT전문교육"/[04:15] popover()/[05:05] component-animations.less/[05:07] opacity/[06:24] data-placement="bottom"/[07:36] data-trigger="hover"/[08:07] 스크롤/[08:21] data-spy="scroll"/[08:43] navbar-inverse/[08:52] navbar-default/[09:06] navbar-fixed-top/[09:29] X-UA-Compatible/[09:50] collapse/[10:45] navbar-nav/[11:44] 스타일 시트 삽입/[12:21] almenu1,almenu2,almenu3/[13:13] 응용/[13:57] container-fluid/[14:39] container-fluid row/[15:39] col-md-6/[16:33] 기기별 화면 비율 확인/[18:36] col-sm-4, col-sm-8/[19:08] data-offset-top="300"/[19:48] data-spy="affix"/[21:01] style='top: 10px;'/[22:18] 주석처리(affix.js)/[22:33] position:fixed;/[23:56] $(document).ready(function()/[24:28] offset/[24:41] affix.bs.affix/[25:00] alert('300px!')

  • 29.26분 affix, 버튼, 팝업, 롤링배너

    affixed.bs.affix, 메뉴 고정, data-spy, 애니메이션 설정방법, 경고 메시지, data-dismiss, close.bs.alert, 버튼에 액션 부여, 버튼 reset 기능, 버튼 내용 변경하기, 버튼 색상 변경하기, 롤링 배너 속도 변경하기, carousel slide 정의, interval 설정, 롤링 반복작업 설정, 순환 사이클 설정, 팝업 띄우기

    책갈피 : [00:04] affixed.bs.affix/[00:20] 결과 확인/[00:38] affix-top/[01:52] bottom 적용/[02:24] 결과 확인/[02:57] 메뉴 고정/[03:15] container-fluid/[03:47] data-spy/[04:22] 넓이 조정/[04:42] 애니메이션 설정방법/[05:24] 기준값 확인/[05:32] 테스트/[06:06] 경고 메시지/[06:32] data-dismiss/[06:52] 닫는 방식 비교/[07:12] 변수명 정의/[08:14] 결과 확인/[08:30] close.bs.alert/[09:21] closed.bs.alert/[10:24] 버튼에 액션 부여/[10:46] 함수 실행/[10:56] click 메서드/[11:08] loading/[11:53] 버튼 reset 기능/[12:50] 버튼 내용 변경하기/[13:39] autocomplete="off"/[13:53] css 스타일시트 정의/[14:04] border-radius 값 조정/[15:45] 버튼 색상 변경하기/[16:48] default로 변경/[17:47] 롤링 배너 속도 변경하기/[18:17] carousel slide 정의/[19:02] interval 설정/[20:17] 롤링 반복작업 설정/[22:04] btnstart,btnstop/[23:02] 순환 사이클 설정/[23:35] 팝업 띄우기/[24:15] 결과 확인/[25:27] 주석처리

  • 30.28분 버튼, 드롭다운 메뉴

    btn-default, btn-danger, show.bs.collapse, shown.bs.collapse, hide.bs.collapse, hidden.bs.collapse, dropdown-toggle, show.bs.dropdown, shown.bs.dropdown, hide.bs.dropdown, hidden.bs.dropdown

    책갈피 : [00:34] 클릭시 보이고 숨기기/[01:17] 함수 만들기/[01:21] btn-default 클릭 함수/[01:38] collapse/[02:40] btn-danger 클릭 함수/[03:13] collapse('show')/[03:56] show.bs.collapse /[04:56] shown.bs.collapse/[05:37] shown.bs.collapse 결과확인/[06:01] hide.bs.collapse/[06:50] hidden.bs.collapse/[07:30] data-toggle="collapse"/[07:54] data-target/[08:11] glyphicon glyphicon-collapse-down/[08:38] glyphicon glyphicon-collapse-up/[08:49] #alz hide.bs.collapse/[09:10] $(".btn").html/[10:44] glyphicon glyphicon-collapse-up/[11:38] 클릭시 스타일시트 적용/[11:53] float:left/[11:59] font-family : "Glyphicons Halflings"/[12:10] content : "\e131"/[12:33] .btn:after/[13:37] content : "\e136"/[14:39] dropdown/[15:16] show.bs.dropdown/[16:04] shown.bs.dropdown/[16:52] hide.bs.dropdown/[17:00] hidden.bs.dropdown/[17:28] $(event.relatedTarget).text()/[19:12] 숨길 때 버튼내용 바꾸기/[19:51] 보일 때 버튼내용 바꾸기/[21:07] caret/[21:19] dropdown-menu/[22:55] menuoff/[23:34] $(this).next('ul').toggle()/[23:53] stopPropagation(), preventDefault()/[24:39] 부모 요소, 자식 요소/[25:00] preventDefault()/[26:33] position: relative/[26:50] top:0; left:50%;/[27:31] top:0; left:98%;

  • 31.23분 경고, 알림 메세지

    show.bs.model, hidden.bs.model, popover, popover-title, popover-content, 나만의 스타일 시트 만들기, charset 설정, mainNav, navbar-fixed

    책갈피 : [00:08] 실행시 알림 출력하기/[01:13] show.bs.modal/[01:43] modal("show")/[02:14] shown.bs.modal/[02:40] hidden.bs.modal/[03:51] id 찾기/[04:15] popover/[04:36] animation:true/[05:07] animation:false/[05:35] delay/[06:06] delay: {show:10 , hide: 70}/[07:48] html: true/[07:57] placement: "bottom"/[08:28] placement: "auto"/[08:58] selector/[10:25] trigger:"click"/[10:47] trigger:"hover"/[11:00] trigger:"focus"/[12:12] .popover 테두리 설정/[13:09] .popover-title 스타일 설정/[14:43] .popover-content 스타일 설정/[16:07] .arrow 스타일 설정/[17:10] 실습예제 결과보기/[18:16] euc-kr, utf-8/[19:00] html lang="ko"/[19:07] viewport/[20:03] 부트스트랩의 강점/[20:46] body id="page-top"/[21:04] nav 태그/[23:12] navbar navbar-default navbar-fixed-top

  • 32.30분 부트스트랩 페이지 수정 (상단 메뉴)

    navbar, navbar-default, container-fluid, navbar-brand, navbar-right

    책갈피 : [00:00] navbar/[00:41] display:none/[00:59] navbar 스타일/[01:47] Ctrl + H/[03:00] @media/[03:29] navbar-default background-color 변경/[03:59] navbar-default.affix background-color 변경/[04:17] border-color 변경/[04:59] min_width/[06:15] 태블릿과 스마트폰일 때 변경내용/[07:03] background-color 변경/[07:21] border-color 변경/[07:34] transition:all .35s/[08:24] navbar-fixed-top/[08:43] position, z-index/[09:13] container-fluid 스타일/[10:48] min_width:768px 이상일 때/[11:15] 메뉴 스타일/[12:09] navbar-brand 스타일/[12:55] navbar-brand:hover/[14:00] 메뉴 background-color 변경/[14:17] pc환경 스타일 확인/[15:09] 메뉴 내용 확인/[15:38] navbar-right/[17:52] 알파값 변경/[18:15] 메뉴 위아래 여백 변경/[20:15] padding/[20:57] line-height/[22:09] border-radius/[24:27] Menu 버튼 display/[26:06] data-target/[26:27] Menu 버튼 클릭시 메뉴 나오기/[27:38] .navbar-collapse.in{overflow-y:auto}/[27:49] .navbar-collapse/[28:32] .nav>li

  • 33.29분 부트스트랩 페이지 수정 (본문)

    header-content, page-scroll, section, container

    책갈피 : [00:30] 메뉴 추가/[01:27] header/[01:36] min-height:100%/[02:20] header-content/[02:41] top:50%/[03:18] -webkit-, -ms-/[04:26] @media/[04:57] padding:100px 15px/[05:28] header-content-inner/[06:15] header-content-inner 스타일/[07:24] h1 스타일/[08:49] hr/[09:31] hr 스타일/[09:47] header-content-inner hr 스타일/[11:01] @media 아닐때 header 스타일/[12:19] btn-xl/[13:14] btn-primary/[14:30] 부트스트랩 전용 css/[14:50] btn 스타일/[15:53] 책갈피 링크/[16:12] page-scroll/[17:17] a.page-scroll/[18:14] 애니메이션 속도 조절/[18:56] bg-primary/[20:00] creative.min.css/[20:35] section/[21:51] container/[22:15] @media container/[22:52] @media container{whith:1170px}/[23:24] .container 여백지정/[24:24] before after/[24:51] before/[25:19] :after, :before/[26:32] .row/[26:52] col-lg-8/[27:24] text-center/[27:55] col-lg-offset-2/[28:34] section-heading/[29:14] h2

  • 34.25분 부트스트랩 페이지 수정 (분문, 포트폴리오)

    section-heading, services, container, col-md, 아이콘 변경, text-muted, container-fluid, popup-gallery, portfolio-box

    책갈피 : [00:00] section-heading/[01:08] hr/[02:17] p /[02:26] text-faded/[03:13] page-scroll/[03:34] btn-xl/[04:07] sr-button/[05:11] duration/[05:23] delay/[06:05] services/[06:43] container/[06:59] col-lg-12/[07:13] section-heading/[07:57] hr/[08:23] col-md-6/[09:07] col-lg-3/[09:35] col-md-6/[10:27] col-md-6/[10:49] service-box/[12:21] pc버전 service-box/[12:50] i/[13:07] text-primary/[13:23] fa fa-4x/[14:18] fa-4x/[14:53] fa/[15:10] text-primary/[15:38] sr-icons/[16:06] fa-diamond/[16:13] fa-paper, fa-newspaper/[16:38] h3/[17:22] p/[18:28] text-muted/[19:00] service-box/[19:29] class="no-padding" id="portfolio"/[19:46] no-padding /[19:58] section/[20:14] container-fluid/[20:57] no-gutter/[21:10] popup-gallery/[21:49] 개별 갤러리/[22:10] no-gutter/[22:34] col-lg-4 col-sm-6 /[22:49] col-sm-6/[23:12] col-lg-4 col-sm-6 /[23:38] porfolio-box/[24:26] porfolio-box:hover

  • 35.30분 부트스트랩 페이지 수정 (포트폴리오, 하단 메뉴)

    carousel-inner, portfolio-box-caption, bg-dark

    책갈피 : [00:09] img/[00:40] img-responsive/[00:55] max-width:100%/[01:20] img 스타일/[02:05] transition:all/[03:12] display:block/[03:28] Project Name 색상변경/[04:03] portfolio-box-caption-content/[04:22] position:absolute/[04:57] transform:translateY(-50%)/[05:40] opacity/[06:28] project-category/[07:15] text-faded/[08:12] category/[08:29] project-category/[08:48] project-name/[09:51] aside/[10:24] bg-dark/[10:44] aside/[11:34] container/[11:43] text-center/[12:01] h2/[12:17] call-to-action/[12:54] btn/[13:04] sr-button/[14:15] sr-contact/[15:01] body id="page-top"/[15:17] mfp-zoom-out-cur/[16:10] jquery/[16:23] mfp-zoom-out-cur/[17:02] mfp-bg/[18:23] mfp-wrap/[19:04] mfp-container/[19:58] .mfp-image-holder .mfp-content/[20:22] .mfp-auto-cursor .mfp-content/[20:27] mfp-content/[21:33] mfp-zoom-out-cur/[21:44] mfp-close/[22:26] button.mfp-close/[23:01] mfp-close/[24:02] img.mfp-img/[24:27] mfp-bottom-bar/[25:17] mfp-counter/[26:05] button.mfp-arrow /[26:19] mfp-arrow-left/[26:25] mfp-arrow/[26:58] mfp-arrow-left:before/[27:05] mfp-arrow:before/[27:20] mfp-arrow:before, mfp-arrow:after/[28:27] b.bgOverlay.attr("class","mfp-bg")/[29:05] $('body, html').css('overflow', 'hidden')/[29:24] mfp-close/[29:33] 닫기버튼





주소 : 경기 의정부시 시민로122번길 41-46, 2F
회사명 : 알지오|대표 : 채명수|개인정보관리자 : 임희정|사업자등록번호 : 217-90-17793|통신판매 제2008-0312호
SSL발급자 Equifax Secure Global eBusiness CA-1|Copyright since 2003ⓒalzio.co.,Ltd all rights reserved. SNS

* 중소기업진흥공단 신기술밴처지원

* 서울기술보증 제 20031501호