로그인 바로가기
하위 메뉴 바로가기
본문 바로가기
검색
로그인 / 회원가입
난이도
심화
웹 UI 개발
[콘텐츠 설계] 조영광
공유하기
URL복사
밴드
페이스북
트위터
웹 UI 개발
웹 UI 개발
http://www.boostcourse.org/web344/lecture/37479
좋아요
3538
수강생
13768
전체 메뉴 열기
하위 메뉴
공지게시판
수강생 토론 게시판
오리엔테이션
강좌 전체목록보기
오리엔테이션
01. 웹 UI 개발 코스란?
02. 웹 UI 개발자 이야기
03. 부스트코스 학습 가이드
04. 시작합니다!
1. HTML&CSS 기초
강좌 전체목록보기
0. Hello
HTML & CSS 기초 소개
1. HTML 이해하기
1) HTML 소개
Q1. HTML 퀴즈
2) HTML 문법 - 태그 - 1
2) HTML 문법 - 태그 - 2
Q2. HTML 문법 -태그 퀴즈
3) HTML 문법 - 속성
Q3. HTML 문법 - 속성 퀴즈
4) HTML 문법 - 태그 중첩
Q4. HTML 문법 - 태그 중첩 퀴즈
5) HTML 문법 - 빈 태그
Q5. HTML 문법 - 빈 태그 퀴즈
6) HTML 문법 - 공백
7) HTML 문법 - 주석
Q6. HTML 문법 - 주석 퀴즈
8) 문서의 기본 구조
Q7. 문서의 기본 구조 퀴즈
2. HTML 태그
1) HTML 태그 소개
2) 제목과 단락요소
Q1. 제목과 단락요소 퀴즈
3) 텍스트를 꾸며주는 요소
Q2. 텍스트를 꾸며주는 요소 퀴즈
4) 앵커 요소
Q3. 앵커 요소 퀴즈
5) 의미가 없는 컨테이너 요소
Q4. 의미가 없는 컨테이너 요소 퀴즈
6) 리스트 요소
Q5. 리스트 요소 퀴즈
7) 이미지 요소
Q6. 이미지 요소 퀴즈
8) 테이블 요소 1
Q7. 테이블 요소 1 퀴즈
9) 테이블 요소 2
10) 폼 요소 1
Q8. 폼 요소 1 퀴즈
11) 폼 요소 2
Q9. 폼 요소 2 퀴즈
12) 폼 요소 3
Q10. 폼 요소 3 퀴즈
13) 폼 요소 4
Q11. 폼 요소 4 퀴즈
3. 콘텐츠모델, 시멘틱마크업, 블록 & 인라인
1) 콘텐츠 모델
2) 시멘틱 마크업
Q1. 시멘틱 마크업 퀴즈
3) HTML5 시멘틱 요소
4) 블록&인라인
Q2. 블록&인라인 퀴즈
4.CSS 이해하기
1) CSS 소개
2) CSS 문법과 적용
Q1. CSS 문법과 적용 퀴즈
3) 선택자 1
Q2. 선택자 1 퀴즈
4) 선택자 2
Q3. 선택자 2 퀴즈
5) 선택자 3
Q4. 선택자 3 퀴즈
6) 문서 구조 관련 선택자
Q5. 문서 구조 관련 선택자 퀴즈
7) 가상 선택자 1
Q6. 가상 선택자 1 퀴즈
8) 가상 선택자 2
Q7. 가상 선택자 2 퀴즈
9) 구체성
Q8. 구체성 퀴즈
10) 상속
Q9. 상속 퀴즈
11) 캐스케이딩
Q10. 캐스케이딩 퀴즈
12) 선택자 정리
5.단위, 배경, 박스모델
1) 속성-정의와구문
2) 속성-단위
3) 속성-색상
Q1. 속성-색상 퀴즈
4) 속성-background
Q2. 속성-background 퀴즈
5) 속성-boxmodel
Q3. 속성-boxmodel 퀴즈
6) 속성-border
Q4. 속성-border 퀴즈
7) 속성-padding
Q5. 속성-padding 퀴즈
8) 속성-margin
Q6. 속성-margin 퀴즈
9) 속성-margin&padding
Q7. 속성-margin&padding 퀴즈
10) 속성-width
Q8. 속성-width 퀴즈
11) 속성-height
Q9. 속성-height 퀴즈
12) 속성-boxmodel정리
6.폰트, 텍스트
1) 속성-typography
2) 속성-font-family
Q1. 속성-font-family 퀴즈
3) 속성-line-height
Q2. 속성-line-height 퀴즈
4) 속성-font-size
Q3. 속성-font-size 퀴즈
5) 속성-font-weight
Q4.속성-font-weight 퀴즈
6) 속성-font-style
7) 속성-font-variant
8) 속성-font
Q5. 속성-font 퀴즈
9) 속성-webfont
Q6. 속성-webfont 퀴즈
10) 속성-vertical-align
Q7. 속성-vertical-align 퀴즈
11) 속성-text-align
12) 속성-text-indent
Q8. 속성-text-indent 퀴즈
13) 속성-text-decoration
Q9. 속성-text-decoration 퀴즈
14) 속성-단어 관련 속성
Q10. 속성-단어 관련 속성 퀴즈
7. 레이아웃
1) 속성-display
Q1. 속성-display 퀴즈
2) 속성-visibility
Q2. 속성-visibility 퀴즈
3) 속성-float
Q3. 속성-float 퀴즈
4) 속성-clear
Q4. 속성-clear 퀴즈
5) 속성-position
Q5. 속성-position 퀴즈
6) 속성-z-index
Q6. 속성-z-index 퀴즈
7) HTML/CSS 유효성 검사
8. 미디어쿼리
1) 미디어쿼리 소개
2) 미디어 타입 & 미디어 특성
Q1. 미디어 타입 & 미디어 특성 퀴즈
3) Syntax -1
3) Syntax-2
4) 실습 -1
4) 실습-2
4) 실습-3
추가. Viewport의 이해
프로젝트A-1
강좌 전체목록보기
웹 UI 개발
[프로젝트 A-1] 포트폴리오 웹페이지 - 레이아웃 만들기
프로젝트A-2
강좌 전체목록보기
웹 UI 개발
[프로젝트 A-2] 포트폴리오 웹페이지 - 구성 요소 만들기
2. 웹 접근성의 이해
강좌 전체목록보기
0. Hello
웹 접근성의 이해 소개
1. 웹 접근성의 이해
1) 웹 접근성이란
2) 장애 환경
2. 웹 접근성 지침
0) 웹 접근성 지침 소개
1) 적절한 대체 텍스트 제공
Q1. 적절한 대체 텍스트 제공 퀴즈
2) 자막 제공
3) 색에 무관한 콘텐츠 인식
Q2. 색에 무관한 콘텐츠 인식 퀴즈
4) 명확한 지시 사항 제공
5) 텍스트 콘텐츠의 명도 대비
Q3. 텍스트 콘텐츠의 명도 대비 퀴즈
6) 자동 재생 금지
7) 콘텐츠 간의 구분
8) 키보드 사용 보장
9) 초점 이동
Q4. 초점 이동 퀴즈
10) 조작 가능
Q5. 조작 가능 퀴즈
11) 응답 시간 조절
12) 정지 기능 제공
13) 깜빡임과 번쩍임 사용 제한
14) 반복 영역 건너뛰기
Q6. 반복 영역 건너뛰기 퀴즈
15) 제목 제공
Q7. 제목 제공 퀴즈
16) 적절한 링크 텍스트
Q8. 적절한 링크 텍스트 퀴즈
17) 기본 언어 표시
18) 사용자 요구에 따른 실행
19) 콘텐츠의 선형 구조
20) 표의 구성
21) 레이블 제공
22) 오류 정정
23) 마크업 오류 방지
Q9. 마크업 오류 방지 퀴즈
24) 웹 애플리케이션 접근성 준수
3. 웹 접근성 진단 도구
1) 웹 접근성 진단 도구
4. 스크린리더
1) 스크린리더
2) Window 스크린리더 사용법
3) Mac 스크린리더 사용법
4) Android 스크린리더 사용법
5) iOS 스크린리더 사용법
3. HTML&CSS 활용
강좌 전체목록보기
0. Hello
HTML & CSS 활용 소개
1. CSS 리셋
1) CSS 리셋 소개
2) reset.css 제작 - 1
2) reset.css제작 - 2
3) CSS 리셋 요약 정리
Q1. CSS 리셋 퀴즈
2. IR 기법
1) IR 기법 소개
Q1. IR 기법 소개 퀴즈
2) 요소 숨김 처리
Q2. 요소 숨김 처리 퀴즈
3) 프로모션 페이지 제작-1
3) 프로모션 페이지 제작-2
4) IR 기법 요약 정리
Q3. IR 기법 퀴즈
3. float 해제
float 해제
Q1. float 해제 퀴즈
4. 레이아웃
1) 레이아웃 소개
2) 1단 레이아웃 제작-1
2) 1단 레이아웃 제작-2
Q1. 1단 레이아웃 퀴즈
3) 다단 레이아웃 제작-1
3) 다단 레이아웃 제작-2
Q2. 다단 레이아웃 제작 퀴즈
4) 고정 레이아웃 제작-1
4) 고정 레이아웃 제작-2
Q3. 고정 레이아웃 제작 퀴즈
5. 메뉴
1) 메뉴 소개
2) 1단 메뉴 제작-1
2) 1단 메뉴 제작-2
Q1. 1단 메뉴 퀴즈
3) 2단 메뉴 제작-1
3) 2단 메뉴 제작-2
Q2. 2단 메뉴 퀴즈
6. 탭
1) 탭 소개
2) 탭 제작-1
2) 탭 제작-2
Q1. 탭 퀴즈
7. 이미지 목록
1) 이미지 목록 소개
2) 이미지 목록 제작-1
2) 이미지 목록 제작-2
2) 이미지 목록 제작-3
2) 이미지 목록 제작-4
Q1. 이미지 목록 퀴즈
3) 이미지 목록 추가 기능 제작-1
3) 이미지 목록 추가 기능 제작-2
3) 이미지 목록 추가 기능 제작-3
3) 이미지 목록 추가 기능 제작-4
Q2. 이미지 목록 추가 기능 퀴즈
8. 표
1) 표 소개
Q1. 표 소개 퀴즈
2) 표의 접근성
Q2. 표의 접근성 퀴즈
3) 표와 Position 속성
Q3. 표와 Position 속성 퀴즈
4) 표의 Border 속성
Q4. 표의 Border 속성 퀴즈
5) 통계표 제작-1
5) 통계표 제작-2
6) 달력 제작-1
6) 달력 제작-2
7) 표 요약 정리
9. 레이어팝업
1) 팝업 소개
Q1. 팝업 소개 퀴즈
2) 레이어팝업 + 딤드 배경 제작 -1
2) 레이어팝업 + 딤드 배경 제작-2
3) 레이어팝업 중앙정렬-1
3) 레이어팝업 중앙정렬-2
3) 레이어팝업 중앙정렬-3
Q2. 레이어 팝업 실습 퀴즈
10. 폼
1) 폼 소개
2) 폼 커스텀 - 텍스트 박스
Q1. 폼 커스텀 - 텍스트 박스 퀴즈
3) 폼 커스텀 - 체크박스, 라디오
Q2. 폼 커스텀 - 체크박스, 라디오 퀴즈
4) 폼 커스텀 - 파일찾기
Q3. 폼 커스텀 - 파일찾기 퀴즈
5) 폼 커스텀 - SELECT 메뉴
Q4. 폼 커스텀 - SELECT 메뉴 퀴즈
11. 반응형 웹
1) 반응형 웹 소개
Q1. 반응형 웹 소개 퀴즈
2) 반응형 웹 - 제작 가이드
3) 반응형 웹 - PC용(기본) 제작
Q2. 반응형 웹 - PC용(기본) 제작 퀴즈
4) 반응형 웹 - TABLET 제작
Q3. 반응형 웹 - TABLET 제작 퀴즈
5) 반응형 웹 - MOBILE 제작
Q4. 반응형 웹 - MOBILE 제작 퀴즈
프로젝트B
강좌 전체목록보기
웹 UI 개발
[프로젝트 B] 푸드위드 - 프로모션 웹페이지 만들기
프로젝트C
강좌 전체목록보기
웹 UI 개발
[프로젝트 C] 푸드위드 - 반응형 웹페이지 만들기
[코칭스터디] 현직자 라이브 강의
강좌 전체목록보기
코칭스터디 - Round 1
2021.01.16 실시간 방송 다시보기
코칭스터디 - Round 2
2021.03.13 실시간 방송 다시보기
참고학습. Git 기초
강좌 전체목록보기
Git Basic
1. git 소개
2. git 설치
3. git 기초
Q1. git 기초 - 명령어 퀴즈
4. 커밋(commit)
Q2. 커밋 - 설명 퀴즈
5. 파일 핸들링
6. 브랜치(branch)
Q3. 브랜치 - 설명 퀴즈
Q4. 브랜치 - 명령어 퀴즈
7. 스태시(stash)
Q5. 스태시 - 설명 퀴즈
Q6. 스태시 - 명령어 퀴즈
8. 병합(merge)
Q7. 병합 - 설명 퀴즈
9. 히스토리(history) 수정하기
Q8. 히스토리 수정하기 - 설명 퀴즈
Q9. 히스토리 수정하기 - 명령어 퀴즈
10. 리플로그(reflog)
Q10. 리플로그 - 설명 퀴즈
11. 원격(remote) 저장소
Q11. 원격 저장소 - 명령어 퀴즈
참고 자료
참고학습. TaskRunner
강좌 전체목록보기
TaskRunner
TaskRunner
참고학습. Sass 기초
강좌 전체목록보기
Sass 기초
Sass 기초
참고학습. CSS애니메이션
강좌 전체목록보기
CSS애니메이션
애니메이션 이해
Transition 소개
Animation 소개
코스를 마치며
강좌 전체목록보기
코스를 마치며
코스를 마치며
2) 반응형 웹 - 제작 가이드
#미디어쿼리
#반응형웹가이드
공유하기
URL복사
밴드
페이스북
트위터
2) 반응형 웹 - 제작 가이드 - 양동현
2) 반응형 웹 - 제작 가이드 - 양동현
좋아요 9
댓글
연관 토론
comment
최신순
등록순
추천순
나의 글만 보기
OFF
페이지 이동
First
Prev
Next
Last
페이지 이동
First
이전
다음
Last
수강완료
수강이 완료되었습니다.
닫기
수강이 완료되었습니다.
이제
다음 강의
를 확인하세요.
닫기
닫기
Q1. 반응형 웹 소개 퀴즈
3) 반응형 웹 - PC용(기본) 제작
[콘텐츠 설계] 조영광
comment