웹퍼블리싱 기초

한국공학대학교
이문환

페이스북 트위터 카카오톡 네이버밴드 링크복사

주제분류

예술ㆍ체육 >디자인 >커뮤니케이션디자인학
강의학기

2023년 2학기

조회수

759

강의계획서

본 강좌는 HTML, CSS를 활용하여 웹사이트를 구현해 내는 것을 목표로 한다.

수강안내 및 수강신청
※ 수강확인증 발급을 위해서는 수강신청이 필요합니다

1-1. 에디터 설치와 사용

차시별 강의

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