IT전문교육 의 리더!

HOME>IT전문가>핵심 웹표준퍼블리셔>반응형웹 [입문]

반응형웹 [입문]

20회차 속성과정|전체 : 8시간 35분|회차당 평균 : 25분45초
반응형웹 [입문] / 2개월
반응형웹 [입문 + 실무] / 4개월
270,000 165,000
  • 전문강사 : 채명수
Study Guides
반응형웹 [전문과정]은 알지오에서 배출된 웹퍼블리셔들의 요청에 의해 제작된 강의로, 전문가를 위한 강의입니다.

반응형웹은 많은 웹사이트를 제작해보고 분석해봐야 완벽해질 수 있기 때문에 실제 전문가들이 제작한 웹사이트를 대상으로 강의를 진행합니다.
 
  • 0120분 반응형 웹 제작 핵심기술 part1

    책갈피 : [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 선언

  • 0220분 반응형 웹 제작 핵심기술 part2

    책갈피 : [00:17] line-height 보기/[00:49] 컨테이너 입력/[01:10] 디바이스 넓이에 따라 미디어 각각 선언/[01:48] 최소 넓이 최대 넓이에 따른 컨테이너 요소 설정/[02:38] 테블릿과 와이드 내용 정의/[05:09] credit/[05:58] max-width/[06:23] margin:auto/[06:37] 중간 점검/[08:25] 버튼 확인/[09:23] 로고 설정/[10:09] 이미지 설정/[10:51] pc 버전일때만 이미지 나오게 설정/[10:59] logo-fight/[11:25] 새로고침/[11:38] ul 목록 튜닝/[12:33] colmn 정의/[13:06] 실제 내용 보기/[13:53] 잘못된 경우/[14:13] 소스 추가/[15:25] 변경된 내용 보기/[16:05] js 적용 확인/[17:20] 맨 아래 내용 세팅/[18:56] 이미지 width 값 설정/[19:12] 사이즈 설정해 주지 않아도 적용 되는 이유

  • 0320분 실제적용 사례 CSS실무코딩 1-1

    책갈피 : [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] 웹사이트 가운데 내용 확인

  • 0428분 실제적용 사례 CSS실무코딩 1-2

    책갈피 : [00:05] 제목과 스펜/[00:16] 큰 문자/[01:06] 일반 텍스트/[02:08] 현재 선언된 부분/[03:19] 웹사이트가 좁혀졌을때/[04:17] 컬러 부분/[04:38] 컨텐트가 됐을 경우/[06:14] 자간 확인/[06:27] 내용 보기/[07:27] 바뀐 내용 확인/[08:12] p태그 숨어있는 부분/[09:00] 글자 움직이는 부분/[09:31] 이미지 부분 보기/[10:23] 확인/[10:53] 밑 메뉴 보기/[12:23] 변경 사항 확인/[12:55] button, footer 부분 보기/[13:48] 확인/[14:36] pc 버전 적용 내용/[15:08] pc 버전 전체 선언 보기/[16:27] 텍스트 외부 여백/[17:18] p 태그 소스 보기/[17:30] 스몰 사이즈 됐을 경우 확인/[18:56] pc버전에서 미디엄 버전으로 넘어갈 경우/[19:12] 내용 함축해서 줄이기/[21:56] footer부분 보기/[22:47] 100%로 나오는 이유/[24:29] footer 부분 스몰일 경우 확인/[26:10] 이미지가 위로 올라간 이유

  • 0519분 실제적용 사례 CSS실무코딩 2-1

    책갈피 : [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] 어떻게 변경 되는지 알아보기

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

    책갈피 : [00:04] 중심 부분 확인/[00:38] 삼단계 변경 설명/[02:10] max 값 확인/[03:02] 결과/[03:11] 선언된 내용 이미지/[05:24] 텍스트 부분 소스 보기/[05:46] 확인/[06:40] 섹션 확인/[07:51] 내부 여백 값 확인/[09:34] 평상시 화면일 경우 선언/[09:55] 밑 여백 보기/[10:12] sidebar/[10:52] pc화면으로 접속했을 때/[11:15] bottom:600px/[11:36] 10px로 수정 후 확인/[13:06] 함축이 됐을 경우/[14:06] 내부 여백 값 확인/[14:15] 첫번째 섹션/[14:41] 배경 컬러가 흰색인 이유/[15:01] pc 버전일 경우 sidebar 확인/[15:48] 아이콘 보기/[16:15] footer 내용 보기/[18:08] 기본 패딩값 확인/[18:32] 웹사이트 화면 줄인 후 확인

  • 0726분 실제적용 사례 CSS실무코딩 3-1

    책갈피 : [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] 소스 보기

  • 0827분 실제적용 사례 CSS실무코딩 3-2

    책갈피 : [00:13] 모바일 화면일 경우/[00:41] 메인 부분 소스 보기/[01:35] 존속된 사항/[01:45] content-head 값 확인/[03:54] 메인 전체 감싸는 부분/[04:56] 모바일일 경우/[06:06] top-story-wrapper clearfix/[06:27] 추가 적용 부분/[07:57] 통합 적용 부분/[08:34] top-story/[10:00] bottom 값 보기/[10:55] 디바이스 사이즈가 줄었을 경우/[11:55] top-story-side/[13:48] 이미지가 커진 이유/[15:34] 따로 설정해야할 부분/[16:08] 사이즈가 줄어들었을 때/[17:33] 여섯개 라인 부분/[18:14] pc 버전 소스 확인/[18:54] 태블릿일 경우/[19:50] 모바일일 경우/[20:20] article-listing/[20:45] loop post/[21:14] 태블릿일 때 제일 먼저 적용 받는 사항/[21:57] 하단 메뉴 부분/[22:16] footer 보기/[23:34] 모바일 화면일때 메뉴 확인/[24:02] 소스 보기/[26:15] 카피라이트 부분/[26:30] 태블릿일 경우

  • 0918분 실제적용 사례 CSS실무코딩 4-1

    책갈피 : [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] 위치 확인

  • 1015분 실제적용 사례 CSS실무코딩 4-2

    책갈피 : [00:04] h2 class=hdr/[01:02] 함축핼을 때/[01:30] ul class=nav nav-permanent-actions/[02:05] 배너 이미지/[03:08] wrapper/[03:23] ul 목록 적용사항 보기/[04:21] row span3/[04:51] row card-break-2up/[06:05] div-class=figure/[06:27] 적용사항 보기/[07:03] 홈페이지 하단/[07:18] div class=wrapper homepage-sock/[08:21] div class=span3 gutter-horiz-in gutter-bottom-4/[09:25] row span3차이를 나게하려면/[10:52] div id=footer/[11:43] gutter-horiz-in/[12:29] 변경 값 확인/[13:22] span class=logo alt/[14:02] 하단 메뉴

  • 1137분 실제적용 사례 CSS실무코딩 5

    책갈피 : [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] 와이드 화면보다 작을 경우

  • 1242분 실제적용 사례 CSS실무코딩 6

    책갈피 : [00:05] div class=line/[00:38] 와이드 화면일 경우/[01:22] 화면 줄인 후 확인/[02:22] 모바일 화면일 경우/[03:50] div class=container/[04:37] 와이드 화면일 경우/[05:07] 줄인 화면일 경우/[05:38] 웹사이트 기본값 확인/[05:50] 기본 스텐다드 확인/[08:28] 화면 줄이기/[09:18] ul class=nav-sections/[10:20] 디자인 소스/[11:00] header class=section-header/[12:07] content/[12:17] 웹사이트 화면 줄이기/[13:38] ul 목록 이미지/[13:46] li 값 확인/[16:13] div class=section-header/[16:36] 텍스트 부분 소스 보기/[17:21] 여백 값 확인/[18:21] 폰트 사이즈/[19:08] 모바일일 경우 h1/[20:16] 모바일일 경우 p태그/[21:38] 기본 적용 부분/[21:53] div class=box box-writing/[22:49] 와이드 화면일 경우/[22:56] box content/[24:32] 사이즈 줄일 경우/[26:01] 패딩 값 수정 후 확인/[26:58] 기본 사항일때/[27:33] 글꼴 변경 확인/[28:26] hfeed section-toggle/[29:33] 제목글 부분/[30:00] 하단 p태그/[31:21] 아래 메뉴/[31:59] ul 목록 확인/[32:58] li 값 확인/[35:03] 홀수일 경우에만 백그라운드 컬러 지정/[36:26] 반복되는 내용/[37:35] 화면이 작아졌을 경우/[38:10] 기본값 적용 확인/[38:47] 웹사이트 하단/[39:22] footer 사항/[39:59] 기본 와이드값/[41:21] 모바일 화면일 경우

  • 1328분 실제적용 사례 CSS실무코딩 7-1

    책갈피 : [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] 모바일일 경우 에프터에 대한 선언

  • 1426분 실제적용 사례 CSS실무코딩 7-2

    책갈피 : [00:05] viewall/[00:28] wap::after/[00:50] 작은 화면일 경우/[01:09] gallery/[01:41] gallery-item시작과 끝/[01:58] 기본 pc일 경우/[02:09] width: 24.5%/[03:28] 모바일일 경우/[04:11] 이미지 확인/[04:26] hgroup/[04:50] pc일 경우 이미지/[05:06] 태블릿일 경우/[05:57] section class=group/[08:43] p class=colonel serious/[10:37] split snip/[11:22] div class=reasons/[12:47] 현재 내용 확인/[14:37] 배경 이미지 확인/[14:48] 내부 텍스트 값/[16:44] div class=actions/[17:11] li 보기/[17:36] actions li/[18:24] 웹사이트 화면 보기/[19:48] nav class=conditions/[23:26] footer role=contentinfo/[23:58] 이미지

  • 1530분 실제적용 사례 CSS실무코딩 8-1

    책갈피 : [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

  • 1629분 실제적용 사례 CSS실무코딩 8-2

    책갈피 : [00:00] div class=svtContainerBase/[00:59] 일반 스텐다드 사항/[02:33] 태블릿일 경우/[03:10] width 값/[03:42] 모바일일 경우/[04:21] 기본 설정 파일 셋팅/[04:54] 바 밑 부분 내용/[05:40] 기본 적용 사항 확인/[06:52]기본적인 섹션 적용사항/[06:58] pc 일 경우/[07:46] 모바일일 경우/[08:09] 기본 설정 파일/[08:41] div class=svtServiceHeader svtXClearFix/[08:47] 확인/[10:07] 오른쪽 섹션/[12:04] 웹사이트 사진 div/[13:05] div class=svtUnit svtNth-1/[13:27] 기본 css/[14:47] 태블릿일 경우 변경 사항/[16:10] section class=svtContainerFull/[17:03] 내부, 외부 여백/[17:56] div class=svtnit-1 svtnit-1-2/[19:21] div class=svtUnit svtnit-3/[20:19] 모바일, 태블릿일 경우/[21:48] 절대값 정렬 확인/[23:54] footer/[24:55] 일반 pc 버전일 경우/[25:46] 모바일 버전일 경우/[27:41] 태블릿일 경우/[28:27] 하단 부분/[28:45] 요약

  • 1735분 실제적용 사례 CSS실무코딩 9-1

    책갈피 : [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] 모바일 사이즈일 경우 버튼 확인

  • 1831분 실제적용 사례 CSS실무코딩 9-2

    책갈피 : [00:18] div class=faux_page/[00:30] 일반적으로 정의된 내용/[02:10] h2 class=homepage_navigation/[02:47] 모바일 사이즈일 경우/[04:14] div class=format_text/[04:23] divclass=group/[04:53] 이미지 소스 확인/[06:23] 텍스트 소스 확인/[08:20] divclass=story_content format_text/[08:26] 일반적인 사항일 경우/[09:13] 추가 적용된 사항/[10:04] 이미지/[12:01] 추가 적용된 사항/[12:56] 모바일일 경우/[14:08] div class=homepage_quote format_text group/[14:43] 모바일일 경우/[15:26] 요소 확인/[16:10] 모바일일 경우/[17:15] div class=featured_logos group/[17:48] 이미지 확인/[19:53] 모바일 사이즈일 경우/[21:37] 모바일 사이즈일 경우/[21:45] div class=homepage_latest format_text group/[24:15] div 설정 내용 확인/[24:49] 기본 사항일 경우/[25:48] 홈페이지 하단 확인/[26:41] pc 화면일 경우/[27:34] li 태그 확인/[28:48] 여백 내용 확인/[29:49] 추가적인 팁

  • 1920분 실제적용 사례 CSS실무코딩 10-1

    책갈피 : [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] 와이드 화면일 경우

  • 2025분 실제적용 사례 CSS실무코딩 10-2

    책갈피 : [00:02] 특이한 점/[00:19] section id=author/[01:50] 적용 확인/[02:53] 웹사이트 화면 줄인 후 메뉴 확인/[03:48] section id=m-author/[05:29] section id=advert/[05:35] 평상시 화면 적용 확인/[05:59] 존속된 사항 확인/[08:03] css 보기/[09:02] margin 값 수정/[09:59] 없어지는 사항/[10:21] 중앙 부분/[11:07] div id=announcement/[11:52] 존속된 사항 확인/[13:59] 모바일일 경우/[14:12] 차이 알아보기/[14:37] 포함되는 내용 확인/[15:08] 기본 반영사항 확인/[15:49] footer 부분/[17:41] 네비게이션/[18:43] ft-nav/[19:47] 기본 사항/[20:48] ul 목록/[20:56] 일반 pc일 경우/[22:46] float: right/[22:51] copyright/[23:10] 백그라운드 이미지 부분 확인






본 강의 수강생들의 추가구매가 가장 많은 학과.