키자드에 등록된 nahyun_www의 네이버 블로그 포스트 목록

nahyun_www의 등록된 링크

nahyun_www로 등록된 네이버 블로그 포스트 수는 41건입니다.

[라이브러리] 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

[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

[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

[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

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

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

[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 : 그

[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

[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 가 더 커짐

**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

[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

[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

[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 백분율(%) 백분율(%)

[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

[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

[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> : 데이터 하

[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. 왜

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

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

[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 파일이 만들어진 것을 확인할 수 있어요 ** 아니면 폴더

[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 는 하나

[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

[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 파일

[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] 해두기 시험 시작

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

웹디자인기능사 실기시험 시험정보와 필기시험 정리에 관한 설명은 [웹디자인기능사] 필기 시험 정보 & 핵심 정리 웹디자인기능사 필기시험 시험정보 필기 ( 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문제

[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 태그의 한 쌍을 수정할 때, 자동으로 일치하는 태그의 이름도 함

[공유] 일러스트 정리 [내부링크]

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

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

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

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

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

[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>

[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=

[공유] HTML 정리 [내부링크]

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

[공유] CSS 정리 [내부링크]

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

[공유] JAVASCRIPT 정리 [내부링크]

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

[공유] JQUERY 정리 [내부링크]

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

[웹디자인&웹퍼블리셔] 강의는? [내부링크]

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

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

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

[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 ️ 추가로 더 실습예제가 필요하신 분들은 댓글 남겨주세요

[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 ️ 추가로 더 실습예제가 필요하신 분들은 댓글 남겨주세요

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

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

[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] 해두기 시험 시작할

[공유] 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 회원가입(

실시간 검색어