| 학교 / 학과 | 이름 | 주소 |
|---|---|---|
| 전북대학교 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 종류 (내부, 외부, 인라인 스타일방식) | 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 | - |
| em, rem, vw, vh, vmin, vmax | em, rem, vw, vh, vmin, vmax | http://robbi.pe.kr/emrem.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 |
| 키워드 | 내용 | 주소 | 비고 |
|---|---|---|---|
| em, rem, vw, vh, vmin, vmax | em, rem, vw, vh, vmin, vmax | http://robbi.pe.kr/emrem.html | - |
| 가변 레이아웃 (%) | 가변 레이아웃 - % | http://robbi.pe.kr/var-layout.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/mq.html | - | |
| 예. viewport에 따른 텍스트 위치 및 레이아웃 변경 | http://robbi.pe.kr/mq-ex.html | - | |
| 가변 이미지 | 가변 이미지 | http://robbi.pe.kr/var-image.html | - |
| 가변 동영상 | 가변 동영상 | http://robbi.pe.kr/var-video.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 | - | |
| 반응형 - 헤더 | 반응형 - 헤더 | http://robbi.pe.kr/response-header.html | - |
| 키워드 | 내용 | 주소 | 비고 |
|---|---|---|---|
| 랜딩페이지 | 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 | - |
| 키워드 | 내용 | 주소 | 비고 |
|---|---|---|---|
| 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/ | - |