본문 바로가기

TUTORIAL


웹 표준 사이트 만들기(2019)

21. 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 웹 표준 사이트 만들기(2019) - 마우스 오버효과1 가장 기본적인 마우스 오버효과 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger..
20. 웹 표준 사이트 만들기(2019) - 게시판3 웹 표준 사이트 만들기(2019) - 게시판3 두가지 스타일의 게시판 유형을 배우는 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger ..
19. 웹 표준 사이트 만들기(2019) - 게시판2 웹 표준 사이트 만들기(2019) - 게시판2 두가지 스타일의 게시판 유형을 배우는 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger ..
18. 웹 표준 사이트 만들기(2019) - 게시판1 웹 표준 사이트 만들기(2019) - 게시판1 두가지 스타일의 게시판 유형을 배우는 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger ..
17. 웹 표준 사이트 만들기(2019) - 컨텐츠 레이아웃 웹 표준 사이트 만들기(2019) - 컨텐츠 레이아웃 컨텐츠 레이아웃 안에는 여섯 개의 박스가 들어가는 구조의 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML title HTML meta 특수문자 하이퍼 링크 HTML style HTML html HTML head H..
16. 웹 표준 사이트 만들기(2019) - 전체 배너 웹 표준 사이트 만들기(2019) - 전체 배너 배너는 스크립트를 통해 만들지만 기본 적인 틀을 연습하는 배너 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역..
15. 웹 표준 사이트 만들기(2019) - 전체 타이틀 웹 표준 사이트 만들기(2019) - 전체 타이틀 전체 타이틀 연습하는 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publish..
14. 웹 표준 사이트 만들기(2019) - 전체 메뉴 웹 표준 사이트 만들기(2019) - 전체메뉴 숨겨진 전체 메뉴 레이아웃을 연습하는 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 전체 메뉴 HTML Reference HTML 태그(Tag) 블록 요소/인라인 요소 DTD 선언 언어 속성 설정 HTML HTML 특수문자 하이퍼 링크 HTML HTML HTML 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger ..
13. 웹 표준 사이트 만들기(2019) - 헤더 아이콘 웹 표준 사이트 만들기(2019) - 헤더 아이콘 아이콘의 이미지를 백그라운드로 넣는 방법과 이미지 스프라이트 기법을 통해 넣는 방법을 배웁니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr icon1 icon2 icon3 icon4 cont_nav cont_tit cont_ban cont_cont footer 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Profession..
12. 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트 웹 표준 사이트 만들기(2019) - 헤더 타이틀 & 웹 폰트 웹 폰트를 적용하는 방법과 헤더 타이틀을 코딩하는 예제입니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy.co.kr cont_nav cont_tit cont_ban cont_cont footer 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube Professional Publisher & Designer webstoryboy...
11. 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴 웹 표준 사이트 만들기(2019) - 헤더 배경 & 메뉴 헤더의 배경을 넣은 방법과 오른쪽 상단 메뉴를 코딩합니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube cont_nav cont_tit cont_ban cont_cont footer 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 Desinger Publisher Youtube cont_nav cont_tit cont_ban cont_cont footer @charset "utf-8"; /* 스킵 내비게이션 */ #skip {position: relative;..
10. 웹 표준 사이트 만들기(2019) - 스킵 메뉴 웹 표준 사이트 만들기(2019) - 스킵 메뉴 웹 표준 사이트를 만들기 위한 스킵 메뉴입니다. 웹 접근성을 위한 스킵 메뉴에 대해서 알아봅니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 header cont_nav cont_tit cont_ban cont_cont footer 전체 메뉴 바로가기 배너 영역 바로가기 컨텐츠 영역 바로가기 header cont_nav cont_tit cont_ban cont_cont footer @charset "utf-8"; /* 스킵 내비게이션 */ #skip {position: relative;} #skip a {position: ab..
09. 웹 표준 사이트 만들기(2019) - 레이아웃2 웹 표준 사이트 만들기(2019) - 레이아웃2 웹 표준 사이트를 만들기 위한 실전 레이아웃2 연습니다. 기존의 레이아웃 연습을 통해 실제 사이트의 레이아웃을 제작합니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css header cont_nav cont_tit cont_ban cont_cont footer header cont_nav cont_tit cont_ban cont_cont footer @charset "utf-8"; /* 레이아웃 */ #wrap {width: 100%; } #header {width: 100%; height: 325px; background: #111;} #contents {width: 100%; heigh..
웹 표준 사이트 만들기(2019) - 레이아웃1 웹 표준 사이트 만들기(2019) - 레이아웃1 웹 표준 사이트를 만들기 위한 실전 레이아웃 연습니다. 기존의 레이아웃 연습을 통해 실제 사이트의 레이아웃을 제작합니다. 영상과 함께 따라해주세요! 샘플 보기 소스 다운 완성 소스 index.html style.css reset.css @charset "utf-8"; /* 레이아웃 */ #wrap {width: 100%;} #header {width: 100%; height: 325px; background: #111;} #contents {width: 100%; height: 800px; background: #222;} #footer {width: 100%; height: 200px; background: #333;} @charset "utf-8"; /..
웹 표준 사이트 만들기(2019) - layout07 웹 표준 사이트 만들기(2019) - layout07 웹 표준 사이트를 만들기 위한 일곱 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다. 샘플 보기 소스 다운 완성 소스 index.html style.css header-top header-nav banner content1 content2 content3 footer-nav footer-info header-top header-nav banner content1 content2 content3 footer-nav footer-info /* 리셋 */ * { margin: 0; padding: 0; } /* 전체 레이아웃 */ #wrap { font-size: 20px; color: #fff; text-ali..