nahyun_www의 등록된 링크

키자드에 등록된 총 101개의 포스트를 확인하실 수 있습니다.

Naver Blog

[포토샵 1.] 파일 만들기 / 초기 설정하기

포토샵이란 ? 이미지 편집 소프트웨어로, 이미지 편집, 이미지 합성, 페인팅, 드로잉, 리터칭, 사진 보정, 텍스트 디자인, 필터효과, 목업 등 활용할 수 있다. 포토샵 이미지 파일 형식 PSD 포토샵 파일, 레이어, 채널, 패스, 텍스트 등 편집한 그대로 저장 수정이 필요한 작업물은 반드시 PSD로 저장, 어도비 프로그램 군과 호환 가능 JPEG(JPG) 넓은 범위의 색 지원, 파일크기가 작아 웹에서 널리 쓰임, 압축률이 높아 이미지 품질이 떨어짐 GIF 256 색상 표현, 여러장의 이미지를 하나의 파일에 담을 수 있음 (움짤) PNG JPEG와 GIF 장점을 합함 (투명도 필요한 경우 PNG) 색의 3속성 / 색상모드 색의 3속성 - 색상 [hue] : 색을 구별하는 특성 - 채도 [saturation] : 색이 맑고 탁함 정도 (순색/무채색) - 명도 [lightness] : 색이 밝고 어두운 정도 (흰색/검정색) 색상모드 [RGB / CMYK] RGB - Red,

원문보기 내부링크
Naver Blog

[포토샵 2.] 이미지 불러오기, 크기변경, 자르기, 자동채우기

이미지 불러오기 / 크기 변경 / 자르기 / 자동 채우기 첨부파일 예제01.jpg 파일 다운로드 이미지 불러오기 - ctrl + o - [file] -[open] - 포토샵 작업영역으로 파일 드래그하기 이미지 사이즈 변경하기 - ctrl + alt + i - [image] - [image size] * 단위 pixels 인지 mm 인지 확인 * 작게 줄인 이미지를 다시 키우게 되면 깨지니 주의 !!! 첨부파일 실습01.jpg 파일 다운로드 자르기 - crop Tool [자르기도구] - perspective crop Tool [원근자르기도구] - delete cropped pixels [자른픽셀 삭제] - content-aware [내용인식 채우기] 자동 채우기 -채울 영역 걸쳐서(겹쳐서) 드래그 후 [edit]-[content-aware fill]

원문보기 내부링크
Naver Blog

[포토샵 3.] 레이어 활용하기, 이동도구

레이어란 ? 이미지, 텍스트 등으로 구성된 "층" "층"이 쌓여서 하나의 이미지를 구성 (각 요소를 개별적으로 조정하거나 편집) 레이어 종류 일반 레이어 • 투명한 배경에 이미지가 포함된 기본. • 수정과 이동이 가장 자유로움 배경 레이어 • 이미지 파일의 배경 • 가장 아래층에 위치함 • 기본적으로 잠겨 있어 이동 불가능, 이름도 바꿀 수 없음 (일반으로 변경시 이동 및 이름수정, 작업 가능) 문자 레이어 • 문자도구(T)로 글자 입력하면 만들어짐 • 글자 입력 후 글꼴, 색상, 내용 수정 가능 • 부분 보정이나 일부 효과는 적용 불가능 (글자를 일반으로 변환 후 가능) 스마트 오브젝트 레이어 • 벡터 기반 데이터 • 왜곡, 뒤틀기, 확대 같은 기능으로 변형해도 화질 저하가 적음 조정 레이어 • 톤, 밝기, 채도, 칠 같은 보정 내용을 저장. • 보정값은 조정 레이어보다 낮은층에 위치한 레이어에 적용되며 원본 손상 X 모양 레이어 • 도형으로 그려진 shape 형태 객체 (확대해도

원문보기 내부링크
Naver Blog

[포토샵 4.] 아트보드 활용하기(생성, 추가, 복제, 저장)

아트보드란? 여러 페이지나 화면을 동시에 작업할 수 있도록 도와주는 기능 아트보드 활용하기 생성 / 추가 / 복제 / 저장 아트보드는 도화지라고 생각하면 되는데, 하나의 작업만 하는 단일문서의 경우에는 아트보드 생성할 필요가 없음 (하나의 파일에 여러가지 작업물을 만드는 경우에 사용!) 아트보드 생성하는 첫번째 방법 ) - 처음 생성할 때 새로만들기(ctrl+ n) - 아트보드(artboards) 체크하기 아트보드 생성하는 두번째 방법 ) - 작업중 생성할 때 아트보드로 만들고 싶은 레이어 선택 후 오른쪽 마우스 → artboard from layers 클릭 → ok 아트보드 추가하는 법 ) artboard 1 글자부분 클릭하면 + 모양 클릭해주기 아트보드 복사하는 첫번째 방법 ) artboard 영역 아무곳이나 클릭 후 ctrl + j 또는 alt + 드래그 레이어 창에서 artboard 드래그해서 + 버튼(새 레이어) 으로 드래그 아트보드 복사하는 두번째 방법 ) 레이어

원문보기 내부링크
Naver Blog

[github] gitbash 등록된 계정 변경 방법(삭제)

다른 사람의 계정이 컴퓨터에 남아 있다면 ??? github에서 만든 사이트를 올리기 위해서 따라했지만 "다른 사용자의 계정" 이 남아있어서 오류로 인해 사이트를 올리지 못하고 있다면..! 다른 사용자 계정 삭제하기 1. 우선, [제어판] - [사용자 계정] 으로 들어간다. 2. 사용자 계정에 [자격 증명 관리] 를 들어간다. 3. [windows 자격 증명] 을 눌러주면 아래에 증명 내용들이 나오는데, 4. github 내용이 들어있는 증명 부분을 눌러서 [제거] 시켜주면 끝 ! 다시 시도하기 삭제까지 완료했다면 다시 아래 글을 보고 시도해보면 된다 ! [공유] GITHUB로 홈페이지 한 번에 등록하기 github 업로드가 어려우신 분들은 처음부터 차근차근 따라해보세요 <git> 소스코드 인터넷 연결... blog.naver.com

원문보기 내부링크
Naver Blog

[포토샵 5.] 레이어 블렌딩모드 효과주기

블렌딩모드 (blending mode) 위쪽레이어를 아래쪽 레이어와 혼합하여 섞여 보이게 하는 효과 독특한 방식으로 색상과 밝기, 대비 등을 조정하여 다양한 효과를 줌 레이어간 합성하기 위해 사용되는 기능 블렌딩모드 사용하는 방법 (blending mode usage) 1. 블렌딩모드 적용할 레이어 선택 2. 레이어 패널에서 normal 드롭다운 메뉴에서 효과 선택 3. 블렌딩 모드 선택창 옆 쪽 opacity(투명도)와 함께 조절하여 섬세한 조절 ex. - 배경과 텍스트가 있는 경우: 텍스트 선택하고 블렌딩 모드를 Overlay로 변경시 텍스트가 배경과 자연스럽게 섞이는 효과 - 사진에 조명을 더하는 경우: 빛이나 광원 효과 레이어 만들고 블렌딩 모드를 Screen으로 설정시 어두운 부분은 투명해지고 밝은 부분만 남아 조명이 비추는 듯한 효과 블렌딩모드 옵션 정리 (blending mode option) Normal (일반) 기본 설정 (색상이 혼합되지 않고 그대로 보임) Di

원문보기 내부링크
Naver Blog

[포토샵 6.] 선택영역 / 올가미 / 선택도구 / 변형

선택영역 사각형, 원형 모양을 선택할 때 사용 (드래그 해서 사용) 사각형 선택도구 (Rectangular Marquee Tool) - 사각형 형태 원형 선택 도구 (Elliptical Marquee Tool) - 원이나 타원 형태 shift 기능 - 정비율 (정사각형 , 정원) - 수직으로 이동할 때 - 더하기(+) alt 기능 - 중심점 - 복제 - 빼기 (-) 선택영역 해제 ctrl + D 반전선택 ctrl + shift + I 또는 [select] - [inverse] 첨부파일 예제07.jpg 파일 다운로드 올가미도구 자유롭게 원하는 모양의 영역을 드래그 (이미지의 복잡한 부분을 누끼딸 때 유용함) 기본 올가미 도구 (Lasso Tool): 클릭한채로 자유롭게 직접 드래그 다각형 올가미 도구 (Polygonal Lasso Tool): 원하는 부분마다 클릭하여 직선 경로로 자석 올가미 도구 (Magnetic Lasso Tool): 이미지의 색상 경계를 자동 감지하여 경계

원문보기 내부링크
Naver Blog

[포토샵 7.] 채우기 / 브러시 / 연필 / 지우개 / 그라디언트

채우기 전경색 채우기 : alt + delete 배경색 채우기 : ctrl + delete 채우기 색 부분 클릭하면 색깔 변경 가능 첨부파일 예제15.zip 파일 다운로드 브러시(B) / 연필 - opacity : 투명도 - flow : 브러시 색상이 스며드는 정도 (값이 작을수록 적용되는 색상은 연해짐) - 브러시 크기 조정 : [ , ] - 브러시 타입 변경 : capslock - 브러시 모양 미리 보기 : 브러시 설정부분 들어가서 brush tip 체크하기 나만의 브러시 만들기 step1. 좋아하는 캐릭터 사진 불러오기 step2. [edit]-[define brush preset] : 브러시 등록 step3. 브러시 설정값 변경하여 적용해보기 (간격, 모양, 분산 등) 지우개(E) / 그라디언트(G) 지우개 원하는 부분을 클릭하고 드래그해서 지우기 Eraser Tool (지우개 도구): 기본 지우개 모드로, 이미지의 픽셀을 지움 Background Eraser Tool (

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 유형별 정리 - slide

이전글 보러가기 웹디자인기능사 실기 1탄 ) 초기설정 - 파일연결, 포토샵 웹디자인기능사 실기 2탄 ) 와이어프레임 구조짜기 웹디자인기능사 실기 3탄 ) header 총정리 웹디자인기능사 실기시험 유형별 정리 - slide 위아래 / 좌우 / 페이드 슬라이드 부분은 3가지 유형으로 나눌 수 있다. 슬라이드는 작동하지 않으면 실격이니 주의 ! 1. 위아래 슬라이드 2. 좌우 슬라이드 3. 페이드(fade) 슬라이드 html slide 구조 slide-container > slide-wrap > slide 구조 <main> <div class="slide-container"> <div class="slide-wrap"> <div class="slide"> <a href="#"> <span>슬라이드 텍스트1</span> <img src="images/slide1.png" alt="슬라이드1"> </a> </div> <div class="slide"> <a href="#"> <span

원문보기 내부링크
Naver Blog

[컴퓨터활용능력] 컴활 2급 실기 핵심정리

컴퓨터활용능력 2급 실기 시험시간 : 40분 / 점수 : 70점 이상 <시험문제> 1. 기본작업 (20점) - 3문항 데이터입력 · 편집, 필터, 조건부서식, 텍스트 나누기, 외부 데이터 가져오기, 그림복사, 연결하여 붙여넣기 2. 계산작업 (40점) - 5문항 계산식, 데이터베이스 함수, 수학 함수, 통계함수, 찾기/참조 함수, 날짜/시간 함수, 문자열 함수, 논리 함수 3. 분석작업 (20점) - 2문항 정렬 및 부분합, 통합, 데이터표, 시나리오, 목표값 찾기, 피벗테이블 4. 기타작업 (20점) - 2문항 매크로, 차트 1. 기본작업 핵심정리 3문항 20점 필터 [데이터]-[필터] 자동필터 - 현재위치에서만 결과 추출 - 필드끼리는 and 조건, 같은 필드는 or 가능 고급필터 - 다른 위치에도 결과 추출 - and : 같은 줄에 조건 입력 or :다른 줄에 조건 입력 조건 - A* A로 시작 *A A로 끝 *A* A 포함 - >= 이상 > 초과 <= 이하 < 미만 = 같다

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 유형별 정리 - content (tab)

이전글 보러가기 웹디자인기능사 실기 1탄 ) 초기설정 - 파일연결, 포토샵 웹디자인기능사 실기 2탄 ) 와이어프레임 구조짜기 웹디자인기능사 실기 3탄 ) header 총정리 웹디자인기능사 실기 4탄 ) slide 총정리 웹디자인기능사 실기시험 유형별 정리 - content (tab) tab이냐 아니냐! content 부분은 크게 공지사항, 갤러리, 바로가기, 배너 부분인데, 가로로 나란히 배치하냐 새로로 배치하냐 등의 구조라 다른 부분은 쉽게 할 수 있지만 tab 영역은 조금 복잡할 것 같아서 정리하겠음 ! tab 으로 나오냐, 별도로 구성되냐로 나눌 수있는데, tab으로 나오는 부분을 살펴봅시다 ! html tab 구조 tab > ul.tabmenu > li > div.tabitem > ul.notice > li > ul.gallery > li <div class="tab"> <!-- 탭메뉴 --> <ul class="tabmenu"> <li class="on"><a hre

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 유형별 정리 - popup

이전글 보러가기 웹디자인기능사 실기 1탄 ) 초기설정 - 파일연결, 포토샵 웹디자인기능사 실기 2탄 ) 와이어프레임 구조짜기 웹디자인기능사 실기 3탄 ) header 총정리 웹디자인기능사 실기 4탄 ) slide 총정리 웹디자인기능사 실기 5탄 ) content tab 정리 웹디자인기능사 실기시험 유형별 정리 - popup 일반 팝업이냐 모달 팝업이냐 ! 팝업부분은 공지사항 첫번째 콘텐츠 클릭할 때 생기는 팝업창으로 레이어팝업창이냐 모달레이어 팝업창이냐로 나눌 수 있다. 두 개 차이점은 배경색이 있냐 없냐인데 코드 하나만 차이나니 따라하면 쉽게 만들 수 있다 ヮ html popup 구조 .popupbox > .popup > h2, p, button 구조 <div class="wrap"> <div class="popupbox"> <div class="popup"> <h2>팝업제목</h2> <p>팝업내용</p> <button>X 닫기</button> </div> </div> <

원문보기 내부링크
Naver Blog

[css 효과6.] 간단한 스크롤 효과 설정 scroll-snap

scroll-snap 이란? 마우스 휠로 스크롤 할 때 특정 지점에서 스냅될 수 있도록 css 설정만으로 가능 부드럽게 영역을 스르륵 !? 이동하는 효과 (마치 fullpage.js 효과를 볼 수 있음) scroll-snap 사용법 html 구조 <div class="scroll-container"> <div class="scroll-item">scroll 1</div> <div class="scroll-item">scroll 2</div> <div class="scroll-item">scroll 3</div> <div class="scroll-item">scroll 4</div> </div> css 코드 .scroll-container { width: 100%; height: 100vh; overflow: auto; scroll-snap-type: y mandatory; } .scroll-item { width: 100%; height: 100vh; scroll-snap-ali

원문보기 내부링크
Naver Blog

[css 효과7.] 배경에 따라 바뀌는 요소 mix-blend-mode

mix-blend-mode 란? 포토샵에서 blend 모드와 유사한데 레이어를 겹쳐서 색상에 대한 효과를 주고 싶을 때 사용한다. mix-blend-mode 사용법 html 구조 div를 여러개 만들어주고 제목(h1)과 이미지(img) 넣기 * div 여러개 생성하는 이유는 색깔에 다른 변화를 확인하기 위해서 ! <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <h1>NAHYUN</h1> <img src="images/pooh.jpg" alt="blendimg"> css 코드 div 에 사이즈와 색깔을 주고 h1, img 를 position: fixed로 고정시킨 후 mix-blend-mode 를 설정하면 배경색(div) 이 바뀔 때마다 h1, img 의 색깔도 바뀌는 것을 볼 수 있다. div { width: 10

원문보기 내부링크
Naver Blog

[전산세무회계] 전산세무2급, 전산회계1급, 2급 자격증 시험일정, 시험정보, 핵심정리 (요약집 있음)

전산세무/회계 자격증 전산세무2급 자격증 이론시험 (30%) + 실무시험(70%) = 90분 = 70점 이상 전산회계1급 자격증 이론시험 (30%) + 실무시험(70%) = 60분 = 70점 이상 전산회계2급 자격증 이론시험 (30%) + 실무시험(70%) = 60분 = 70점 이상 전산세무/회계 자격증 시험일정 , 비용 두 달에 한 번 짝수 달에 시험이 있음 ! 접수 비용은 30,000원 전산세무/회계 자격증 갱신 자격증을 취득하고 나면 5년마다 보수교육을 해줘야하는데 자세한 방법은 아래 포스팅 참고하기 [전산세무회계] 자격증 갱신하는 방법 전산회계 / 전산세무 자격증 갱신하기 전산회계 자격증이나 전산세무 자격증은 합격일로부터 5년까지 유효... blog.naver.com 전산세무, 전산회계 자격증 핵심정리, 요약집 예전에 전산세무, 회계 자격증 공부할 때 작성해놓았던 요점 정리집 공유해드립니다. 비밀번호가 설정되어 있으니 필요하신 분들은 , 댓글 부탁드려요 : ) 첨부파일

원문보기 내부링크
Naver Blog

[javascript 15.] 자바스크립트 이벤트 다루기

자바스크립트 이벤트 사용하기 사용자의 동작(클릭, 입력 등) 이나 문서의 상태 변화(로드, 사이즈 변경 등) 등 이벤트 종류에 따라 지정할 수 있음 < 이벤트 종류 > 마우스 키보드 포커스 폼 리소스 click 마우스 클릭 dblclick 마우스 빠르게 2번 클릭 mouseover/mouseenter 마우스 포인터 올리면 mouseout/mouseleave 마우스 포인터 나가면 mousemove 마우스 포인터 움직이면 wheel 마우스 휠 움직이면 keypress 키보드 누르는 동안 keydown 키보드 누른 순간 keyup 키보드 뗀 순간 focus 포커스되면 blur 포커스잃으면 change 목록, 체크상태 변경시 reset 폼 리셋됐을 때 submit 폼 전송하면 load 문서 열리면 error 리소스 로드못하면 사용자 인터페이스 resize 창 크기 변경될 때 scroll 페이지 스크롤 할 때 이벤트 등록하기 특정 HTML 요소에서 발생한 이벤트를 감지하고, 동작을 실행할 수

원문보기 내부링크
Naver Blog

[javascript 16.] 자바스크립트 폼 요소 다루기(form)

form 조작하기 forms / name form 요소에 대해 알고싶다면 바로가기 html 에서 폼 생성시 항상 <form> 태그로 시작 form 태그 선택하기 forms / name forms 속성 name 속성 모든 form 태그의 노드 정보를 HTMLCollection 객체에 담아 변환하여 쉽게 form 요소를 선택가능 forms 속성보다 훨씬 직관적으로 form 요소 노드 선택 가능 form 태그 순서 바뀌면 오류 발생할 수 있음 form 태그 순서 바뀌더라도 문제 발생하지 않음 document.forms document.폼이름 <form name="one" id="form1"> <input type="text"> </form> <form name="two" id="form2"> <input type="text"> </form> // 모든 form 태그 선택 let forms = document.forms; console.log(forms) // 첫 번째 form 태그 선택

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 초기 설정 (파일연결 + 포토샵)

웹디자인기능사 실기 정보와 유형 간략하게 살펴보기 웹디자인기능사 시험 합격 후기 웹디자인기능사 실기시험 지금 이 글을 보고 있다는 말은 필기에 합격하신 분들이겠죠 ~ ? 웹디자인기능사실기 문제는 내용은 다 달라도 만드는 방법들은 몇가지 유형만 익히고 있으면 비슷해서 차근차근 따라해보세요 첫 시간에는 "폴더 만들고 초기설정하는 방법" 폴더 생성 + visual studio code 열기 <수험자 제공 폴더> 시험장에 가면 수험자 제공 파일이 있는데 폴더 안에 각 영역들의 이미지와 텍스트들이 들어있고 (필요한 이미지들만 내 폴더 images 폴더에 넣기) jquery 오픈소스 파일이 들어있다. <내가 만든 폴더> 1. 바탕화면에 내 비번호 이름을 가진 폴더를 생성하고 visual studio code를 열어준다. 2. 사용할 이미지들과 jquery 소스를 폴더에 넣어둔다. 3. index.html, style.css, script.js 등 파일을 생성한다. html - index.

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 와이어프레임 구조 짜기

이전글 보러가기 웹디자인기능사 실기 1탄 ) 초기설정 - 파일연결, 포토샵 웹디자인기능사 실기시험 웹사이트구조 살펴보기 시험문제의 24개 유형을 크게 와이어프레임 구조로 살펴보면 2가지 유형으로 분류할 수 있다. 웹디자인기능사 실기시험 - 가로 와이어프레임 <가로> <div class="wrap"> <div class="popupbox"></div> <header>헤더</header> <main> <div class="slide-container">슬라이드</div> <div class="content">공지사항, 갤러리, 배너, 바로가기</div> </main> <footer>푸터</footer> </div> .wrap { width: 1200px; height: 700px; } .popupbox { } header { height: 100px; background-color: #eee; } main { height: 500px; } main .slide-container { h

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 유형별 정리 - header

이전글 보러가기 웹디자인기능사 실기 1탄 ) 초기설정 - 파일연결, 포토샵 웹디자인기능사 실기 2탄 ) 와이어프레임 구조짜기 웹디자인기능사 실기시험 유형별 정리 - header 가로 header html <div class="wrap"> <header> <!-- logo(로고) --> <h1><a href="#"><img src="images/logo.png" alt="회사로고"></a></h1> <!-- nav(메뉴) --> <nav></nav> </header> <main></main> </div> css header { height: 100px; display: flex; justify-content: space-between; align-items: center; } 로고와 메뉴를 양쪽에 배치해야하니 header에 flex 설정하기 justify-content : space-between; 로고와 메뉴를 가로 양쪽 끝에 배치 align-items : center 로고

원문보기 내부링크
Naver Blog

[javascript 10.] 자바스크립트 함수 종류 (콜백, 즉시실행, 타이머)

즉시실행함수 정의되자마자 즉시 실행되는 함수 (변수의 유효 범위 제한하기 위해 사용) 정의하자마자 바로 실행되는 함수 주로 변수의 유효 범위를 제한 리 정의와 동시에 실행 (function( ) { console.log('바로 실행!!!'); })( ); 콜백함수 다른 함수에 인수로 전달되는 함수 콜백 함수는 다른 함수에 인수로 전달되는 함수 고차 함수는 다른 함수를 인수로 받거나, 함수를 반환 특정 작업이 완료된 후에 실행되거나, 어떤 이벤트가 발생했을 때 실행 function nice(name, call){ console.log(`hi, ${name} !`) call( ); } function callback( ){ console.log('bye!') } nice('pooh', callback) 타이머함수 특정 시간이 되었을 때 함수를 실행하거나 반복하기 위해 시간을 재는 함수 setTimeout( ) 특정 시간 후 한 번 실행 setTimeout(함수, 지연시간, 인수들) se

원문보기 내부링크
Naver Blog

[javascript 11.] 자바스크립트 객체 알아보기

자바스크립트 객체 javascript object 키(key) + 값(value) 구성된 속성의 집합 키(key) 는 보통 문자열로 작성하나 공백이 들어갈 경우 꼭 따옴표 사용 리터럴 방식으로 객체 생성 : 중괄호{ } 사용 ex. let blog = { name : 'nacoding' } 속성이 하나도 없는 객체 (=빈 객체) ex. let blog = { } 객체에 속성을 추가하는 경우 : 가독성을 위해 줄바꿈함 ex. let blog = { name: 'nacoding', birth : '11/30' } 객체에 또 다른 객체나 함수가 들어갈 경우 ex. let blog = { name : { firstname : 'na', lastname : 'coding' }, birth : '11/30', hello : function( ){ console.log('hello~~!') }, 'phone number' : '010-1234-5678' } 객체 속성 접근하기 대괄호 또

원문보기 내부링크
Naver Blog

[컴퓨터활용능력] 컴활1급, 컴활2급 자격증 시험 합격기준 & 원서접수 & 기출문제 자료 첨부

컴퓨터활용능력 자격증이란 ? 스프레드시트와 데이터베이스 활용능력을 평가하는 국가기술자격 시험으로 2024년도되면서 프로그램이 2021 버전으로 변경되어 출제가 조금 바뀌었다. 바뀐 내용은 홈페이지 접속해서 종목소개 → 사무정보(컴퓨터활용능력) 누르면 아래쪽에 pdf 파일이 있는데 함수 몇가지 추가, 삭제 되었고 크게 달라진 부분은 없었다. 시험은 1급과 2급이 있고 필기, 실기로 구성되어 있다. (필기 합격한 후 2년 안에 실기 시험 응시해야함....) 시험과목 / 합격기준 / 특례 시험과목 필기 - 1급( 60분 60문제 ) : 컴퓨터 일반 / 스프레드시트 일반 / 데이터베이스 일반 - 2급( 40분 40문제 ) : 컴퓨터 일반 / 스프레드시트 일반 실기 - 1급( 90분 과목당45분 ) : 스프레드시트 실무 / 데이터베이스 실무 - 2급(40분) : 스프레드 시트 실무 합격기준 필기 : 매과목 100점 만점에 과목당 40점 이상, 평균 60점 이상 실기 : 100점 만점에

원문보기 내부링크
Naver Blog

[javascript 12.] 자바스크립트 표준 내장 객체란 ?

자바스크립트 표준 내장 객체 사용하기 표준 내장 객체 (자바스크립트에서 기본으로 내장된 객체) 개발 편의를 위해 수많은 객체들이 미리 만들어져있음. 모든 영역에서 공통으로 사용 가능 String 문자열 객체 Array 배열 자료형 Date 날짜, 시간 Math 수학 수식 대표적인 객체들로 이 외에 다른 표준 내장 객체가 있지만 자주 쓰이는 것 위주로 정리 String - 문자열 속성 (객체의 상태, 데이터) length 문자열 길이 반환 const str = 'na Coding' console.log(str.length) // 9 메서드 (객체가 수행할 수 있는 동작, 기능) includes( ) 매개변수에 인자로 전달되는 문자열이 대상 문자열에 포함(true) , 포함X(false) const str = 'na Coding' console.log(str.includes('na')) // true replace( ) 대상 문자열에서 메서드 매개변수에 인자로 전달되는 문자열과 일치하

원문보기 내부링크
Naver Blog

[javascript 13.] 자바스크립트 브라우저 객체 모델

자바스크립트 브라우저 객체 모델 사용하기 브라우저 객체 모델 (웹 브라우저에서 제공하는 객체) window 브라우저 객체모델 속성 innerWidth 웹 브라우저 화면 너비를 px 단위 innerHeight 웹 브라우저 화면 높이를 px 단위 outerWidth 웹 브라우저 창 너비를 px 단위 outerHeight 웹 브라우저 창 높이를 px 단위 screenTop / screenY 웹 브라우저 위쪽 면과 모니터 간격을 px 단위 screenLeft / screenX 웹 브라우저 왼쪽 면과 모니터 간격을 px 단위 pageXoffset / scrollX 웹 브라우저 가로 스크롤 위치를 px 단위 pageYoffset / scrollY 웹 브라우저 세로 스크롤 위치를 px 단위 메서드 alert( ) 알림창 표시 confirm( ) 확인창 표시 prompt( ) 입력창 표시 open( ) 새로운 웹 브라우저 창 열기 close( ) 웹 브라우저 창 닫기 setTimeout( ) 일정

원문보기 내부링크
Naver Blog

[javascript 14.] 자바스크립트 문서 객체 모델(DOM)

문서 객체 모델(DOM) 웹 브라우저에 표시되는 HTML 문서 구조를 객체화한 모델 구조 웹 브라우저의 문서 객체 모델(DOM)을 조작하여 웹 브라우저에 표시되는 HTML 문서 구조를 변경하거나 새로운 요소를 추가하는 등 작업을 할 수 있음 돔트리 (DOM tree) 웹 문서에 있는 요소들 간 부모, 자식 관계를 계층 구조로 표시한 것 <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>DOM 트리</title> </head> <body> <h1>DOM트리구조</h1> <a href="#">노드</a> </body> </html> 노드 선택하기 ( get / query ) get 메서드 속성값과 태그명 사용하기 getElementById('id속성값') id 속성값과 일치하는 요소 노드 1개만 선택 getElementsByClassName('class속성값') class 속성값과 일치하는 요소 노드 모두 선택

원문보기 내부링크
Naver Blog

[css 효과2.] text stroke, gradient, 텍스트 말줄임

text stroke 글자 테두리 주는 방법 첫번째 방법 ) text-shadow로 글자 테두리 효과 주기 <h1>NACODING</h1> h1 { text-shadow: -1px -1px 0 orange, 1px -1px 0 orange, -1px 1px 0 orange, 1px 1px 0 orange; } 두번째 방법 ) -webkit-text-stroke 이용하여 글자 테두리 효과 주기 <h1>NACODING</h1> h1 { -webkit-text-stroke: 1px red; } -webkit-text-stroke 를 사용할 때 주의점 모든 웹 브라우저에서 지원이 안될 수 있음 ! 테두리가 안쪽으로 생김 ! text gradient 글자 그라데이션 주는 방법 배경에 그라디언트를 줄 수 있지만 텍스트에 직접 줄 수 있는 방법이 없다. 그래서, 아래와 같이 따라하면 글자에도 그라디언트를 적용할 수 있다. 배경에 그라디언트 코드 작성하기 background : linear-

원문보기 내부링크
Naver Blog

[javascript 5.] 자바스크립트 자료형 변환

자바스크립트 자료형 설명 바로가기 자료형 변환 type casting 데이터를 다른 자료형으로 변환하는 과정 명시적 변환 (직접 변환) 과 암시적 변환 (자바스크립트 엔진이 자동으로 변환) 자바스크립트의 경우 다른 언어와 다르게 프로그램 실행 중 자료형이 변환되는 언어로 자동으로 자료형이 변환될 때도 있음 c 언어나 자바(java) 등 일반 프로그래밍 언어 변수선언할 때 변수 자료형을 결정 자료형에 맞는 값만 변수에 저장 가능 자료형으로 인한 프로그램 오류 방지 기능 int num = 10; // 정수형 변수 num char *name = 'na'; // 문자형 변수 name 자바스크립트(javascript) 변수 선언시 자료형 지정 안함 num = 10; // 숫자형 num = 'na' // 문자열 자동 형 변환 암시적 변환 변수에 값을 저장할 때 자료형이 결정되기도 하지만 연산할 때 자료형이 자동으로 변환됨 (주의!) 문자열을 사칙연산에 사용하면 자동으로 숫자형으로 변환됨 숫자

원문보기 내부링크
Naver Blog

[css 효과3.] scrollbar 스크롤바 색깔 변경, 커스텀

css로 스크롤바 색깔 변경하는 방법 스크롤바 모양, 색 바꾸기 전체 웹사이트 스크롤바 색상 변경하기 css 파일에 아래와 같이 작성하기 ::-webkit-scrollbar 스크롤바 전체 ::-webkit-scrollbar-thumb 스크롤 막대 ::-webkit-scrollbar-track 스크롤 막대 배경 영역 ::-webkit-scrollbar { width: 15px; /* 스크롤 바 너비 */ } ::-webkit-scrollbar-thumb { background-color: #fa7373; /* 스크롤 바 색상 */ border-radius: 5px; /* 둥근 모서리 */ } ::-webkit-scrollbar-track { background-color: #f1f1f1; /* 스크롤 바 트랙 색상 */ } 특정 영역 스크롤바 색상 변경하기 내가 지정한 영역부분 태그에 선택자::-webkit~~~~ 으로 설정하면 변경완료 ! 선택자 부분에는 태그나 클래스, 아이디

원문보기 내부링크
Naver Blog

[javascript 6.] 자바스크립트 연산자

연산자란? 값을 연산하는 데 사용되는 기호나 키워드 연산자 종류 산술 대입 연결 비교 논리 숫자 값 계산 특정 값에 값 할당 문자열 연결 두 값을 비교 true, false 조합 산술 연산자 [ 계산 ] + - * / % ++ -- 더하기 빼기 곱하기 나누기 나눈 나머지 1 증가 1 감소 c = a +b c = a -b c = a *b c = a /b c = a %b a++ a-- 대입 연산자 [ 할당 ] = += -= *= /= %= 값 할당 더하고 할당 빼고 할당 곱하고 할당 나누고 할당 나머지 구하고 할당 y = x y += x y -= x y *= x y /= x y %= x y에 x할당 y = y + x y = y - x y = y * x y = y / x y = y % x 연결 연산자 [ + 이용하여 연결 ] console.log('pooh' + 3) // pooh3 console.log('hello ' + 'coding') // hello coding console

원문보기 내부링크
Naver Blog

[javascript 7.] 자바스크립트 조건문

조건문 사용하기 javascript 조건문 사용하기 조건문을 사용하면 특정 조건에 따라 실행되는 코드를 작성할 수 있음 if 문 괄호 안 조건식이 true면 { } 사이 코드 처리 false면 무시하고 다음 코드로 넘어감 결과값이 true 일 때만 실행됨 조건식에는 어떤 값을 써도(숫자, 문자, undefined, null 등) true, false 로 평가됨 else 문 if ... else else 문은 if문 조건이 false 일 때 실행되는 코드 else 문만 단독으로 사용할 수 없음 하나의 if 문에 하나의 else 문 사용 가능 else if 문 if ... else if ... else if문에 조건을 더 추가하고 싶을 때 사용 else if문 개수는 제한 없지만 else if문 단독으로 사용할 수 없고 if문 다음에, else문보다 전에 사용 switch 문 switch 값과 일치하는 case 문이 있을 때 해당 코드 실행 하는 조건문으로, 하나 이상의 case 문(

원문보기 내부링크
Naver Blog

[javascript 8.] 자바스크립트 반복문

반복문 사용하기 javascript 반복문 같은 동작을 여러 번 실행하기 위해 사용하는 문 지정한 조건이 true 일 동안 반복해서 실행 for문 조건값이 일정하게 커지면서 명령 실행할 때 편리 초기값 : 카운터 변수 지정 조건식 : 반복하기 위한 조건(조건만족시 명령실행) 증감식 : 명령 반복한 후 실행 초기화는 처음 한 번 할당(최초 1회)하고 조건과, 명령, 증가식으로 계속 반복함 초기값 조건식 명령(true일때) 증감식 조건식 ... for(let i =0; i <= 10; i++){ console.log(i) } // 0부터 10까지 출력 while문 / do ... while문 while문 특정 조건을 만족하는 동안 문장을 반복 조건이 false면 한 번도 실행하지 않음 let num = 1; while(num <= 100){ console.log(num); num++; } // 1부터 100까지 출력 do ... while문 문장을 한 번 실행한 후 true인 동

원문보기 내부링크
Naver Blog

[css 효과4.] 웹사이트 드래그할 때 블록 색 바꾸기

드래그할 때 색 변경 웹사이트 드래그 하면 기본적으로 파란 바탕에 흰색으로 뜨게 되는데 간단하게 색을 변경할 수 있다. 드래그 색 변경 전 드래그 색 변경 후 웹사이트 전체 드래그 색 변경하기 ::selection{ } 에 background-color (배경색) 와 color (글자색) 속성 사용하여 변경하기 <h1>NACODING</h1> <h2>HELLO</h2> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur nostrum perspiciatis quae, doloribus, non vero, a quia impedit nobis eum minus doloremque ad. Pariatur quo eos accusantium exercitationem quasi quidem?</p> ::selection { background-color: orange; } 웹사이트 특정 영역 드래그 색 변경하기 내

원문보기 내부링크
Naver Blog

[css 효과5.] 이미지, 배경 필터 효과 설정하기 (filter, backdrop-filter)

filter 속성 이미지나 요소의 효과를 설정하여 채도, 블러, 밝기, 투명도 등 적용 filter : _________; blur(__px) 요소 블러처리 0px 기본, px 커질 수록 블러 효과 커짐 brightness(__%) 밝기 조정 0% 어두운, 100% 기본, 200% 2배 밝은 saturate(__%) 채도 조정 0% 무채색, 100% 기본, 200% 2배 채도 contrast(__%) 대비 조정 0% 회색, 100% 기본, 200% 2배 대비 grayscale(__%) 회색조 변경 0% 기본, 100% 회색 hue-rotate(__deg) 색상 회전 0deg 기본, 360deg 한바퀴 회전 invert(__%) 색상 반전 0% 기본, 100% 반전 sepia(__%) 세피아톤 변경 0% 기본, 100% 세피아 opacity(__%) 투명도 조정 0% 투명, 100% 불투명 여러 필터 동시에 적용하기 (한 칸씩 띄우고 작성) filter : blur(10px) bri

원문보기 내부링크
Naver Blog

[javascript 9.] 자바스크립트 함수 선언, 작성법

함수란 ? javascript function 어떤 목적을 가지고 작성한 코드를 모아 둔 곳 코드를 함수로 만들게 되면 함수를 호출하여 함수 내부에 작성한 여러 코드들을 한 번에 실행할 수 있음 (재사용이 편리함) 함수 선언하기 function 이라는 예약어를 사용 매개변수 (parameter) 함수 정의할 때 외부에서 전달하는 데이터를 함수에서 받을 수 있도록 정의하는 변수 매개변수는 여러개 만들 수 있고 쉼표(,)로 구분하여 작성 인수 (argument) 매개변수 있는 함수를 실행할 때 값, 변수, 참조 등 전달되는 값 정의한 함수를 호출할 때 소괄호( ) 안에 전달하고 싶은 데이터를 작성함 인수도 매개변수 개수에 맞춰서 작성 ex. 매개변수, 인수 사용법 function na(a,b) { console.log(a + b) } na(1,2) //결과 : 3 function na(a =1,b=2) { console.log(a + b) } na( ) //결과 : 3 ex. 매개변수,

원문보기 내부링크
Naver Blog

[라이브러리] mixitup 사용하여 정렬하기 (효과)

MixItUp 이란? 웹 페이지에서 필터링, 정렬을 위한 자바스크립트 라이브러리 MixItUp 라이브러리 가져오기 첫번째 방법) cdn 링크로 html head 에 붙여넣기 바로가기 - mixitup cdn 사이트 접속하여 코드 복사하기 <script src="https://cdnjs.cloudflare.com/ajax/libs/mixitup/3.3.1/mixitup.min.js"></script> 두번째 방법) 다운로드 받아서 파일 추가하기 바로가기 - mixitup 사이트 접속해서 download 받아서 압축 풀고 dist → js 파일 폴더에 넣고 연결시키기 <script src="js/mixitup.min.js"></script> MixItUp 작성하는 방법 html 목록 (버튼들) filter (해당 버튼 클릭하면 해당하는 것만 나오도록 하는 부분) - all 을 제외한 나머지는 data-filter 값에 . 붙이기 - category부분은 내가 변경하여 사용 가능 so

원문보기 내부링크
Naver Blog

[javascript 1.] 자바스크립트 html 파일 연결하기

javascript 란 ? 자바스크립트란 html로 구조를 짜고 css로 디자인을 하고 움직이거나 동작하는 것 등 css로 표현할 수 없는 부분들을 동적인 웹으로 작동할 수 있도록 javascript 언어를 사용함 javascript 파일 html 에 연결하는 방법 자바스크립트 파일 내부 스크립트 방법 - html 문서 내 body에서 <script> 코드 </script> 외부 스크립트 방법 - js 확장자 파일을 별도로 만들어 html body 종료 태그 전에 <script src = “main.js”></script> - head에 사용할 경우 script 안에 defer 추가하기 <script src = “main.js” defer></script> <script src="js/main.js"></script> javascript 실행하기 console 창으로 실행 인터넷 창에서 [F12] → [console] 창에서 console.log('안녕') * console.log

원문보기 내부링크
Naver Blog

[전산세무회계] 자격증 갱신하는 방법

전산회계 / 전산세무 자격증 갱신하기 전산회계 자격증이나 전산세무 자격증은 합격일로부터 5년까지 유효하기 때문에 보수교육을 들어야 갱신이 된다. (5년 단위마다 갱신해야함) 그럼 언제부터 할 수 있냐! 하면 5년이 지나기 3개월 전부터 갱신이 가능한데, 어려운 건 아니고 교재 다운받은 후 10문제 시험을 쳐서 60점 이상이되면 자동으로 갱신된다. 교육대상은 국가공인 자격증인 경우에 보수교육을 받으면 된다 ! 전산회계 / 전산세무 자격증 갱신대상 확인하기 한국세무사회 국가공인자격시험 홈페이지 접속하기 바로가기 사이트 접속 후 [자격증] 메뉴 → [자격증 갱신] 스크롤 아래로 내려서 [갱신대상조회 바로가기] 보수교육 대상 확인하고 교재 다운로드() 후 평가시험() 응시하기 10문제인데 몇 분 걸리지 않은 것 같다 ! 예전에 정리해놓은 자료와 교재 다운로드 받은 것 참고해서 풀었고 문제는 어렵진 않았다 (대손상각비 설정, 재고자산, 매출총이익계산 등....) 정리해놓은 자료는 추후에

원문보기 내부링크
Naver Blog

[javascript 2.] 자바스크립트 변수, 키워드, 사용법

변수란? javascript variable 변수 <값이 여러 번 달라질 수 있는 데이터> 상수 <값을 한 번 지정하면 바뀌지 않는 데이터> 키워드 : var , let , const 와 같이 역할이나 기능이 정해진 특별한 단어 변수명 : 담아놓을 이름 연산자 : = 기호는 할당하는 뜻 (같다는 == 기호가 2개) 세미콜론 : 자바스크립트에서 하나의 문법이 끝났을 때 붙임 (없어도 오류는 대부분 없으나 붙여주기) 변수 종류 스코프 (scope) - 변수의 유효 범위 함수 스코프 방식인지 블록 스코프 방식인지 따라 전역스코프와 지역 스코프의 참조 범위가 달라짐 전역스코프 코드 전체 접근 전역변수 (global variable) - 전역스코프에 선언 - 함수 외부에서 선언 (프로그램 전체에 접근) - 코드의 어디서든 참조가 가능해서 변수 충돌이 발생할 수 있으니 주의 지역스코프 특정 영역 접근 지역변수 (local variable) - 지역스코프에 선언 - 함수 내 선언

원문보기 내부링크
Naver Blog

[javascript 3.] 자바스크립트 입력/출력 방법

alert( ) 함수 경고창, 알림창 alert('내용') 사용자에게 메시지를 표시하는 데 사용 (알림창, 경고창) confirm( ) 함수 확인창 confirm('내용') 사용자에게 질문을 표시하고 [확인], [취소] 버튼을 클릭할 때까지 기다림 결과값을 확인하면 확인 클릭했는지 취소 클릭했는지 알 수 있음 그 값에 따라 프로그램 소스를 다르게 작성 가능함 확인 버튼 클릭하면 true, 취소버튼 클릭하면 false prompt( ) 함수 입력창 prompt('내용') prompt('내용', '기본값') 사용자에게 텍스트를 입력하도록 요청하고 입력한 값을 반환함 프로그램 실행에 필요한 값을 받을 때 자주 사용 만약, 취소를 누르게 되면 결과값은 null 로 나옴 내용만 입력했을 때는 텍스트를 사용자가 직접 입력해야함 내용과 기본값을 입력해놓으면 기본값이 있는 상태로 창이 나옴, 기본값으로 사용하고 싶지 않으면 지우고 입력하면 됨 console.log( ) 함수 콘솔창에 표시 cons

원문보기 내부링크
Naver Blog

[javascript 4.] 자바스크립트 자료형

자료형이란 ? data type 프로그램에서 처리할 수 있는 자료의 형태 기본유형 숫자형(number) 따옴표 없이 숫자로만 const num = 10; 문자열(string) 따옴표(' ' 또는 " ")로 묶어서 const str = 'hello'; 논리형(boolean) true(참) , false(거짓) const bool = true; undefined 자료형이 지정되지 않았을 때 변수 선언만 하고 값이 할당되지 않은 상태 const unde; null 값이 유효하지 않을 때 const nl = null; symbol 유일한 값, 변경이 불가한 값 만들 때 const sym = Symbol( ) 복합유형 배열(array) 여러값들을 대괄호 [ ] 에 담아서 index로 접근 const arr = ['봄', '여름', '가을'] 객체(object) key 와 value 가 쌍으로 이루어진 중괄호 { } const obj = { name : 'nacoding', bank : '

원문보기 내부링크
Naver Blog

[css 효과1.] 마우스 커서 이미지 변경하는 법 (+ 커서 모양 종류, 커스텀하기)

css 마우스 커서 cursor : ______; default pointer crosshair text wait help move all-scroll not-allowed progress 기본 커서 (화살표) 링크 이동 (손가락) 선택 영역 (십자) 글자 입력 (세로 길쭉) 기다리기 (회전) 도움말 (물음표) 이동할 수 있는 요소, 모든 방향 스크롤 (화살표 4) 동작 허용X (금지 표시) 진행 중 (진행,회전) 마우스 커서 이미지로 변경하기 css 속성값에 없는 이미지로 마우스 커서를 넣고 싶을 때는 url( ) 을 사용 cursor: url('경로') x y, auto; cursor: url('images/pooh.png') 2 2, auto; url('경로') 마우스 커서로 올 수 있는 이미지의 최대 사이즈는 128px X 128px 이지만, 너무 크지 않게 50px 정도 사이즈로 하는게 딱 보기 좋은 사이즈 인 것 같음 ! x y 이미지의 위치 x좌표 y좌표 입력하기

원문보기 내부링크
Naver Blog

[ITQ] 아이티큐 파워포인트 핵심정리 + 단축키

ITQ 파워포인트 - 문제 유형 살펴보기 ITQ 원서접수 방법, 합격기준, 기출문제 바로가기 ITQ 한글 핵심정리 + 단축키 바로가기 파워포인트 시험 유형 1. 전체구성 (60점) 2. 슬라이드1 - 표지 디자인 (40점) 3. 슬라이드2 - 목차 슬라이드 (60점) 4. 슬라이드3 - 텍스트/동영상 슬라이드 (60점) 5. 슬라이드4 - 표 슬라이드 (80점) 6. 슬라이드5 - 차트 슬라이드 (100점) 7. 슬라이드6 - 도형 슬라이드 (100점) ITQ 파워포인트 - 문제별 핵심정리 + 단축키 단축키 ctrl + [ : 글자 줄이기 ctrl + ] : 글자 키우기 ctrl + 드래그 : 복사 ctrl + shift + 드래그 : 라인 맞춰서 복사 도형서식 : 도형 선택 후 오른쪽 마우스 전체구성 (환경설정) [디자인] - [슬라이드 크기] - [사용자 지정 슬라이드] A4 로 변경 [보기] - [슬라이드 마스터] - 설정한 후 - [슬라이드 마스터 닫기] 슬라이드1 - 제

원문보기 내부링크
Naver Blog

[ITQ] 아이티큐 엑셀 핵심정리 + 단축키

ITQ 엑셀 - 문제 유형 살펴보기 ITQ 원서접수 방법, 합격기준, 기출문제 바로가기 ITQ 한글 핵심정리 + 단축키 바로가기 ITQ 파워포인트 핵심정리 + 단축키 바로가기 엑셀 시험 유형 1. 제1작업 - 표 서식 작성 및 값 계산 (240점) 2. 제2작업 - 필터 및 서식 or 목표값 찾기 및 필터 (80점) 3. 제3작업 - 피벗테이블 or 정렬 및 부분합 (80점) 4. 제4작업 - 그래프 (100점) ITQ 엑셀 - 문제별 핵심정리 + 단축키 단축키 셀 서식 : ctrl + 1 셀 하나에 줄바꿈 : alt + enter 바로 위 셀 복사 : ctrl + D 행 가로줄 선택하기 : shift + space 열 세로줄 선택하기 : ctrl + space 행/열 한 줄 추가하기 : 행/열 선택 후 ctrl + + 행/열 한 줄 삭제하기 : 행/열 선택후 ctrl + - 이전 시트 이동 : shift + PageUp 다음 시트 이동 shift + PageDown 초기설정

원문보기 내부링크
Naver Blog

[플러그인] bxslider 슬라이드 사용법, 옵션 정리, 커스텀

bxslider 플러그인이란? jQuery 기반 슬라이더 기능을 제공하는 플러그인 웹페이지에 이미지 슬라이드나 콘텐츠 슬라이딩 기능을 쉽게 추가 * 플러그인 : 기존 + 기능 확장이나 향상시키는 확장 bxslider 사용법 1. bxSlider 사이트 접속 바로가기 2. css, jquery, js link 가지고 와서 html head 부분에 붙여넣기 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.bxslider.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.bxslider.min.js"></script> <!DOCT

원문보기 내부링크
Naver Blog

[GTQ 일러스트] 1급 자격증 시험 핵심정리(+ 단축키)

GTQ 일러스트 1급 illustrator GTQ 일러스트 시험 합격기준 + 기출문제 [GTQi 일러스트] 자격증 합격기준 & 기출문제 GTQi 일러스트 시험 합격기준 1급 기준 - 90분간 시험 - GTQi(3문항) BI, CI 디자인 / 비즈니... blog.naver.com GTQ 일러스트 시험 합격 후기 + 요약정리 [GTQi 일러스트 1급] 망한줄 알았던 시험 합격한 후기 처음에 일러스트 시험 신청했을 때는 3문제만 90분안에 그리면 되네 라고 생각을 했는데... 막상 연습해보... blog.naver.com GTQ 일러스트 1급 핵심정리 & 단축키 < 초기설정 > 새 파일 만들기 : ctrl + N - 이름: 수험번호-이름-숫자 - 조건에 맞는 width, height 입력 - 해상도 : 300(ppi) 단위 : mm 컬러모드 : CMYK (C 파랑 M 분홍 Y 노랑 K 검정) 포토샵과 일러스트 초기설정 차이 GTQ 포토샵 px, RGB, 72ppi GTQi

원문보기 내부링크
Naver Blog

** html 웹사이트 아이콘 (파비콘 : favicon) 넣기

파비콘(favicon) 이란? 웹 브라우저 탭에 표시되는 부분으로 우리가 작업하는 파일들의 파비콘 모양은 아래 사진처럼 보이는데 내가 원하는 이미지나 로고사진으로 변경하고 싶을 때 favicon을 설정하는 방법은 ...! 파비콘(favicon) html에 적용하는 방법 1. 파비콘으로 지정할 이미지 파일을 폴더 상위(index.html)와 같은 위치에 저장하기 이미지파일은 favicon.ico 로 저장하기 Q. 이미지 파일 용량 작은 이미지 파일로 파일 크기를 작게해서 웹 페이지의 로딩 속도를 느리게 만들지 않도록 하기 Q. 이미지 파일 이름 일반적으로 favicon.ico 사용 (웹 브라우저가 자동으로 인식하고 로드하는 표준 파일 이름) Q. 이미지 파일 형식 PNG, GIF, JPG 등 다양한 형식의 이미지를 사용할 수 있음 2. html head 부분에 link로 작성하기 <link rel="shortcut icon" href="favicon.ico"> 또는 <link

원문보기 내부링크
Naver Blog

[라이브러리] fullpage.js 사용법, 옵션 정리

fullpage.js란? 웹 페이지의 각 섹션션을 전체 화면으로 표시하여 스크롤링 효과를 주는 자바스크립트 라이브러리로 페이지를 스크롤할 때 섹션 간에 부드럽게 이동하고, 각 섹션의 높이를 브라우저 창에 맞게 자동 조정하여 전체 화면에서 섹션을 표시하며 내비게이션 메뉴를 추가하여 사용자가 특정 섹션으로 쉽게 이동할 수 있음 fullpage.js 라이브러리 가져오기 아래 파일 다운받아서 css, js 링크 html에 연결시키기 (2.9.7 버전) 첨부파일 fullpage.js.zip 파일 다운로드 2. ~~ 버전은 무료로 이용가능하나 3. ~~ 버전 이상은 구매해서 사용 ... 번외) 사이트 접속해서 하는 방법 바로가기 code → download.ZIP → 압축풀기 → dist → css, js 파일 가져오기 fullpage.js 사용하는 방법 1. 가져온 css, js 링크 html head 안에 붙여넣기 + jquery 링크 <link rel="stylesheet" href=

원문보기 내부링크
Naver Blog

[ITQ] 아이티큐 한글 핵심정리 + 단축키

ITQ 한글 - 문제 유형 살펴보기 ITQ 는 나오는 유형이 정해져 있어서 몇 번만 연습해보면 금방 할 수 있다 .. ! 60분동안 크게 다섯문제를 작성하면 되는데 타자만 빠르다면 문제없이 A등급 가능하다. ITQ 원서접수 방법, 합격기준, 기출문제는 아래 링크 참고 [ITQ] 시험 원서접수 & 합격기준 & 기출문제 (OA MASTER란?) ITQ 시험 ITQ 시험은 비교적 다른 컴퓨터 관련 시험들보다 난이도가 낮아서 쉽게 취득할 수 있고 공... blog.naver.com 한글 시험 유형 1. 스타일 (50점) 2. 표, 차트 (50점, 50점) 3. 수식 (40점) 4. 그리기작업(도형, 글맵시, 그림삽입, 하이퍼링크 (110점) 5. 문서작성 (200점) 문서입력, 들여쓰기, 머리말/꼬리말, 덧말 넣기, 책갈피, 그림 삽입, 문단 첫 글자 장식 각주, 문단 번호 기능, 표, 쪽번호, 서식 지정 ITQ 한글 - 문제별 핵심정리 + 단축키 문서 환경 설정 파일저장 : 내 PC

원문보기 내부링크
Naver Blog

[라이브러리] skrollr 이용한 스크롤 이벤트 효과

skrollr 라이브러리란? 스크롤 이벤트에 반응한 웹 페이지에 있는 요소들의 애니메이션을 스크롤 값에 따라 색상, 위치나 크기 등 변경시켜 동적인 효과를 구현하는 javascript 라이브러리 skrollr 사용법 1. skrollr 사이트 접속 바로가기 2. </> 부분 복사해서 html에 붙여넣기 <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js" integrity="sha512-A2+khatRDWHUE2VUtN4xUTkr1nc4YfDBw9Sg3ea6x0aRPfpcYieDZji4D2edDHy/yF5NsYzP7kL8sSM8s5EqCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 생략해서 붙여넣기 <script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.

원문보기 내부링크
Naver Blog

[jQuery 1.] jquery 라이브러리 사용방법 (html에 적용하여 확인하기)

jQuery 라이브러리란 ? javascript(자바스크립트) 라이브러리로 html 문서를 조작하고 애니메이션이나 이벤트 처리를 쉽게 사용할 수 있음 문법이 비교적 간단하고 직관적이라 빠르게 코드를 작성하는 기능을 가짐 다양한 웹 브라우저에서 일관된 동작을 보장해서 크로스 브라우징을 지원함 ** 라이브러리란 ? 자주 사용하는 코드들을 재사용할 수 있는 형태로 가공해서 프로그래밍 효율을 높여주는 코드들 jQuery 라이브러리 사용방법 1. jQuery cdn 사이트 접속하기 바로가기 2. jQuery 3.X minified 클릭하여 복사하기 ** jQuery 3.x는 성능, 보안 등 이전 버전과 비교하여 개선되어 3버전을 선호함 3. html 에 복사한 script 파일 붙여넣기 <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI

원문보기 내부링크
Naver Blog

[jQuery 2.] jquery 선택자 정리

jQuery 선택자 jquery로 html 요소를 가져와서 스타일이나 속성을 지정할 수 있는데 가지고 오는 방법이 여러가지가 있다. 선택자를 가져와서 사용하는 ex) $(‘선택자’).css(‘스타일 속성명”, “값“); $(‘선택자’).attr(‘속성명’, ‘값’); 선택자 종류 - 직접 / 인접 / 콘텐츠 / 위치 직접선택자 전체 : $(‘*’) 모든 태그 전부! 요소 : $(‘태그명’) $('h1') 클래스 : $(‘.클래스명’) $('.logo') 아이디 : $(‘#아이디명’) $('#menu') 그룹 : $(‘선택1 , 선택2 , 선택3 , …’) $('.one, .two, .three') 인접선택자 $('_____') 선택한 요소 '____' 의 부모 $('____').parent( ) '____' 의 상위 $('____').parents( ) '____' 가장 가까운 '____' $('____').closest('____') 하위 $('선택요소 하위요소') 자식 $('선택

원문보기 내부링크
Naver Blog

[jQuery 3.] jquery 이벤트 등록, 작성법

jquery event 등록 제이쿼리 이벤트 등록 요소를 가지고 왔다면 가져온 요소에 이벤트를 등록해서 내가 원하는 동작을 할 수 있도록 해야한다. Q. jquery 연결 방법이 모르겠다면 바로가기 Q. jquery 선택자에 대해 궁금하다면 바로가기 jquery를 사용하여 작성할 때 $(document).ready(function( ){ //jquery 코드 작성은 여기에서 $('가져온요소').click(function( ){ // 여기에 할일 작성 }) }) 여기서 click(클릭) 부분이 이벤트가 되는데 이벤트를 작성할 수 있는 다양한 방법과 click 외에 다양한 이벤트의 종류를 정리했다 !!! jquery event 작성법 on() 메서드 사용 $('선택자').on('event종류', function( ) { // 내용 }); 여러 이벤트 종류에 대한 핸들러 등록 $('선택자').on('event종류1 event종류2 ...' function( ){ // 내용 }); 객

원문보기 내부링크
Naver Blog

[jQuery 4.] jquery 효과(effects)

jquery 효과 제이쿼리 이벤트(jquery event)를 추가해주는 것까지 작성했다면 이벤트가 발생했을 때 효과들을 작성할 수 있다. (애니메이션과 시각적 변화를 통한 html 상태 변경) Q. jquery 연결 방법이 모르겠다면 바로가기 Q. jquery 선택자에 대해 궁금하다면 바로가기 Q. jquery 이벤트 등록 작성법은 바로가기 jquery 효과(effects)의 종류 show hide toggle fadeIn fadeOut fade Toggle slideDown slideUp slideToggle animate delay stop show( ) 보이기 fadeIn( ) 서서히 보이기 slideDown( ) 슬라이드 내려오기 hide( ) 사라지기 fadeOut( ) 서서히 사라지기 slideUp( ) 슬라이드 올라가기 toggle( ) show-hide 전환 fadeToggle( ) fadeIn-fadeOut 전환 slideToggle( ) slideDown -

원문보기 내부링크
Naver Blog

[jQuery 5.] jquery 메서드 종류 (속성, 스타일, 클래스 추가 등)

jquery 메서드(methods)란 ? html 요소의 속성, 스타일, 내용을 조작하고 이벤트 조작할 때 사용 Q. jquery 연결 방법이 모르겠다면 바로가기 Q. jquery 선택자에 대해 궁금하다면 바로가기 Q. jquery 이벤트 등록 작성법은 바로가기 Q. jquery 효과의 종류 바로가기 jquery 메서드 종류 속성 조작 메서드 html( ) html 콘텐츠 가져오거나 설정 $('선택자').html( ) $('선택자').html('<div>새로운내용</div>') addClass( ) 클래스 추가 $('선택자').addClass('on') text( ) 텍스트 콘텐츠를 가져오거나 설정 $('선택자').text( ) $('선택자').text('새로운내용') removeClass( ) 클래스 제거 $('선택자').removeClass('on') attr( ) 속성 가져오거나 설정 $('선택자').attr('src') $('선택자').attr('src', 'arrow

원문보기 내부링크
Naver Blog

** html에 구글드라이브, 유튜브 iframe 영상 퍼오기 + 속성

YOUTUBE(유튜브) 영상 html 에 넣는 방법 youtube(유튜브) iframe 가져오는 방법은 아래 글 참고해서 만들어보기 [html 6.] html에 이미지, 동영상, iframe 넣는 방법 (+유튜브영상 퍼오기) 1. 이미지 넣기 (img 태그) html에 이미지 넣을 때는 img 태그 사용 ** src ="경로" ** al... blog.naver.com YOUTUBE(유튜브)로 가져온 영상 속성 추가 컨트롤바, 자동재생, 시작시간, 끝시간, 무한반복 youtube link 공유로 가져오기 (src에서 id까지만 가져오기) id = embed/_____id______? <iframe width="560" height="315" src="https://www.youtube.com/embed/MN3Hc5AW1HI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-

원문보기 내부링크
Naver Blog

[css 13.] flex 사용하여 레이아웃 배치하기 (부모-자식 속성 정리)

flex란? flex 레이아웃 배치 1차원 방식(가로나 세로 중 한 방향)으로 효과적으로 레이아웃 배치할 수 있는 스타일 속성 flex 사용법 부모 요소 (flex-container) display: flex; 또는 display: inline-flex; 배치시키고 싶은 바로 위 부모한테 주기 (할아버지태그 ) 자식 요소(flex-item) flex-item들은 부모 요소 내 배치 flex 부모요소 속성 flex 설정 display: flex; inline-flex; * flex-item 이 원래 가지고 있는 박스 성격 (block, inline, inline-block) 은 무시됨 flex 주축 방향 설정 flex-direction: row; row-reverse; column; column-reverse; - row; 가로(기본값) - row-reverse; 가로 반대로 - column; 세로 - column-reverse; 세로 반대로 flex 줄바꿈 설정 flex-wra

원문보기 내부링크
Naver Blog

[라이브러리] 스크롤 애니메이션 효과 AOS 적용하기 (사용법, 옵션정리)

AOS 라이브러리란? animation On scroll 스크롤 애니메이션 효과 웹 페이지에서 사용자가 스크롤할 때 요소들이 애니메이션 효과와 함께 등장하도록 하는 라이브러리 (JavaScript를 기반으로 하며 쉽고 간단하게 CSS 애니메이션을 활용) AOS 효과 적용하는 방법 1. AOS 사이트 접속 바로가기 2. 사이트 아래로 내려서 CDN 부분 css, js 파일 복사해서 내 html 파일에 붙여넣기 <!-- aos css cdn --> <link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"> <!-- aos js cdn --> <script src="https://unpkg.com/[email protected]/dist/aos.js"></script> 3. 내가 효과 적용할 html 태그에 AOS 속성 넣기 <div data-aos="fade-up"> <p>fade-up</p> </div> 4. html에 body

원문보기 내부링크
Naver Blog

[css 14.] grid 사용하여 레이아웃 배치하기 (사용법, 부모-자식 속성 정리)

grid란? 2차원 방식(가로와 세로 같이 사용)으로 효과적으로 레이아웃 배치할 수 있는 스타일 속성 grid 사용법 부모 요소 (grid-container) display: grid; 또는 display: inline-grid; 자식 요소(grid-item) grid-item 각각 위치 잡아주기 grid 부모요소 속성 그리드 정의 grid 설정 display: grid; inline-grid; grid 행/열 크기와 개수 설정 < 첫번째 방법 > grid-template-columns: 1열값 2열값 …; grid-template-rows: 1행값 2행값 …; 반복되는 경우 repeat 사용 ex) grid-template-columns: repeat(4, 250px) ex) grid-template-columns: repeat(4, 25%) ex) grid-template-columns: repeat(4, 1fr) < 두번째 방법 > grid-template-areas : 그

원문보기 내부링크
Naver Blog

[css 15.] 반응형 웹사이트 만들기 (설정 방법, rem, iframe, video 비율)

반응형이란 ? 웹 사이트가 다양한 디바이스와 화면 크기에 맞게 조정하는 것 반응형 확인하는 방법 웹사이트에서 F12 누르고 버튼 클릭 Responsive 로 되어 있을 때는 크기 조절하여 사이즈 확인하기 Responsive 누르면 기기별 사이즈 확인하여 사이트 확인하기 css 반응형 설정하기 1. html에 작성한 css link 파일 아래에 반응형 css link 파일 추가하기 반응형으로 작업한 파일이 우선순위에서 밀리면 반응형 적용이 안되기 때문에 아래에 작성! (같은 태그에 같은 속성 작성시 아래쪽에 작성한 속성이 적용되는 것 때문) <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/responsive.css"> 2. @media 입력하고 변경하고 싶은 화면 사이즈를 ___ 안에 작성하기 max-width : 1000px 이라 입력한 경우 1000px 보다 작은 사이즈가 되었을 때

원문보기 내부링크
Naver Blog

[ITQ] 시험 원서접수 & 합격기준 & 기출문제 (OA MASTER란?)

ITQ 시험 실기시험만으로 진행 ITQ 시험은 비교적 다른 컴퓨터 관련 시험들보다 난이도가 낮아서 쉽게 취득할 수 있고 공공기관, 대기업, 중소기업, 대학 등 정보기술자격 제도로 ITQ를 채택하여 기본이 되는 자격증으로 필기시험 없이 실기시험만으로 구성되어 있음 ITQ 원서접수 ITQ 원서접수는 KPC 자격 바로가기 ITQ 응시과목 응시과목은 총 8과목이고 1과목만 취득하더라도 국가공인자격이 부여됨 종류 : 아래한글, 한셀, 한쇼, MS 워드, 한글엑셀, 한글액세스, 한글파워포인트, 인터넷 ITQ 합격기준 & ITQ OA MASTER 합격기준 한 과목당 60분 동안 시험 물론 200점 미만이면 불합격이지만... 합격! 불합격! 이 아니라 등급별로 자격을 부여하여 자격증 취득은 조금 더 쉬운듯하다. ITQ OA MASTER ITQ 시험의 성적 우수자를 인정하는 제도로, ITQ 시험에서 3과목 이상 A 등급을 취득하면 OA Master 자격요건이 갖춰지고 신청을 하면 된다. 별도로

원문보기 내부링크
Naver Blog

[GTQ 포토샵] 1급 자격증 시험 핵심정리(+ 단축키)

GTQ 포토샵 1급 photoshop GTQ 포토샵 시험 합격기준 + 기출문제 [GTQ 포토샵] 자격증 합격기준 & 기출문제 GTQ 포토샵 시험 합격기준 1급 기준 - 90분간 시험 - GTQ(4문항) 고급 tool 활용 , 사진편집 응용... blog.naver.com GTQ 포토샵 시험 합격 후기 + 요약정리 [GTQ 포토샵 1급] 100점으로 합격한 후기 (시험 치기 10분전에 읽고 합격하자!!!) 내가 자격증을 따기 전에 제일 먼저 하는 일은 문제 유형이 어떻게 나오는지, 목차가 뭔지 살피는 일 ! 자... blog.naver.com GTQ 포토샵 1급 핵심정리 & 단축키 cs6버전 < 초기설정 > 새 파일 만들기 : ctrl + N - 이름: 수험번호-이름-숫자 - 조건에 맞는 width, height 입력 - 해상도 : 72(ppi) 단위 : px 컬러모드 : RGB 환경설정 : ctrl + K ( 또는 눈금자 더블클릭 ) - 눈금자 : ctrl + R - 그

원문보기 내부링크
Naver Blog

[라이브러리] 애니메이션 효과 animate.css 적용하기 (사용법)

animate.css 라이브러리란? css로 애니메이션을 만들기 위한 라이브러리 다양한 애니메이션 효과를 html 요소에 class를 추가하여 만들 수 있음 animate.css 라이브러리 적용방법 1. animate.css 사이트 접속 바로가기 2. 사이트 아래 있는 css 링크 복사해서 내 html 파일에 붙여넣기 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> 3. 애니메이션 클래스(class) 추가하기 내가 애니메이션 효과 주고 싶은 태그의 class에 animate__animated 와 설정하고자 하는 효과의 class를 복사해서 사용하기 <h1 class="animate__animated animate__bounce">hello</h1> ** animate__animated : 모든 애니메이션 기본 클래스로 애니메이션 활성화 ** a

원문보기 내부링크
Naver Blog

[css 9.] 이미지 background로 설정 + gradient 그라데이션 넣기

css background 범위 background-clip : border-box; padding-box; content-box; 배경을 어디까지 적용할지 지정 (테두리까지, 패딩까지, 컨텐츠까지) css background 이미지 설정 background-image : url( '파일경로' ) 배경 이미지 지정 이미지 사이즈대로 들어가는게 아니라 태그의 크기만큼 들어가기 때문에 width(너비), height(높이) 지정되어있어야 나옴 background-repeat : repeat; no-repeat; 이미지 반복 여부, 방향 지정 ↓ 추가옵션 ↓ repeat-x;(가로 반복) repeat-y;(세로 반복) round;(이미지 자동조절하여 반복) space; (이미지 잘리지 않도록 여백 가지면서 반복) background-position : x위치 y위치; 이미지 위치 지정 x위치 y위치 left top center center right bottom 백분율(%) 백분율(%)

원문보기 내부링크
Naver Blog

[css 10.] 부드러운 효과주는 transition 작성법, 주의사항

transition 뜻 트랜지션 특정 태그에 변화가 생길 때, 변화를 부드럽게 적용(과정을 보여줌)시켜 동적으로 보여주는 효과 transition 작성법 transition : property duration timing-function delay; property (필수) : 적용할 속성(대상) ex) all , width, height duration (필수) : 지속시간 ex) 1s, 2s, ... timing-function : 진행속도 ex) ease, ease-in, linear, ... delay : 지연시간 ex) 1s, 2s, ... ** timing-function 쓰는 방법 ease (기본값) 느린 속도 → 점점 빨라짐 → 느린 감속 (ease-in-out 보다 자연스러움) linear 시작부터 종료까지 일정한 속도 ease-in 느린 속도 → 점점 빨라짐 ease-out 빠른 속도 → 느린 감속 ease-in-out 느린 속도 → 점점 빨라짐 → 느린 감속 (e

원문보기 내부링크
Naver Blog

[라이브러리] swiper.js 슬라이드 사용법, 커스텀, 적용실패이유, 옵션 정리, 반응형

swiper.js 라이브러리란 ? 따로 코드를 만들 필요 없이 swiper.js 의 링크들과 옵션들을 가져와서 쉽고 빠르고 다양한 슬라이드 구현 swiper.js 사용법 1. swiper.js 사이트 접속(Demos) 바로가기 2. 왼쪽 목록에서 원하는 슬라이드 찾아서 [core] 클릭 3. 파일에서 아래 목록들 복사해서 내 html 파일에 붙여넣기 1) css, js 링크 가져오기 - 미리 만들어진 슬라이드 코드들 2) body 안에 swiper 구조 가져오기 - 슬라이드 보이는 부분 3) script 가져오기 - 슬라이드 옵션 부분 4. 파일에서 .mySwiper 부분 영역(width, height) 잡아주고 옵션 변경해주면 완료 ! swiper 기본설정 커스텀하기 버튼 바꾸기 1단계 : 클래스 이름 바꿔주기 ex) swiper-button-next → 내가 원하는 클래스(btn-next) 2단계: 옵션 script 의 nextEl, prevEl 부분 변경해주기 ex) next

원문보기 내부링크
Naver Blog

[css 11.] transform 속성으로 이동, 회전, 확대, 기울이기 효과 (+다중사용)

transform 뜻 변형 css 요소의 크기나 형태, 모양 등 스타일 변형 transform 종류 transform : ____________ translate 이동 x축 + : 오른쪽 y축 + : 아래쪽 ex) transform: translate(10px, 20px); translate(x , y) translateX(x) translateY(y) rotate 회전 왼쪽으로 회전 < 0 < 오른쪽으로 회전 ex) transform: rotate(90deg); rotate(각도deg) rotateX(각도deg) rotateY(각도deg) scale 축소, 확대 축소 < 1 < 확대 ex) transform: scale(1.5); scale(숫자) => 동일 비율 scale(숫자, 숫자) => x, y 각각 설정 scaleX(숫자) scaleY(숫자) skew 기울기 반시계방향 < 0 < 시계방향 ex) transform: skew(30deg, 30deg); skew(xdeg, y

원문보기 내부링크
Naver Blog

[css 12.] js 없이 animation(애니메이션) 적용방법, 속성, @keyframe 설정

css animation "transition"은 요소의 속성 변화에 부드러운 효과라면, "animation"은 요소의 복잡한 동작과 효과를 세밀하게 조절하고 반복이나 상태를 바꿀 수 있다. css animaition 적용 방법 1. 내가 애니메이션 적용할 css 요소 .css요소 { animation: 애니메이션이름 2s; } 속성 animation-name : 이름 지정 (내가 이름 짓기 - 키프레임에 연결하는 부분) animation-duration : 지속시간 (1s, 2s, ...) animation-timing-function : 속도 지정(ease, ease-in, ease-out, ease-in-out, linear) animation-delay : 실행 지연시간 (0.5s, 1s, ...) animation-iteration-count : 실행 횟수 (숫자, 무한반복은 infinite) animation-direction : 진행방향 지정 (normal, reve

원문보기 내부링크
Naver Blog

[css 4.] 웹폰트 적용하기

css 웹폰트 적용하는 방법 기본 폰트가 아닌 내가 원하는 폰트를 적용하는 방법은, 1. 사이트에서 link로 가져오기 2. 직접 다운로드받아서 적용하기 1. 사이트에서 link로 가져오는 방법 <구글폰트> 1. 구글폰트 사이트 (https://fonts.google.com/) 접속 2. 원하는 폰트 선택 후 get font 클릭 3. Get embed code 클릭 4. web 에서 1) link로 가지고 오는 방법 link 3번째 줄 복사해서 head 안에 붙여넣기 적용시킬 태그에 font-family 부분 복사해서 붙여넣기 <link href="https://fonts.googleapis.com/css2?family=Jersey+10+Charted&display=swap" rel="stylesheet"> h1 { font-family: "Jersey 10 Charted", sans-serif; } 2) @import로 가지고 오는 방법 @import 부분 복사해서 css 파일

원문보기 내부링크
Naver Blog

[css 5.] 텍스트 꾸미기 - color, text, font 속성 ( + shadow 적용)

css 컬러(color) 표현방법 1. 색상이름 : 색상 이름으로 표기하는 방법 ex) red, black, green, .... 2. HEX(16진수) : 0~9, a(10)~f(15)를 사용하여 색상 표기하는 방법 # 과 6자리의 16진수로 표시 #RRGGBB 00 이 가장 낮은 값, ff 가 가장 높은 값 ( #000 : 검정색, #fff : 흰색 ) 2자리씩 값이 같을 때는 생략해서 작성할 수 있음 ( #ff00ff = #f0f ) ex) #234567, #f00, ... 3. RGB/RGBA : R(빨강) G(초록) B(파랑) 을 0~ 255 사이 숫자로 지정 하나도 섞이지 않으면 0 가득 섞이면 255 투명도 조절은 alpha(a) 값 : 0~1 (0%~100%) ex) rgb(255,0,0), rgba(0,0,0,0.5), .... 4. HSL/HSLA : h(색상hue) S(채도saturation) L(밝기lightness) 투명도 조절은 alpha(a) 값 : 0~1

원문보기 내부링크
Naver Blog

[css 6.] 박스모델 - content, padding, border, margin

content(내용) + padding(안쪽여백) + border(테두리) + margin (바깥여백) 웹 페이지에서 요소의 크기와 간격 웹사이트에서 박스모델 확인하기 개발자도구 [F12] + 또는 ctrl + shift + C 웹페이지 요소 검사 (개발자도구에서 요소 하나만 선택) Dock side 개발자도구 창의 위치 조절 content(내용) box-sizing: content-box; padding, border 추가했을 때 차이 box-sizing: border-box; width: 100px; height: 100px; background-color: lightblue; padding: 20px; border: 5px solid deepskyblue; - box-sizing : content-box content(width) + padding + border = ??? 너비 지정한 것에서 padding, border 지정한 것만큼 width, height 가 더 커짐

원문보기 내부링크
Naver Blog

**html) block, inline 요소 완벽 정리 + 속성 변경

block(블록)요소 inline(인라인)요소 란? html 태그 각각의 요소들이 가지는 속성 (유형) block(블록)요소 block-level element 한 줄 전체 차지하는 요소 (100%) 너비(width)와 높이(height) 설정 가능 - 크기를 변경해서 100%가 아니더라도 한 줄 전체 차지함 <div> <h1~h6> <p> <nav> <ul> <li> <header > <main> <footer> <form> <section> <video> <table> ... <h1>hello</h1> <p>nahyun</p> < width 줄어들더라도 한 줄 전체 차지 > h1 { width: 200px; background-color: green; } inline(인라인)요소 inline element 내 컨텐츠 영역만큼만 영역 차지 - 나머지 남은 공간에 다른 요소가 올 수 있음 너비(width)와 높이(height) 설정 불가능 <a> <span> <img> <button

원문보기 내부링크
Naver Blog

[css 7.] float 으로 요소 배치하기 - clear 이유

float 이란? 띄우기 html 요소를 띄워서 배치 ( 왼쪽 또는 오른쪽 ) float이 적용된 block 요소가 해당 방향으로 이동 (block을 inline 처럼 배치가능) float: left; float: right; block , inline 헷갈리시는 분은 참고 **html) block, inline 요소 완벽 정리 + 속성 변경 block(블록)요소 inline(인라인)요소 란? html 태그 각각의 요소들이 가지는 속성 (유형) block(블록)요소 ... blog.naver.com float 사용법 아래 그림처럼 빨강박스와 검정박스가 block 요소라 한 줄씩 차지하고 있는데, 서로 옆에 위치시키려면 "나란히 시킬 대상" 에 "float: left;" 설정을 해주면 된다. <div class="box a"></div> <div class="box b"></div> .box { width: 100px; height: 100px; } .a { background-c

원문보기 내부링크
Naver Blog

[css 8.] position 으로 요소 배치하기 + 고정하기

position 뜻 float과 position 모두 "띄운다" 는 뜻인데 float 을 사용했을 때 왼쪽, 오른쪽으로만 배치가 가능했다면, position 을 사용하면 자유롭게 좌표값에 따라 위치를 조절하여 배치가 가능하다. position 종류 static : 기본값 (좌표설정안됨, 원래 위치) relative : 자기 자신 기준으로 좌표 설정 absolute : 웹 브라우저 왼쪽 상단 기준으로 좌표 설정 (부모 relative 있으면 부모 기준) fixed : 웹 브라우저 왼쪽 상단 기준으로 좌표 설정 + 스크롤시 위치 고정 sticky : relative 처럼 배치 → 스크롤시 fixed 처럼 작동 좌표 top, bottom, left, right position : relative 현재 내 위치에서 위치 조정 <div class="container"> <div class="box a">a</div> <div class="box b">b</div> <div class="bo

원문보기 내부링크
Naver Blog

[웹디자인기능사] 필기 & 실기시험 단기 합격 후기

1년에 4번 있는 시험으로 필기, 실기 2개 다 쳐야한다. 책 없이 단기에 취득한 후기는 ..??? 시험문제 시험 관련 정보 & 필기 자료 확인 [웹디자인기능사] 필기 시험 정보 & 핵심 정리 웹디자인기능사 필기시험 시험정보 필기 ( 60문항 객관식 - 60분 - 60점 이상 ) 1. 디자인 일반 2. 인터... blog.naver.com [웹디자인기능사] 필기 기출문제 한번에 다운받기 2016년도부터 2012년도까지 한 번에 다운로드 가능하며 그 이후에 나온 문제들은 공개되지 않아 최신이 201... blog.naver.com 실기 문제 다운로드 & 실기 유형 정리 [웹디자인기능사] 실기 유형별 정리 & 실기문제 다운로드 웹디자인기능사 실기시험 시험정보와 필기시험 정리에 관한 설명은 필기시험 문제 다운로드 실기... blog.naver.com <필기시험> 기출문제만 몇 번 반복해서 정리하면 된다 책 없이 가능 ! 공부하면서 정리해뒀던 필기 정리한 자료는 기출문제보다가

원문보기 내부링크
Naver Blog

[html 2.] html 파일 만들기 & 시맨틱태그로 html 구조짜기 & 특수문자(entity code) 넣기

1. html 파일 생성하기 - 새폴더 하나 생성하기 - 비주얼 스튜디오 코드(visual studio code) 를 열고 새폴더 드래그해서 옮기기 - 새 파일 하나 생성하기 (파일이름 뒤에 .html 붙이기) ex. index.html - html 파일에 ! 입력하고 enter 하기 (HTML 기본 구조를 빠르게 작성) Q. ! enter 는 어떤 기능인가요? HTML 문서의 기본 구조를 빠르게 생성하는 방법으로, <!DOCTYPE html> html 문서다! <html lang="en"> 페이지가 영어로 작성되었다 ! (이 부분은 ko 로 변경해주기) <head> 웹 페이지의 정보, 링크, 표시되지 않는 데이터 <meta charset="UTF-8"> 전 세계 모든 문자를 표현할 수 있는 유니코드 문자 인코딩 방식 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 모바일 최적화 뷰포트 설정 <title>

원문보기 내부링크
Naver Blog

[html 3.] html 텍스트 태그 작성하기 (제목, 내용, 하이퍼링크 걸기)

1. 제목태그 (h1 ~ h6) 제목을 나타내는 태그 (숫자가 커질수록 중요도가 낮음) <body> <h1>제목1</h1> <h2>제목2</h2> <h3>제목3</h3> <h4>제목4</h4> <h5>제목5</h5> <h6>제목6</h6> </body> 2. 내용태그 (p) 문단을 나타내는 태그, 텍스트 단락 구분 ** 줄바꿈 : <br> 태그 <body> <p>안녕하세요<br>저는 000입니다.</p> </body> 3. 하이퍼링크 태그 (a) 다른 웹 페이지(ex. naver.com) 또는 문서간(ex. index.html) 이동을 할 수 있는 태그 ** href = "파일경로, 주소" 필수입력 ** target = "_blank" 새로운 창에서 열기 선택입력 <body> <a href="http://www.naver.com" target="_blank">네이버</a> </body> ** 이미지에 하이퍼링크 넣기 : 텍스트 입력했던 부분에 img 넣기 <body> <a href=

원문보기 내부링크
Naver Blog

[html 4.] html 목록 태그 작성하기 (ul, ol, li, 중첩 ul 구조 파악하기)

1. 목록 태그 (ul, ol) -기호로 나오는 목록의 그룹을 묶을 때 ul (unordered list) -숫자로 나오는 목록의 그룹을 묶을 때 ol (ordered list) -목록 하나하나는 li (list) <body> <ul> <li>MENU</li> <li>MENU</li> <li>MENU</li> <li>MENU</li> </ul> <ol> <li>MENU</li> <li>MENU</li> <li>MENU</li> <li>MENU</li> </ol> </body> ul 이나 ol은 크게 묶는다 ! li 는 목록 하나하나 ! 생각하시면 이해하기 편할 것 같아요 2. 중첩된 목록 태그 (ul li ul li) - 만든 ul li 에서 li마다 SUBMENU 가 있다면 ...??? 첫번째 li 가 닫히기 전에 ul li 작성해주시면 됩니다 : ) <body> <ul> <li>MENU <ul> <li>SUBMENU</li> <li>SUBMENU</li> <li>SUBMENU

원문보기 내부링크
Naver Blog

[html 5.] html 표 만들기 (table 구조 파악하기)

1. 표 만드는 태그 정의 (table 태그) 표를 만들고 구조화하며, 데이터를 행(row)과 열(column)의 형태로 표시 <body> <table> <caption>월별 수당</caption> <thead> <tr> <th>월</th> <th>수당</th> </tr> </thead> <tbody> <tr> <td>1월</td> <td>500,000원</td> </tr> <tr> <td>2월</td> <td>300,000원</td> </tr> </tbody> <tfoot> <tr> <td>합계</td> <td>800,000원</td> </tr> </tfoot> </table> </body> <table> : 표 만들 때 표 전체를 묶는 태그 <caption> : 표 제목 설정 <thead> : 표 머리글 <tbody> : 표 내용(본문) <tfoot> : 표 바닥글 <tr> : 한 줄(행)씩 묶는 태그 <th> : 각 열 제목 하나하나 (thead에 사용) <td> : 데이터 하

원문보기 내부링크
Naver Blog

[html 6.] html에 이미지, 동영상, iframe 넣는 방법 (+유튜브영상 퍼오기)

1. 이미지 넣기 (img 태그) html에 이미지 넣을 때는 img 태그 사용 ** src ="경로" ** alt ="대체텍스트" <body> <img src="images/naver.png" alt="네이버로고"> </body> Q. 대체텍스트는 왜 작성하는건가요? - 이미지 설명 - 스크린 리더 등 시각장애 있는 사용자 지원 - 검색 엔진 (alt 텍스트를 통해 이미지 검색결과 반영) - 로딩 실패 대체 (이미지 로드 안될 경우 텍스트 보임) 2. 비디오 넣기 (video 태그) html에 비디오 넣을 때 video 태그 사용 ** src = "경로" ** controls (재생하는 버튼) ** autoplay (자동재생) ** muted (음소거) ** poster = "경로(썸네일)" <body> <video src="video/pooh.mp4" controls autoplay muted poster="images/poster.png"></video> </body> Q. 왜

원문보기 내부링크
Naver Blog

[html 7.] html에 form 작성하기 (input, select, form 관련 속성 설정)

1. 폼(form) 태그 구조 - <form> : 웹 페이지에서 사용자의 입력을 받기 위해 사용 ** action = "폼 데이터를 제출할 서버, 주소" ** method = "전송방식 get(공개) / post(비공개)" <body> <form action="#" method="post"> <!-- 여기에 form 내용 작성 --> </form> </body> 2. 입력 요소 추가하기 - <fieldset> 태그는 폼 요소들을 그룹화 테두리 (관련된 폼 요소를 그룹으로 묶기) - <legend> 태그를 사용하여 <fieldset>의 제목 설정 <body> <form action="#" method="post"> <fieldset> <legend>필수입력</legend> </fieldset> </form> </body> - <label> 태그는 폼 요소 이름 정의 - label for = input id 일치해야함 (레이블을 클릭했을 때 연결된 입력 필드에 포커스 이동) - <inp

원문보기 내부링크
Naver Blog

[css 1.] css를 html에 적용시키는 방법 (시간 단축해서 css파일 만드는방법)

CSS 적용방법 Cascading Style Sheets html 로 작성한 코드를 css를 통해 적용시킬 때 선택자 { 속성 : 속성값 ; 속성 : 속성값 ; } 선택자 : 태그, 클래스, 아이디, ... 속성 : color, background-color, .... css 연결하는 방법 html 태그에 css 속성 적용시키기 1. html 내 head 에 link로 별도 링크 생성해서 연결하기 [외부스타일] <link rel="stylesheet" href="css파일경로"> 링크 경로만 만들어주면 되는게 아니라 파일이 만들어져 있어야하는데 이 때, 파일을 먼저 만들지 않고 시간을 단축할 수 있는 방법은, 1) "파일경로" 부분에 "css/style.css" 라고 입력하고 그 부분을 ctrl 누르고 클릭 2) 파일이 없습니다 만드시겠습니까? 라고 나오면 [create file] 3) css 폴더와 그 안에 style.css 파일이 만들어진 것을 확인할 수 있어요 ** 아니면 폴더

원문보기 내부링크
Naver Blog

[css 2.] css 작성하기 (선택자, 우선순위, 가상요소 before, after)

css 기본 선택자 전체, 태그, 클래스, 아이디 1. 전체(all) 선택자 : * { 속성 : 값; } ex) * { color : red; } : 모든 태그의 폰트 색깔을 빨강으로 모든 태그 (주로 태그 속성 초기화 할 때 사용) 2. 태그(tag) 선택자 : 태그명 { 속성 : 값; } ex) p { color : red; } : 모든 <p>의 폰트 색깔을 빨강으로 태그명과 일치하는 태그 모두 선택 3. 클래스(class) 선택자 : .클래스명 { 속성 : 값; } ex) .red { color : red; } : red 클래스를 가진 태그의 폰트 색깔을 빨강으로 태그 중 특정 태그 선택 (하나의 html 내에서 동일한 class 여러개 가능!) 4. 아이디(id) 선택자 : #아이디명 { 속성 : 값; } ex) #red { color : red; } : red 아이디를 가진 태그의 폰트 색깔을 빨강으로 태그 중 특정 태그 선택 (하나의 html 내에서 동일한 id 는 하나

원문보기 내부링크
Naver Blog

[css 3.] 다양한 단위 설정하기 - px, %, em, rem, vw, vh

css 단위 설정 종류 px % em rem vw vh 절대단위 픽셀 (px) 기본단위 (어떤 환경에서도 동일한 크기로 보임) 웹브라우저에 다른 단위로 지정해도 px로 환산되어 계산됨 (다른 단위들의 기준!) 상대단위 1. 퍼센트 (%) 부모 요소 크기 기준 상대적 크기 2. em 부모 요소 font-size 기준 상대적 크기 3. rem html 의 font-size 기준 상대적 크기 4. vw / vh (viewport width, viewport height) 뷰포트 너비 / 높이 백분율로 크기 지정 (높이값의 1/100) 단위에 따라 크기가 어떻게 달라질까? 1. 퍼센트 (%) - 부모요소의 크기가 변경되면 해당요소 크기도 변경됨 - 반응형에 사용됨 아빠태그 width : 1000px 아들태그 width : 90% ( = 900px ) 2. em 부모요소의 font-size 에 따라 달라짐 (중첩되어 적용) 할아버지태그 font-size : 2em ( 기본 16px X

원문보기 내부링크
Naver Blog

[GTQi 일러스트 1급] 망한줄 알았던 시험 합격한 후기

처음에 일러스트 시험 신청했을 때는 3문제만 90분안에 그리면 되네 라고 생각을 했는데... 막상 연습해보니 똑같이 해야겠다는 마음에 생각보다 시간이 많이 소요되었다 시험문제 시험 관련 정보 확인 [GTQi 일러스트] 자격증 합격기준 & 기출문제 GTQi 일러스트 시험 합격기준 1급 기준 - 90분간 시험 - GTQi(3문항) BI, CI 디자인 / 비즈니... blog.naver.com 시험에 나오는 유형 BI, CI 디자인 (25점) 패키지, 비즈니스 디자인 (35점) 광고디자인 (40점) 시험문제 풀 때는 3-2-1 순으로 풀었다..! (각 문제별로 텍스트 작성이 있는데 파일 3문제 생성해놓고 텍스트는 모두 작성하고 시작했다) ️ 시험치기 전 10분 정리 노트 ️ 시험장에서 할일 포토샵 시험과 마찬가지로 감독관이 프로그램 제대로 실행되는지 확인하라 할 때 1. reset essential [필수 재설정] 2. 수험번호-이름- 까지 복사[ctrl + c] 해두기 시험 시작

원문보기 내부링크
Naver Blog

[웹디자인기능사] 실기 유형별 정리 & 실기문제 다운로드

웹디자인기능사 실기시험 시험정보와 필기시험 정리에 관한 설명은 [웹디자인기능사] 필기 시험 정보 & 핵심 정리 웹디자인기능사 필기시험 시험정보 필기 ( 60문항 객관식 - 60분 - 60점 이상 ) 1. 디자인 일반 2. 인터... blog.naver.com 필기시험 문제 다운로드 [웹디자인기능사] 필기 기출문제 한번에 다운받기 2016년도부터 2012년도까지 한 번에 다운로드 가능하며 그 이후에 나온 문제들은 공개되지 않아 최신이 201... blog.naver.com 실기시험 시험문제는 아래 파일 24문제 유형 중 하나 나오니 몽땅 다운받아서 확인해보세요 100점 중 60점 이상이면 합격! (유형이 자꾸 늘어나는중 ㅠ_ㅠ) 각종서식 자료실 목록 | Q-net 홈 고객지원 자료실 각종서식 각종서식 각종서식 출제기준 기출문제(기술사) 공개문제 관련법령 국가자격동향지 검색 검색 www.q-net.or.kr 접속한 후 공개문제 => 웹디자인 검색 후 다운로드 시험문제는 24문제

원문보기 내부링크
Naver Blog

[html 1.] visual studio code 활용법(확장프로그램 설치 & 단축키 & 가로스크롤 없애기)

visual studio code 다운받기 ️ 다운로드 링크 바로가기 ️ visual studio code 에서 설치하면 편한 항목 LIST 프로그램 실행시킨 후 네모큐브모양 클릭 Korean Language Pack for Visual Studio Code VS Code를 한국어로 사용할 수 있도록 언어 팩을 제공 Live Server HTML, CSS, JavaScript 등을 실시간으로 브라우저에 반영해주는 툴 파일을 저장할 때마다 자동으로 브라우저를 새로 고침 ( 열기 : alt + L + O ) VSCode AutoSave 파일 저장을 자동으로 수행 Image preview 이미지 파일을 VS Code에서 바로 미리보기 htmltagwrap HTML 태그를 빠르게 감싸는 기능 => alt + W (기본값 p로 감싸도록 되어있음, 설정에서 검색 후 자주 쓰는 걸로 변경가능) Auto Rename Tag 태그의 한 쌍을 수정할 때, 자동으로 일치하는 태그의 이름도 함

원문보기 내부링크
Naver Blog

[공유] 일러스트 정리

파일 다운로드 * 비밀번호가 설정되어 있습니다. * 파일 용량이 커서 분리해서 올려드려요 첨부파일 일러스트.Zip 파일 다운로드 첨부파일 일러스트예제파일1.Zip 파일 다운로드 첨부파일 일러스트예제파일2.Zip 파일 다운로드 일러스트 기초부터 정리해뒀으며 관련된 예제파일 열어서 한 번 활용해보시면 됩니다

원문보기 내부링크
Naver Blog

[공유] notion 으로 10분만에 포트폴리오 사이트 제작하기 (+단축키)

notion을 이용하여 홈페이지처럼 만드는 방법은 생각보다 간단해서 순서대로 천천히 따라해보시면 됩니다 1. notion 홈페이지 회원가입하기 링크 바로가기 2. 페이지 생성하기 + 버튼 또는 페이지 추가 눌러서 페이지 생성한 후 제목 입력하기 3. 커버, 아이콘 변경하기 제목 위 아이콘 추가 , 커버 추가 버튼 눌러서 마음에 드는 것 클릭 ! (아이콘은 사용자 지정, 커버는 업로드에서 내가 원하는 파일 주소로도 가져오기 가능) 4. 목차 만들기 /콜아웃 입력 : 배경과 아이콘 있는 블록 생성 - 배경색은 "/색깔" 적거나 왼쪽 동그라미버튼 눌러서 변경가능 - 아이콘은 아이콘 클릭해서 변경 5. 이미지 넣기 /이미지 입력 : 원하는 이미지 업로드하기 6. 텍스트 입력하기 제목 텍스트 : #붙이고 스페이스바 누르면 제목 생성 ( # 1개 : 제목1 / ## 2개 : 제목2 / ### 3개 : 제목3 ) 묶어서 표시 : 글자 드래그 후 ctrl + E 링크걸기 : 링크 복사 후 글

원문보기 내부링크
Naver Blog

[공유] HTML 정리

파일 다운로드 * 비밀번호가 설정되어 있습니다. * 첨부파일 1. HTML.zip 파일 다운로드

원문보기 내부링크
Naver Blog

[공유] CSS 정리

파일 다운로드 * 비밀번호가 설정되어 있습니다. * 첨부파일 2. CSS.zip 파일 다운로드

원문보기 내부링크
Naver Blog

[공유] JAVASCRIPT 정리

파일 다운로드 * 비밀번호가 설정되어 있습니다. * 첨부파일 3.JAVASCRIPT.zip 파일 다운로드

원문보기 내부링크
Naver Blog

[공유] JQUERY 정리

파일 다운로드 * 비밀번호가 설정되어 있습니다. * 첨부파일 3. jQuery.zip 파일 다운로드

원문보기 내부링크
Naver Blog

[웹디자인&웹퍼블리셔] 강의는?

웹디자인 & 웹퍼블리셔 강의내용 한번에 파악하기 카테고리별 확인해서 공부하세요 c️

원문보기 내부링크
Naver Blog

[웹디자인기능사] 필기 기출문제 한번에 다운받기

2016년도부터 2012년도까지 한 번에 다운로드 가능하며 그 이후에 나온 문제들은 공개되지 않아 최신이 2016년도입니다 파일 다운로드 * 누구나 다운로드 가능합니다. * 첨부파일 필기기출문제모음.zip 파일 다운로드

원문보기 내부링크
Naver Blog

[GTQ 포토샵] 자격증 합격기준 & 기출문제

GTQ 포토샵 시험 실기시험으로만 진행 합격기준 1급 기준 - 90분간 시험 - GTQ(4문항) 고급 tool 활용 , 사진편집 응용 , 포스터 제작 , 웹 페이지 제작 - 70점 이상 합격 2급 기준 - 60분간 시험 - GTQ(4문항) tool 활용 , 사진편집 기초 , 사진편집 , 이벤트 페이지 제작 - 60점 이상 합격 시험일정 GTQ는 1~12월 정기시험 시행 (매월 넷째주 토요일) 기출문제 포토샵 시험 기출문제가 필요하신 분들은 아래 링크에서 최근 기출 6회차 다운로드 받으셔서 공부하세요 !! KPC자격 한국생산성본부 자격에 대한 원서접수 ITQ, GTQ, ERP, IEQ, UTQ, SWC, MAT, SMAT, CAD, 3D CAD 실무능력평가, DSAC, PAC, 데이터 사이언티스트 능력인증자격 ,프레젠테이션 능력, 3D 프린팅 모델링 자격 등을 서비스합니다. license.kpc.or.kr ️ 추가로 더 실습예제가 필요하신 분들은 댓글 남겨주세요

원문보기 내부링크
Naver Blog

[GTQi 일러스트] 자격증 합격기준 & 기출문제

GTQi 일러스트 시험 실기시험으로만 진행 합격기준 1급 기준 - 90분간 시험 - GTQi(3문항) BI, CI 디자인 / 비즈니스디자인 / 광고디자인 - 70점 이상 합격 2급 기준 - 90분간 시험 - GTQi(3문항) 기본 툴 활용 / 오브젝트 / 어플리케이션 디자인 - 60점 이상 합격 시험일정 GTQi는 2, 4, 6, 8, 10, 12월 정기시험 때 시행 (3월, 7월 2회차 추가) 기출문제 일러스트 시험 기출문제가 필요하신 분들은 아래 링크에서 최근 기출 6회차 다운로드 받으셔서 공부하세요 !! KPC자격 한국생산성본부 자격에 대한 원서접수 ITQ, GTQ, ERP, IEQ, UTQ, SWC, MAT, SMAT, CAD, 3D CAD 실무능력평가, DSAC, PAC, 데이터 사이언티스트 능력인증자격 ,프레젠테이션 능력, 3D 프린팅 모델링 자격 등을 서비스합니다. license.kpc.or.kr ️ 추가로 더 실습예제가 필요하신 분들은 댓글 남겨주세요

원문보기 내부링크
Naver Blog

[웹디자인기능사] 필기 시험 정보 & 핵심 정리

웹디자인기능사 필기시험 한국산업인력공단 시험정보 필기 ( 60문항 객관식 - 60분 - 60점 이상 ) 1. 디자인 일반 2. 인터넷 일반 3. 웹그래픽디자인 실기 ( 작업형 - 4시간 - 60점 이상 ) 시험일정 기능사 시험은 1년에 총 4번 기출문제 기출문제는 다운 받아서 풀어보세요 [웹디자인기능사] 필기 기출문제 한번에 다운받기 2016년도부터 2012년도까지 한 번에 다운로드 가능하며 그 이후에 나온 문제들은 공개되지 않아 최신이 201... blog.naver.com 핵심정리 웹디자인기능사 기출문제에 나오는 핵심들을 정리해둔 PDF 자료입니다 파일 다운받기 * 비밀번호가 설정되어 있습니다. * 첨부파일 웹 디자인 기능사 필기.zip 파일 다운로드

원문보기 내부링크
Naver Blog

[GTQ 포토샵 1급] 100점으로 합격한 후기 (시험 치기 10분전에 읽고 합격하자!!!)

내가 자격증을 따기 전에 제일 먼저 하는 일은 문제 유형이 어떻게 나오는지, 목차가 뭔지 살피는 일 ! 자격증 시험은 나오는 유형이 항상 비슷비슷하기 때문에 큰 틀을 알면 공부하기 쉽다 ! 시험문제 시험 관련 정보 확인 [GTQ 포토샵] 자격증 합격기준 & 기출문제 GTQ 포토샵 시험 합격기준 1급 기준 - 90분간 시험 - GTQ(4문항) 고급 tool 활용 , 사진편집 응용... blog.naver.com 시험에서 나오는 유형 1. 고급 tool 활용 (20점) 2. 사진편집 응용 (20점) 3. 포스터 제작 (25점) 4. 웹 페이지 제작 (35점) 시험문제 풀 때는 시간 부족할까봐 4-3-2-1 순으로 품 ..!!! ️ 시험치기 전 10분 정리 노트 ️ 시험장에서 할일 감독관이 프로그램 제대로 실행되는지 확인하라 하면 1. reset essential [필수 재설정] <-- 포토샵 오른쪽 상단에 있음 ! 2. 수험번호-이름- 까지 복사 [ctrl+c] 해두기 시험 시작할

원문보기 내부링크
Naver Blog

[공유] GITHUB로 홈페이지 한 번에 등록하기

github 업로드가 어려우신 분들은 처음부터 차근차근 따라해보세요 <git> 소스코드 인터넷 연결 ( 컴퓨터당 한 번만 하면 됨 !! ) 1. git download 해주기 ️ 링크로 바로가기 ️ 다운로드 파일 열어서 next 만 누르고 설치하기 2. window 환경설정 세팅하기 window => git bash 검색해서 창 열기 git config --global user.name "이름" git config --global user.email "깃허브 아이디" git config --list 입력했을 때 아래쪽에 이름, 아이디 뜨는 것 확인 ex. git config --global user.name "nahyun" git config --global user.email "[email protected]" git config --list git 설정 완료 !!! <github> 소스코드 업로드 1. github 회원가입하기 ️ 링크로 바로가기 ️ github 회원가입(

원문보기 내부링크
1 2