로그인

웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다.
그때 그때 ‘그럴것같은’ 이 아니라 제대로 된 퍼블리싱 개념과 방법을 배워 퍼블리셔가 될 수 있습니다.

제대로 배워보는 퍼블리싱 강좌 HTML CSS, 실전 웹표준

학원에서 실제 강의하는 내용을 정리했습니다.html과 css의 기초를 다지고, 다양한 실습을 진행하도록 준비했습니다.
취업을 위해 웹표준의 기초를 다질 수 있는 기회를 찾고 계신다면 이 기회를 잡으시기 바랍니다. 또, 학원을 다니고 싶지만 시간의 여유가 없으신 분에게도 좋은 기회가 되리라 믿습니다. 하지만 이 강의가 모든 프론트엔드개발자에게 유용하진 않을 수 있습니다. 빠르게 흘러가는 웹트랜드 속에서 수많은 프레임웍과 라이브러리를 접해 보시고 싶은 분은 좀 더 짧고 간결한 강의가 오히려 도움이 될 것입니다.그럼 이 강의를 접하는 분들에게 다소나마 도움이 되기를 바라며…

학습 목표

  • 웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다.
  • 웹 퍼블리셔로 취업이 가능한 정도의 지식을 전달합니다.

배우는 것들

  • HTML, CSS 요소들의 개념과 문법
  • 최적화된 마크업 기법, 테이블, 박스모델, 크로스브라우징, CSS3, 미디어쿼리, 반응형 등.
  • 실무예제 : 반응형 웹 구현, 탭메뉴, 여러가지 형태의 list 구현, 이메일코딩, 웹사이트 만들기 등.

도움이 되는 분들

  • 웹퍼블리셔로 취직이나 전직을 원하는 분
  • 이쁜 화면을 그대로 웹 화면으로 구현하고 싶은 분
  • html과 css를 제대로 배워보고 싶은 분
  • 개념없이 경험으로만 퍼블리싱에 의존하는 분
  • 프론트엔드개발자로 입문하고자 하는 분
  • 학원을 다니기엔 시간이 부족한 분

웹표준 퍼블리셔 과정

  • html & css 기초 학습하기
  • 개념에 대한 정확한 이해
  • 웹표준 각종 실습진행
  • html5 & css3 문법 알아보기
  • 웹페이지 제작 실습

 지식공유자 소개

이동호
현) 하이미디어 강사
전) 모노라움 / 더조은 / 현대직업전문학교 / 방송정보교육원 / 디자인티모(글로벌IT) / 경원직업전문학교 / 한국직업전문학교 강사
전) 홍익대학교 방학특강 / 성신여자대학교 방학특강

강좌 평가

4.8

6 개의 수강평
  • 5 점5
  • 4 점1
  • 3 점0
  • 2 점0
  • 1 점0
  1. 박희옥의 프로필 사진

    정말 좋은 강의입니다.

    5

    가격에 비해 엄청나게 많은 가르침을 담고있습니다. 책한권 가격도 안되는 가격으로 동강을 들을수있다는것에 놀라구요. 강의도 초급에서 실습까지.. 내용에 감탄을 하게 됩니다. 강의양으로 치면.. 20만원도 아깝지않을만한 강의구요. 학원보단 이 강의하나로 html/css강의를 마무리하는게 더 좋을것 같다는 생각이 듭니다. 정말 돈 아깝지않아요. 평소같으면 이렇게 후기쓰는것도 귀찮아했겠지만 강사님한테 고마운 마음에 쓰게됩니다. 강의를 반정도 진행한 상태인데.. 어중간한 초급이던 제가.. 이강의 마무리하면서 중급으로 올라설수있을것 같아요. 돈을 더주고싶은 강의는 첨이네요. 진짜.. 유일한 단점이.. 강의초반에 소리가 너무 작아서.. 최대한 볼륨높여도 안들리기에.. 숨도 안쉬고 들었네요. 강의중반대와선 적당한 볼륨으로 조정되었는지.. 괜찮았습니다.(도저히 안들려서 이어폰 바꿨는데 그덕분도 있는듯하네요..ㅡㅡ) 그리고 1.5배속으로 보통 듣는데 강의 긴것은 그렇게 들어도 괜찮은데 짧은것은 목소리가 약간은 말린다고 해야하나..뭐 그렇습니다. 그럴땐 1배속으로 듣네요. 단점은 정말..아무것도 아니구요. 적극추천합니다.

  2. Kim Byeongseong의 프로필 사진

    아아 혜자스럽고 이 가격에 들을 수 있다는 게 믿기지 않는 강의입니다.

    5

    강의 분량이 평균 20~30분에 강의 수도 50개가 넘어가니 이 강의만 들으면 html css는 기본기 확실히 잡는 것 뿐만 아니라 실전에서도 html css때문에 한계에 부딪힐 일은 없을 것 같네요 아직 다 이수하지는 못했지만 들을수록 정말 좋은 강의입니다. 넘 좋아서 제 블로그에다가도 소개글을 써놨네요 ㅎㅎ 앞으로 다른 좋은 강의도 많이 만들어주세요~~

  3. 내일의균의 프로필 사진

    저 소리가 너무 작아요!! 음량을 최대로 해도 잘 안들려요.

    4

    내용은 괜찮은거 같은데 음량을 최대로 해도 잘 안들려요.
    해결 방법이 있을까요??

  4. 권오현의 프로필 사진

    아직 완강하진 못했지만 강좌 자체는 강좌제목 그대로입니다.

    5

    강좌 분량도 놀랍고 실제 사이트를 그대로 만들어보는 강의 내용도 훌륭합니다. 단지, 실제 현업으로
    일을 하면 분명히 강좌 내용을 벗어나는 퍼블리싱이 생길텐데 이걸 누구한테 물어봐서 해결이
    될런지가 걱정이 되네요. 강좌와는 상관없는 걱정이라 강좌 자체는 너무 좋습니다.

  5. 김재환의 프로필 사진

    강좌명 그대로입니다.

    5

    아 정말 강력한 강좌입니다. 퍼블리셔 준비중인데 학원도 다니고 집에서 혼자 공부도 하고 그러는데도 무언가 답답함이 있었는데, 이 강좌를 보니까 답답합이 해소가 됩니다. 문제는 제가 기초가 별로 없었네요. 기본기를 충실하게 잘 알려주십니다. 실무를 접해 보지 않은 사람들한테 꼭 추천입니다.

  6. 수제자(연경)의 프로필 사진

    많은 도움이 될 것 같아요^^

    5

    저에게 많은 도움이 될 것 같습니다

강좌 교육과정

프로그램(Editor) 설치 및 준비
emmet(zen-coding) 설치학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:11:00
dummy text, dummy image 작성방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
html 작성 기초
웹표준이란?학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
html 태그 작성 문법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
문서형 선언, 언어 지정, 문자 코드 셋 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:25:00
meta요소 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:20:00
html템플릿 작성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:00
각종 html 요소 알아보기
문자 실체 참조와 수치 문자 참조 적용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:00
구문을 강조하거나 하이라이팅 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:00
단의어 정의와 약어, 작품의 제목 표현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:00
루비 주석과 시간의 표현학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:00
제목, 문단, 연락처, 인용문학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:25:00
목록 작성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:00
테이블 작성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:22:00
a요소 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:25:00
img요소 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:21:00
이미지맵 만들기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:18:00
아이프레임 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
폼 컨트롤 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:41:00
html5에서 추가 된 폼 콘트롤과 속성들학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:32:00
웹페이지 코딩 실습
그룹화와 섹셔닝학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:48:00
웹 페이지 제작(Markup) 실습 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:24:00
웹 페이지 제작(Markup) 실습 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 01:15:00
css 기초
html 문서에 css 적용하기, css 연결하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:23:00
css값, 길이와 색상 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:32:00
css 선택자와 선택자의 우선순위학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 01:11:00
폰트 스타일
폰트와 텍스트 스타일학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:32:00
@font-face와 구글폰트 적용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:31:00
단어 깨트리기, 줄바꿈 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:21:00
목록 관련 스타일학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:11:00
박스모델과 배경 스타일
박스모델 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:38:00
배경 스타일 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:41:00
테이블 관련 스타일
테이블 관련 스타일 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:00
배치(레이아웃) 관련 스타일
플롯 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:27:00
플롯 해지하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:00
포지션 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:32:00
포지션을 활용한 가운데 위치 지정학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:19:00
EMS, 이벤트 제작 실습
이메일 페이지 제작 실습 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:29:00
이메일 페이지 제작 실습 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:00
이벤트 페이지 제작 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:37:00
예제 만들어보기 (네이버 Nuli)
Box1 – 제목, 내용, 더보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:52:00
Box2 – 모서리 라운드 처리학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:35:00
Box3 – 수직 가운데 정렬 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:00
Box3 – 수직 가운데 정렬 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
Button – 텍스트버튼학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:41:00
Button – 텍스트버튼아이콘학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
paginate – 게시판의 페이징 부분학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:38:00
menu – 탭메뉴, 메뉴 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:52:00
menu – 탭메뉴, 메뉴 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:13:00
faq list – 질문과 답변 목록학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:33:00
list – 갤러리 형식의 목록 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:54:00
list – 갤러리 형식의 목록 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
list – 갤러리 형식의 목록 3학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:00
list – 이미지와 텍스트 목록 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:25:00
list – 이미지와 텍스트 목록 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
list – 이미지 하단에 텍스트가 있는 목록 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:19:00
list – 이미지 하단에 텍스트가 있는 목록 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:16:00
list – 다음(Daum) 메인페이지 이미지 목록학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 01:02:00
list – 다음(Daum) 부동산 메뉴학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 01:07:00
table – 테이블 작성 예제학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:33:00
form – 로그인 만들기 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 01:17:00
form – 로그인 만들기 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:17:00
layout – 레이아웃 실습 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:57:00
layout – 레이아웃 실습 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:14:00
웹 페이지(subcide.com) 만들어보기 실습
웹 페이지 html 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:22:00
웹 페이지 css 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:59:00
웹 페이지 link 실습학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:18:00
css3 알아보기
css3 선택자 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:42:00
그림자처리, 말줄임표현, 투명도 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:39:00
멀티칼럼&둥근모서리 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:29:00
추가 된 배경처리 알아보기 & 그라데이션 적용학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:30:00
박스사이징&플렉스 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:13:00
transition 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:25:00
animation 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:21:00
transform 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:50:00
filter 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:26:00
반응형 웹 알아보기
미디어쿼리 알아보기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:27:00
반응형 웹 페이지 실습하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:54:00
웹 사이트 제작 실습
최적화 된 웹사이트 마크업 작성하기 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 01:12:00
최적화 된 웹사이트 마크업 작성하기 2학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:00
기본 스타일 지정하기 1학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:50:00
각 부위별 스타일 지정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:54:00
웹페이지실습 – script학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:18:00
웹호스팅 설정 & FTP활용 파일 전송학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:15:00
  • 가격 옵션 +
  • 평생
  • 강좌 수료증
  • 84개 강의, 총 1 일 16 시간
  • 위시리스트

실시간 인기 강좌

우리는 성장기회의 평등 을 추구합니다. 🌳

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4178-0406 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R19 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED