실습 예제 목록

              

학생 결과 사이트

학교 / 학과이름주소
전북대학교 IT융합기전공학부 김 수 민 http://rlatnals031.dothome.co.kr/
노 호 진 http://noinsa.dothome.co.kr/
전북대학교 컴퓨터공학부 이 유 희 http://yoooohee.dothome.co.kr/
김 소 연 http://thdus.dothome.co.kr/main.html
한밭대학교 응용소프트웨어학과 이 서 현 http://shl.dothome.co.kr/
정 진 영 http://jjy0523.dothome.co.kr/
한 선 영 http://viwoee.dothome.co.kr/
원광대학교 시각정보디자인과 김 서 아 http://free6814.dothome.co.kr/
서 승 범 http://beomie.dothome.co.kr/
한 민 웅 http://microhard.dothome.co.kr/
오 채 은 http://oce.dothome.co.kr/
정 지 혜 http://ladie.dothome.co.kr/

참고 사이트

내용주소비고
Dothome - 무료 웹호스팅을 사용할 수 있는 사이트 https://www.dothome.co.kr/ Hosting
w3schools - HTML, CSS, JavaScript 등 Tutorial site https://www.w3schools.com/ Tutorial
mdn plus - HTML, CSS, JavaScript 등 Tutorial site https://developer.mozilla.org/ko/ Tutorial
Google - web font site https://fonts.google.com/ font
Noonnu - web font site https://noonnu.cc/ font
[site] placehold http://robbi.dothome.co.kr/source/placehold.html 임시이미지
[site] Dummyimage https://dummyimage.com/200x200/49ab48/131745.jpg&text=robbi 임시이미지
[site] 구글에서 제공해주는 아이콘 폰트 https://icons.getbootstrap.com/ Icon Font
[site] fontawesome - 텍스트 아이콘을 사용할 수 있는 사이트 https://fontawesome.com/ Icon Font
[site] 그라데이션 제공 사이트 - Copy CSS https://webgradients.com/ 그라데이션
[site] 그라데이션 제공 사이트 - 각도조절, 색상변경 및 추가 가능 https://www.grabient.com/ 그라데이션
[site] html, css, Javascript 기능중에서 웹브라우저의 지원여부 확인 https://caniuse.com/ 지원여부
[site] JavaScript, JQuery, JQuery Plugin 라이브러리 가져오기 https://cdnjs.com/ 라이브러리
[site] jQuery - VEGAS2 Fullscreen Background slideshow https://vegas.jaysalvat.com/ jQuery

텍스트 관련 태그들

키워드내용주소비고
Meta 10초 후 자동으로 이동되는 메타태그 http://robbi.pe.kr/meta.html -
h 제목과 문단태그 heading-paragraph.html -
p 텍스트를 덩어리로 묶어 주는 태그 02-text-1.html -
pre 입력하는 그대로 화면에 표시하기(pre)#1 ./source/02-text-2.html -
입력하는 그대로 화면에 표시하기(pre)#2 ./pre.html -
text 기타 텍스트 관련 태그들 ./source/02-text-6.html -
UL 순서 없는 목록 만들기 ./source/ul.html -
OL 순서 있는 목록 만들기 ./source/ol.html -
DT 설명 목록 만들기 ./source/dl.html -
table [과제] 이력서(표) 만들기 http://robbi.pe.kr/resume.html 과제
표 만들기 - thead, tbody, tfoot ./source/02-table-2.html -
[과제] 형그니의 시간표 ./source/schedule.html -
DIV DIV와 SPAN ./div-span.html -

이미지와 하이퍼링크

키워드내용주소비고
img 이미지 태그와 속성 http://robbi.dothome.co.kr/source/03-img-2.html -
img - figure 이미지 태그의 Figure - figcaption http://robbi.dothome.co.kr/source/03-img-3.html -
임시이미지 [site] placehold http://robbi.dothome.co.kr/source/placehold.html site
[site] Dummyimage https://dummyimage.com/200x200/49ab48/131745.jpg&text=robbi site
a - taget 하이퍼 링크의 target 속성 http://robbi.dothome.co.kr/source/03-img-4.html -
a - jump 한 페이지 내의 특정 위치로 점프하는 앵커(anchor) http://robbi.dothome.co.kr/source/03-img-5.html -
[과제] 앵커태그를 이용한 나의 소개 http://hkkim.dothome.co.kr/jump.html 과제
imageMap 이미지맵(ImageMap) http://robbi.dothome.co.kr/source/03-img-6.html -
이미지맵(ImageMap)을 이용한 초대장 제작 http://robbi.dothome.co.kr/source/event.html -
이미지맵(ImageMap)을 이용한 인트로 페이지 http://hkkim.dothome.co.kr/intro.html 과제
Object Object 태그를 이용하여 멀티미디어 파일(PDF) 삽입하기 http://robbiman.dothome.co.kr/example/object.html -
Embed Embed 태그를 이용하여 음악 삽입하기 http://robbiman.dothome.co.kr/example/embed.html -
audio 오디오 삽입하기 http://robbiman.dothome.co.kr/example/audio-1.html -
video 비디오 삽입하기 http://robbiman.dothome.co.kr/example/video-1.html -
iframe iframe http://robbi.dothome.co.kr/source/iframe.html -
form form 태그 http://hkkim.dothome.co.kr/form.html -
form - radio, checkbox, select 태그 http://robbiman.dothome.co.kr/form-select.html -

CSS 기초

키워드내용주소비고
CSS 사용법 CSS 종류 (내부, 외부, 인라인 스타일방식) http://robbi.pe.kr/css-use.html -
내부 - 외부 스타일시트 ./source/05-external.html -
전체선택자(*) 전체 선택자 ./source/05-uniselector.html -
태그선택자 태그 선택자 ./source/05-tagselector.html -
클래스선택자(.) 클래스 선택자 ./source/05-classselector.html -
SPAN 이용한 클래스 선택자 ./source/05-classselector3.html -
ID선택자(#) id 선택자 ./source/05-idselector.html -
CSS 우선순위 캐스캐이딩 - 우선순위 ./source/05-cascading1.html -
캐스캐이딩 - 우선순위(명시도) ./source/05-cascading2.html -
CSS 상속 CSS 상속 ./source/05-inherit.html -
연결선택자 하위선택자, 자식선택자, 인접 형제 선택자, 형제선택자 http://robbi.pe.kr/descendant-selector.html -
결합선택자 회원가입양식의 요소를 연결 선택자로 스타일 지정 예. http://robbi.pe.kr/register1.html register1.css
속성선택자 속성선택자를 위한 종합 예제 http://robbi.pe.kr/attribute-selector.html -
회원가입양식에 필수입력필드와 읽기전용필드의 스타일 예. http://robbi.pe.kr/register2.html register2.css
Accent-color의 예 http://robbi.pe.kr/accent-color.html -
가상선택자 마우스 포인터를 위로 올렸을 때와 클릭했을 때 예. http://robbi.pe.kr/navi.html -
가상클래스 앵커 대상에 스타일을 적용하는 :target 가상 클래스의 예 http://robbi.pe.kr/navi-ps1.html -
가상요소 - ::after 가상 요소(::after)를 사용해 스타일 적용하는 예 http://robbi.pe.kr/ps-4.html -
선택자 종합 선택자 종합 http://robbi.pe.kr/selector-ex.html -
font-css 폰트 관련 스타일 속성 http://robbi.pe.kr/font-css.html -
font 크기 단위 폰트 사이즈 및 단위 http://robbi.pe.kr/font-size.html -
accent-color 사용자 입력 양식에 accent-color 적용하기 http://robbi.pe.kr/accent-color.html -
background-image background-image 속성 http://robbi.pe.kr/background-image.html -
background-color 색상 표현하기 (background-color 속성) http://robbi.pe.kr/color.html -
background-origin background-origin 속성 http://robbi.dothome.co.kr/source/07-bgorigin.html -
background background 관련 속성 http://robbi.pe.kr/css-color.html -
block-inline 요소 Layout Style - Block and Inline Element http://robbi.pe.kr/layout-style.html -
display Display 속성 - 화면 배치 http://robbi.pe.kr/display.html -
box-model Box-model : content, padding, border, margin http://robbi.pe.kr/box-model.html -
box-shadow box-shadow 속성 http://robbi.pe.kr/box-shadow.html -
border 테두리 관련 속성 (border 속성) http://robbi.pe.kr/border-css.html -
border-radius border-radius를 이용하여 클로버 모양 이미지 만들기 http://robbi.pe.kr/border-radius.html -
box-sizing 박스 너비 기준 정하는 속성 (box-sizing) http://robbi.pe.kr/box-sizing.html -
position 자유롭게 배치하기 (position : static, relative) http://robbi.pe.kr/position.html -
자유롭게 배치하기 (position : absolute, fixed) http://robbi.pe.kr/position-absolute.html -
position 예제1 http://robbi.pe.kr/position-ex.html -
position 예제2 http://robbi.pe.kr/position-ex1.html -
카드 후기 (position 등) http://robbi.pe.kr/card-letter.html -
position 기본 설명용 http://robbi.pe.kr/position-basic.html -
table-css CSS 테이블 스타일 http://robbi.pe.kr/table-style.html -
CSS 테이블 스타일 - 두번째(My Story) http://robbi.pe.kr/mid-exam.html -
opacity / visibility 투명도 - Opacity 속성 / 가시성 - visibility 속성 http://robbi.pe.kr/css-opacity.html -
float float 속성을 적용한 예 - 유동배치 http://robbi.pe.kr/float.html
float 이론 설명 http://robbi.pe.kr/float-01.html
float 을 이용한 나의사진(추천도서) http://robbi.pe.kr/float-picture.html
overflow 콘텐츠를 자를 것인가 말것인가 - overflow 속성을 적용한 예 http://robbi.pe.kr/overflow.html
정렬 CSS 중앙 정렬(수평, 수직)의 모든 것 http://robbi.pe.kr/css-align.html
수평, 중앙, One True 정렬 레이아웃 http://robbi.pe.kr/center.html
변형(transform) translate() 함수를 이용해 웹 요소 이동시키기 http://robbi.dothome.co.kr/source/13-translate.html
scale() 함수를 이용해 확대/축소하기 http://robbi.dothome.co.kr/source/13-scale.html
rotate() 함수를 이용해 2차원에서 회전하기 http://robbi.dothome.co.kr/source/13-rotate.html
rotate3d() 함수를 이용해 3차원에서 회전하기 http://robbi.dothome.co.kr/source/13-rotate3d.html
rotate3d() 함수를 이용해 3차원에서 회전하기 - 두번째 http://robbi.pe.kr/rotate3d.html
skew() 함수를 이용해 지정한 각도만큼 도형 비틀기 http://robbi.dothome.co.kr/source/13-skew.html
transition 트랜지션 샘플 - 스타일 속성이 시간에 따라 바뀌는 것 http://robbi.pe.kr/tr-samples.html
트랜지션 속도 곡선의 속성값 비교 http://robbi.dothome.co.kr/source/13-tr-function.html
[응용] 트랜스폼과 트랜지션을 사용해 만든 버튼 효과 http://robbi.pe.kr/transition-button.html
[응용] 트랜지션을 이용한 상품 목록 화면 http://robbi.pe.kr/transition-product.html
Animation 애니메이션의 지점, 이름, 실행시간 적용하기 http://robbi.pe.kr/ani-1.html
무한반복하는 애니메이션 만들기 http://robbi.pe.kr/ani-2.html
애니메이션 2개를 한꺼번에 지정하기 http://robbi.pe.kr/ani-3.html
메뉴 배경색 서서히 변경하기 http://robbi.pe.kr/sol-1.html
y축을 기준으로 이미지 360도 회전하기 http://robbi.pe.kr/sol-2.html
Filter filter 함수 - 다양한 시각 효과를 추가하는 filter 속성과 함수 http://robbi.pe.kr/filter.html
Grid CSS - Grid http://robbi.pe.kr/grid.html
미디어쿼리 가로, 세로 사이즈에 따른 배경색 변경 http://robbi.pe.kr/mediaquery.html
viewport에 따른 이미지 위치 변경 http://robbi.pe.kr/mediaquery-ex.html mediaquery-ex.css
스마트폰, 태블릿 PC, 데스크톱 구분 http://robbi.pe.kr/media-feature.html -
viewport에 따른 텍스트 위치 및 레이아웃 변경 http://robbi.pe.kr/mediaquery-text.html -
반응형 웹 패턴 반응형 웹 패턴1 : PC-메뉴 왼쪽, Mobile-메뉴 위쪽 http://robbi.pe.kr/pattern1.html -
반응형 웹 패턴2 : PC-메뉴 오른쪽, Mobile-메뉴 위쪽 http://robbi.pe.kr/pattern2.html -
반응형 웹 패턴3 : PC-메뉴 왼쪽, Mobile-메뉴 아래쪽 http://robbi.pe.kr/pattern3.html -
반응형 웹 패턴4 : PC-메뉴 오른쪽, Mobile-메뉴 아래쪽 http://robbi.pe.kr/pattern4.html -

응용 페이지 - Sample

키워드내용주소비고
랜딩페이지 CSS를 이용한 랜딩페이지 (box-shadow, border-radius) http://robbi.pe.kr/css-landing.html 과제
웹 폰트 웹 폰트의 예 - 내가 자주가는 사이트 소개 http://robbi.pe.kr/favorite-site.html 과제
box-model 박스 모델 예제 - 나의 이야기 http://robbi.pe.kr/box-model-ex.html 과제
박스 모델 예제 + Float - Layout 구성 http://robbi.pe.kr/box-model-me.html 과제
float float 속성을 이용한 3단 레이아웃 구성하기 http://robbi.pe.kr/3-layout.html -
float 속성을 이용한 2단 레이아웃 구성하기 http://robbi.pe.kr/2-layout.html -
flex Flex를 이용한 사진 리스트 http://robbi.pe.kr/robbi-flex.html -
profile Profile Card 만들기 http://kimhk.dothome.co.kr/profile-card/member1.html 과제
카드 후기 카드 후기 (position 등) http://robbi.pe.kr/card-letter.html -
ImageNail CSS를 이용한 Image Nail http://robbi.pe.kr/css-imagenail.html 과제
:hover - 가상클래스 :hover 로 버튼만들기 http://robbi.pe.kr/css-button.html -
회원가입 폼 꾸미기 http://robbi.pe.kr/register.html -
:has 가상 클래스를 사용해 메뉴에 스타일 적용하기 http://robbi.pe.kr/pclass.html -
숨어 있는 사진 나오게 하기 http://robbi.pe.kr/robbi-hover.html -
:target - 가상클래스 :target 가상클래스를 활용한 탭 메뉴 http://robbi.pe.kr/tab-menu.html -
지도 삽입 구글 지도, 다음(카카오 맵) 지도 삽입하기 http://robbi.pe.kr/map-insert.html -
gradient 텍스트에 그라데이션 색상 주기 - 그라디언트 텍스트 http://robbi.pe.kr/text-gradient.html -
accordion Details, summary 태그로 만드는 어코디언 http://robbi.pe.kr/accordion.html -

응용 페이지 - JQuery

키워드내용주소비고
carousel bxslider 를 이용한 사진 슬라이드 http://robbi.pe.kr/carousel/exhibition-2022.html -
tubular tubular 를 이용한 동영상 랜딩페이지 http://robbi.pe.kr/tubular/tubular-result.html -
vegas vegas 를 이용한 풀스크린 랜딩페이지 http://robbi.pe.kr/ -