▷ 윤샘컴교실 (^(oo)^) YoonSemComClassroom ◁

[ HTML5 마크업 웹표준 문법 유효성 검사]

+++++++

+++++++

[ 웹표준 HTML & CSS 유효성 검사 통과]

▣ 윤샘 [YoonSemCom] 컴교실 ▣

[일러스트 Pathfinder Panel 사용 아이콘 제작]

패스파인더 패널: Ctrl + Shift + F9

1. 간단하게 하트 아이콘 제작

정원을 그리고, 직접 선택 툴로 정원 하단의 포인트를 우측/아래로 드래그 해서 모양 변경을 하고, 오브젝트를 한번 클릭하여 방향선 모드를 해제한다.

오브젝트 선택 클릭하고, 툴 박스에서 반전 툴(Reflect Tool) 더블 클릭, 대화 상자에서 위 그림과 같이 Veritcal 선택, 하단의 Copy 버튼을 선택한다. 

90도 회전(반전) 복사된 오브젝트를 오른쪽으로 이동 적절하게 배치한다. 하트 완성 됨

위의 왼쪽 그림, 완성된 하트를 그룹화 하고, 선택한 하트 오브젝트

위의 오른쪽 그림, 완성된 하트를 패스파인더 합치기(첫 번째 버튼) 하고, 선택한 하트 오브젝트 (그룹화 한 하트 오브젝트와 비교)

Heart(Pathfinder).ai

+ 또 다른 작업 방법으로 하트 만들기 링크 +

http://edyoon.tistory.com/1000

+++++++

2. 초승달 아이콘 제작(아트보드 배경박스 셋팅 먼저)

(아트보드 크게에 맞게 아이콘 뒷 배경박스 셋팅하기)

Ctrl + N: 새 문서(아트보드) 설정 (300*300 pixel)

도형 툴(사각형) 만들기 대화상자 (300*300 pixel)

면(Fill): 있음 / 선(Stroke): 없음

Shift + F8: Transform Panel (X:0, Y:0 pixel)

(Window / Transform)

Layer 하나 추가하고 이름 바꾸기, 배경박스 레이어 잠금

(F7: Layer Panel)

+++++++

Pathfinder Panel 사용 초승달 아이콘 제작

도형 툴 사용 정원 2개 겹치기(면 있음, 선 없음)

패스파인더 패널 띄우고, 2번째 버튼(앞쪽 지우기) 선택

Ctrl + Shift + F9: Pathfinder Panel

(Window / Pathfinder)

일러스트(초승달만들기)-윤샘컴교실.ai

+++++++

3. 구름 아이콘 제작

도형 툴 사용 정원 여러(5~8)개 만들어서 겹치기

(면 있음, 선 없음)

정원 여러(5~8)개 적절하게 배치, 겹치고서

패스파인더의, 1번째 버튼(합치기) 선택

또 다르게... 정원 여러 5개 적절하게 배치

일러스트(구름아이콘만들기)-윤샘컴교실.ai

+++++++

[일러스트 Pathfinder Panel 사용 태극문양 제작]

+++ 태극문양 제작 - 드로잉 작업 컨셉 +++

타원(도형) 툴, Align & Pathfinder Panel로 작업!!

(선 없음, 원 오브젝트 2개 - 원의 크기: 200px / 100px)

Stroke: None // 타원 도형 툴 선택... 아트보드 클릭!!

Align Panel: Shift + F7 // Align To: Align to Selection

2개의 원 오브젝트 동시에 선택하고, 왼쪽/위아래 가운데 정렬

작은원 복사(Alt + 드레그) 후, 왼쪽 큰원+작은원 그룹 (Ctrl + G)

3개의 원 정렬 작업 완료 후, 패스파인더 패널의 5번 메뉴...

Divide(모두 나누기) 선택 // 그룹 해제(Ctrl + Shift + G)

모두 나누고... 오브젝트 임시 확인!! // 여러번 되돌리기 (Ctrl + Z)

왼쪽 상단 2개 오브젝트 선택하고 패스파인더 1번 메뉴 선택

Unite (선택한 오브젝트 하나의 오브젝트로 결합 됨)

결합된 태극문양 모두 선택하고, 정비율 축소 작업!!

Object / Path / Offset Path / -10px 입력하고, Copy

(반복작업... 응용 베리에이션 작업...)

+++++++

Scale Tool하고 오브젝트 축소 작업 결과 다름

(오브젝트 선택 후, 키보드 S // Alt + 클릭...)

일러스트(태극문양)_윤샘컴교실.ai

4. 풀잎 아이콘 제

[태극 문양 베리에이션(Variation) 작업 산출물]

▣ 윤샘 edyoon.tistory.com 컴교실 ▣

[연습문제01]

그동안 학습한 내용을 기억을 되살리고 복습, 반복/숙달/숙지를 위한 시간 입니다. (스스로 연습문제와 실습과제를 풀어 보세요!!)

문제1.

HTML5 에서 없어진 사용하지 않는 태그 명령어는?

①head      ②meta      ③font      ④h1

문제3.

웹브라우저의 제목 표시줄에 나타나는, 웹 문서의 제목에 해당하는 태그 명령어 요소는?

<                   ?>(^(oo)^) 윤샘 컴교실</                   ?>

문제4.

<meta> 태그에 모든 언어 문자와 특수 문자를 표현하기 위해서 다국어 환경에 적합한 문자 조합(character set)을 지정 합니다. 아래의 content 속성 값을 완성 하세요?

<!-- XHTML 1.0 -->

<meta http-equiv="Content-Type"

         content="text/html;charset=                    " />

문제5.

키보드의 줄 바꿈(Enter) 기능을 하는 태그 요소는?

문제7.

HTML 또는 XHTML 코딩한 소스 설명에 대한 주석 형식에 맞게 양쪽 끝을 완성 하세요?

             HTML & XHTML 소스 설명 주석 달기             

©

문제9.

HTML에서 공백을 여러개 추가하기 위한...

Entity Number(Code)은?

<p>윤샘컴교실<strong>HTML 기본문법</p>학습하기</strong>

+++++++

+ 외부 평가위원 방문, 이수자 현장 평가 실시+

(실습 문제1.)

일러스트 또는 포토샵에서 본인이 만든 웹 UI 아이콘을 추후 포트폴리오 제작에 사용할 수 있도록 완성도 높은 것 10개 이상 선별해서 개별 저장하고, 다른 아이콘 자료도 맘에 드는 것 10개 이상 선별하여 개별 저장 하세요...

제시 조건1: 아이콘 1개당, 파일 형식 3개 저장 (ai, gif, png)

제시 조건2: 아이콘은 일반적인 웹 사이트 사용 크기로 작게...

제시 조건3: 완성 이미지 파일 gif, png (배경 불투명/투명)

제시 조건4: 파일 저장명 --> 본인이름_01_영문명.확장자

(영문 파일명은 의미 있고, 알기 쉽게 정하기 - 네이버 사전 참고)

(실습 문제2.)

일러스트 또는 포토샵에서 본인이 제작 완성한 웹 UI 아이콘을 활용해서 아래의 제시된 7개 사이트를 각각 아이콘 이미지를 매개체로 하이퍼 링크를 구현해 보세요!!

제시 조건1: 메모장 실행해서 하드코딩으로 마크업 작업

제시 조건2: gif 3개, png 4개 (배경 불투명 3개/투명 4개)

제시 조건3: 파일 저장명 --> 본인이름_html_HyperLink.html

제시 조건4: 아래의 제시된 사이트로 7개 하이퍼 링크 구현

(다음, 네이버, 줌, 구글, 유튜브, G마켓, 윤샘컴교실)

(실습 문제3.)

실습 문제 3번에서 웹 아이콘 하이퍼링크 UI구현한 마크업 소스를 5대? 웹브라우저 에서 Cross Browsing Test!! 웹브라우저 간의 콘텐츠 표현 호환성 부분을 확인해 보고, 현재 시점으로 각각의 웹브라우저 버전?을 확인해 보기

(^(oo)^) 수고하셨습니다 !!

서ㄹ하 윤샘

▣ 윤샘 [http://edyoon.tistory.com] 컴교실 ▣

[일러스트레이터 Pathfinder Panel 다루기]

+++ 오브젝트: 선(Stroke) - X  //  면(Fill) - O +++

( 참고: Stroke 보조패널 단축키: ctrl + F10 )

ctrl + shift + F9

( Align Panel: shift + F7 )

!! 아이콘을 제작 할때 패스파인더를 사용하면 편리합니다. !!

+ 총 10가지의 버튼(기능)을 순서대로 확인해 보겠습니다. +

1. 왼쪽 상단 첫 번째 버튼(합치기): 선택한 2개의 오브젝트를 하나로 합칩

2. 왼쪽 상단 두 번째 버튼(앞쪽 지우기): 맨 앞에 있는 오브젝트를 영역을 지움

3. (겹친 부분 남기기): 선택한 개체 중 겹쳐진 부분만 남김

4. (겹친 부분 지우기): 선택한 개체 중 겹쳐진 부분만 삭제

+++++++

+ 5번 ~ 10번 예제 시작(패스파인더 2번째 줄 버튼) +

5. 왼쪽 하단 첫 번째 버튼(나누기): 겹쳐지는 영역이 모두 나눠짐

         (오브젝트 나누기 버튼, 적용 시키고 그룹해제 후 확인)

6. (자르기): 2개의 오브젝트 겹쳐져서 가려진 부분이 지워짐

7.

(병합하기): 3개의 개체 색이 같으면 합치고, 다르면 나눠짐

8. (앞쪽 기준으로 나누기): 겹쳐진 부분과 맨 앞쪽 개체 패스 선만 남김

9. (외곽선): 오브젝트(개체)가 겹쳐진 상태를 패스 선으로 남김

10. (뒤쪽 지우기): 뒤에 있는 개체의 영역을 지우고, 맨 앞 영역만 남김

패스파인더 패널(Pathfinder Panel) 단축키는?

(도형 툴로 사각형 개체를 만들어 놓고 연습해 봅니다.)

+++++++
!! 패스파인더 기능 복습 간단한 실습과제 !!

(위의 5번 작업 참고 하세요)

PathfinderEx-YoonSemComClass

패스파인더로 육각형 도형을 여러개로 각각 나누기...

위의 육각형 오브젝트 제작 참고 링크

http://edyoon.tistory.com/998

+++++++

일러스트의 패스파인더(Pathfinder) 기능은 오브젝트가 선(Stroke)으로만 되어 있으면 작업이 불가능하다. 오브젝트의 선 속성을 면으로 변경해 패스파인더 작업을 하면 가능하다.

(아래 그림의 메뉴 선택... 참고!!)

오브젝트의 선 속성을 면으로 변경 하고...

Object / Path / Outline Stroke

패스파인더의 Divide(모두 분할)!!

(그룹 해제 하고, 분할 오브젝트 불필요한 것 삭제)

▣ (^(oo)^) edyoon.tistory.com ▣