바로가기

모두를 위한 열린 강좌 KOCW

주메뉴

강의사진
  • 주제분류
    예술ㆍ체육 >디자인 >커뮤니케이션디자인학
  • 강의학기
    2023년 2학기
  • 조회수
    3,021
  •  
강의계획서
강의계획서
본 강좌는 HTML, CSS를 활용하여 웹사이트를 구현해 내는 것을 목표로 한다.
1-1. 에디터 설치와 사용
배속
  • 이전차시
  • 다음차시

차시별 강의

PDF VIDEO SWF AUDIO DOC AX
1. 비디오 1-1. 에디터 설치와 사용 •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, URL
비디오 1-2. HTML 태그 기초 •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, URL
비디오 1-3. CSS 기본 문법 •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, URL
비디오 1-4. Anchor태그, <a> •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, URL
비디오 1-5. Image 태그 <img> •에디터 설치와 사용 •HTML 태그 기초 •주요 HTML 태그들 •CSS 기본 문법 •Anchor 태그, •이미지 태그, URL
2. 비디오 2-1. 클래스(class), 아이디(id) •클래스 (class) •아이디 (id) •
태그 •CSS 적용하는 방식들
URL
비디오 2-2. <div> 태그 •클래스 (class) •아이디 (id) •
태그 •CSS 적용하는 방식들
URL
비디오 2-3. CSS 적용하는 방식들 •클래스 (class) •아이디 (id) •
태그 •CSS 적용하는 방식들
URL
비디오 2-4. 코멘트 달기(주석 처리하기) •클래스 (class) •아이디 (id) •
태그 •CSS 적용하는 방식들
URL
비디오 2-5. 크롬 개발자 도구 •클래스 (class) •아이디 (id) •
태그 •CSS 적용하는 방식들
URL
3. 비디오 3-1. 텍스트 색상, 텍스트 굵기 •코멘트 달기 •크롬 개발자 도구 •텍스트 스타일링 •폰트 설정 • 태그 URL
비디오 3-2. 텍스트 정렬 •코멘트 달기 •크롬 개발자 도구 •텍스트 스타일링 •폰트 설정 • 태그 URL
비디오 3-3. 폰트 설정, <span>태그 •코멘트 달기 •크롬 개발자 도구 •텍스트 스타일링 •폰트 설정 • 태그 URL
4. 비디오 4-1. 중간 점검 프로젝트 - Figma, 이미지 찾아넣기 프로젝트 실습 URL
5. 비디오 5-1. Box Model 개념 소개, Margin/Padding의 차이 •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 URL
비디오 5-2. Margin/Padding 설정, Overflow, Border •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 URL
비디오 5-3. box-sizing •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 URL
비디오 5-4. 배경 이미지 넣기 •Box Model 개념 소개 •Margin, Padding의 차이 •Margin, Padding 설정 •Overflow•Border •박스 꾸미는 몇가지 방법들 •Box-sizing •배경 이미지 넣기 URL
6. 비디오 6-1. 선택자 (1) •선택자 •스타일 상속 •명시도 URL
비디오 6-2. 선택자 (2) •선택자 •스타일 상속 •명시도 URL
비디오 6-3. 스타일 상속, 명시도 •선택자 •스타일 상속 •명시도 URL
7. 비디오 7-1. Display속성, inline-block 특징 •Display 속성 •inline-block 특징 •다양한 링크의 모습 •수평 방향 가운데 정렬 URL
비디오 7-2. 다양한 링크의 모습 •Display 속성 •inline-block 특징 •다양한 링크의 모습 •수평 방향 가운데 정렬 URL
비디오 7-3. 수평 방향 가운데 정렬 •Display 속성 •inline-block 특징 •다양한 링크의 모습 •수평 방향 가운데 정렬 URL
8. 비디오 8-1. Flexbox container (1) •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items URL
비디오 8-2. Flexbox container (2) •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items URL
비디오 8-3. justify-content •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items URL
비디오 8-4. align-items •Flexbox 이해 •Flexbox container 설정 •justify-content •align-items URL
9. 비디오 9-1. Flex 아이템 설정 •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis URL
비디오 9-2. Flex-grow •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis URL
비디오 9-3 Flex-shrink •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis URL
비디오 9-4. Flex 실습 •Flex 아이템 설정 •flex-grow •flex-shrink •flex-basis URL
10. 비디오 10-1. 미디어 쿼리 활용 •반응형 웹 •미디어 쿼리 활용 URL
비디오 10-2. 실습 •반응형 웹 •미디어 쿼리 활용 URL
11. 비디오 11-1. position 종류, position:relative •Position 종류 •position: relative •position: fixed •position: absolute URL
비디오 11-2. position: fixed •Position 종류 •position: relative •position: fixed •position: absolute URL
비디오 11-3. position: absolute •Position 종류 •position: relative •position: fixed •position: absolute URL
12. 비디오 12-1. 웹사이트 기획 •웹사이트 기획 •웹사이트 디자인 •Netlify로 내보내기 •웹사이트 평가하기 URL
비디오 12-2. 웹사이트 디자인 •웹사이트 기획 •웹사이트 디자인 •Netlify로 내보내기 •웹사이트 평가하기 URL
비디오 12-3. 웹사이트런칭 - Netlify로 내보내기 •웹사이트 기획 •웹사이트 디자인 •Netlify로 내보내기 •웹사이트 평가하기 URL

연관 자료

loading..

사용자 의견

강의 평가를 위해서는 로그인 해주세요.

이용방법

  • 동영상 유형 강의 이용시 필요한 프로그램 [바로가기]
    문서 자료 이용시 필요한 프로그램 [바로가기]


    ※ 강의별로 교수님의 사정에 따라 전체 차시 중 일부 차시만 공개되는 경우가 있으니 양해 부탁드립니다.

이용조건