찐망고'S 퍼블리싱그리고디자인

01) Color Range 영역 잡기 - Select > Color Range 02) 레이어마스크 클릭 후 레이어 복사 - Darken모드 03) 조정레이어 흰색 컬럭 제일 아래로 내리기 파일출처 : Unsplash의Teo Zac

01) 조정레이어 solid color 원하는 컬러 선택 - Multiply 02) 레이어마스크에 전체 검정색 채우고 입술부분만 흰색으로 칠하기 03) Blending Option에서 Underlying Layer 슬라이드 반으로 나눠서 조정 04) Properties 패널에서 Feather적용

01) Quick Selection Tool 이용하여 영역 잡기 - 적당히 잡아 준 후 옵션바에서 Select Subject 클릭 02) 레이어복사 ctrl + j 03) 배경레이어에서 복사된 레이어 영역만큼 Expand 30 - Select > Modify > Expand 04) Fill 옵션에서 Content-Aware 선택 후 Ok - Edit > Fill 05) 배경레이어에 Gaussian Blur - Filter > Blur > Gaussian Blur

안녕하세요 찐망고입니다. 오랜만...이라는 글을 언제쯤 안 쓸 수 있을까요? 중요한 건 제 모든 포스팅이 예약 포스팅이라는 겁니다..🤣 오늘은 swiper슬라이더에 관련된 포스팅을 하려고 합니다. 제가 수업예제를 할 때 dbcut이나 gdweb에 올라온 사이트들을 참고하는데요. 늘 업데이트되어있는 사이트를 보고 기본적인 기초 수업이 끝난 후에 반응형 사이트 하나 적응형 사이트 하나를 예제로 같이 만들어봐요. 예제는 일 년에 한 번씩 바꾸는 것 같고요.. 일 년이 넘어가면 유행이 지난 느낌이랄까 ㅎㅎ 하루하루 업데이트된 사이트를 보다 보면 그때그때 유행하는 스타일이나 효과등을 확인할 수 있는데요. 포스팅 주제가 swiper다 보니 슬라이더 위주를 보자면 arrow버튼은 필수고 pagination에 스크롤과..

안녕하세요 찐망고입니다. 오늘은 Visual Studio Code에서 ftp를 설치하여 연결하는 방법에 대해서 포스팅을 시작합니다. 다운로드 주소 링크입니다. https://code.visualstudio.com/Download Download Visual Studio Code - Mac, Linux, Windows Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud..

안녕하세요 찐망고입니다. 오늘은 HTML에디터 관련 포스팅을 해보려고 하는데요~ 일단 에디터를 사용하게 되면 코드를 좀더 깔끔하고 직관적으로 볼 수 있고, 자동완성기능이 있어 코딩하는데 있어 작업이 수월한 장점이 있습니다. 텍스트 에디터, 웹 에디터, 통합개발환경(IDE), 웹기반코드 에디터 로 나눌 수 있겠네요 워낙 많은 에디터들이 있고, 각자 장단점이 있는데 그걸 포스팅하기엔 좀 무리가 있고.. 그나마 제가 사용해봤던 에디터 위주로 포스팅을 해볼게요 1. 서브라임텍스트 서브 라임 텍스트는 파이썬 API 용으로 작성된 사유 크로스 플랫폼 소스 코드 편집기입니다. 수많은 프로그래밍 언어와 마크업 언어를 네이티브로 지원하며, 플러그인을 사용하여 사용자에 의해 기능을 확장할 수 있습니다. 서브라임 텍스트는 ..

안녕하세요 찐망고입니다.오늘은 자바스크립트의 연산자에 대해서 포스팅하도록 하겠습니다. 산술 연산자자바스크립트의 산술 연산자에는 표준 산술 연산자(덧셈, 뺄셈, 곱셈, 나눗셈)가 있습니다.수학에서 배웠던 것처럼 숫자형 값을 계산할 수 있습니다.20 + 10; // 3020 - 10; // 1020 * 10; // 20020 / 10; // 2 덧셈(+) 연산자인 경우에만 문자형에도 사용 가능 하며, 이때는 두개이상의 문자열을 이어 붙일 수 있습니다.예를 들어,let subject = 'javascript';let score = 100;console.log(subject + '과목 성적은 ' + score + '점 입니다.');// javascript 과목 성적은 100점 입니다. 연산자 우선순위에 따라 산..

안녕하세요 찐망고입니다. 수업을 하다 보니 바닐라 JS를 언급하는 친구들이 늘었더라구요 jQuery와 바닐라 JS에 관련하여 포스팅을 해보려 합니다. 자바스크립트는 프론트 사이드에서 꽤나 많이 언급되어 사용되는 언어이자 서버사이드 개발이 가능한 언어랍니다. 물론 프론트 영역에서의 사용이 절대적이기 때문에 자바스크립트를 기반으로 한 프레임워크들이 현재 대세로 자리 잡고 있어요. 페이스북 엔지니어가 제작한 React, 구글 엔지니어가 제작한 Vue, 대규모 애플리케이션에 적합한 Angular 등이 이에 해당합니다. 또 프레임워크라고 하기에는 아주 조금 애매한 감이 있지만 현업 웹 개발에서 많이 사용하는 jQuery도 결국 자바스크립트의 라이브러리 중 하나입니다. jQuery란? 제이쿼리(jQuery)는 오픈..

폼(form)은 불만사항과 다양한 법적 탄원서를 작성하는 작업을 단순화하기 위해, 오랜 시간 동안 존재해왔다. 정보와 정보 처리의 발달에 따라 데이터를 수집하는 수단도 발전하고 있다. 수년간 사용되었던 인쇄된 폼의 디자인에서 몇 가지 팁을 배울 수 있다. 텍스트 필드의 구조 텍스트 필드를 사용하여 사용자는, UI에 텍스트를 입력할 수 있다. 텍스트 필드 컴포넌트 디자인은, 상호 작용을 위한 명확한 어포던스(행동을 유도한다는 뜻으로 행동 유도성이라고도 한다.)를 제공하여, 레이아웃에서 필드를 발견할 수 있게 하고, 효율적으로 폼을 완성하고, 쉽게 접근하도록 해야 한다. 1. Container — 인터렉션할 수 있는 input영역 2. Input text — 입력가능한 텍스트 필드 3. Label Text ..

안녕하세요 찐망고입니다. 오늘은 웹 접근성 관련 포스팅을 해보려고 합니다. 이전 글도 확인하고 올게요~ 2021.07.25 - [마크업/HTML] - 웹 표준,크로스브라우징, 시멘틱마크업에 대한 이해 2021.07.26 - [마크업/HTML] - 웹표준, 시멘틱 마크업?? 웹 접근성에 대해 잘 정의되어있는 사이트의 링크를 걸어볼게요 https://www.w3.org/WAI/fundamentals/accessibility-intro/ko#what 월드 와이드 웹을 창시한 팀 버너스 리는 웹을 “웹의 힘은 보편성에 있으며, 장애에 구애 없이 누구나 손쉽게 접근할 수 있는 공간”으로 정의했다. 또한, W3C에서 만든 웹 접근성 이니셔티브(WAI : Web Accessibility Initiative)에 따르면..