끄적이는 공간

IT 90

[Javascript] 템플릿 리터럴 작성 방식

템플릿 리터럴 작성 방식이란? 템플릿 리터럴(Template Literal)은 ES6(ECMAScript 2015)에서 도입된 기능으로, 문자열을 보다 유연하게 작성할 수 있도록 도와주는 문법이다. 기존의 문자열 연결 연산자(+) 와 달리, 백틱(`) 을 사용하여 가독성을 높이고 표현식을 간편하게 삽입할 수 있다. 템플릿 리터럴 기본 문법  템플릿 리터럴을 사용하기 위해선 문자열을 감쌀때 큰 따옴표("), 작은 따옴표(')가 아닌 백틱(`)을 사용하면 된다.const msg = `Hello World!`console.log(msg)  표현식에서 템플릿 리터럴 사용하기  기존 방식에서는 문자열과 변수를 연결할 때 '+' 연산자를 사용했지만, 템플릿 리터럴에서는 ${} 안에 변수를 넣으면 자동으로 문자열과 ..

[포토샵] 옷 주름 지우는 법 2가지 - 스팟 복구 브러쉬 도구 사용

일상 생활 및 의류 촬영 등을 할 때 옷이 구겨져 주름이 생긴 상태로 컷이 나오는 경우가 있다. 이때 옷의 주름을 지우는 방법을 소개하고자 한다.  오늘의 작업 이미지는 필자가 운영하는 패션 SNS 계정의 이미지다. 위의 이미지를 확인 해보면 사각 박스로 표시해 둔 상의 부분에 옷의 주름이 있는 부분을 볼 수 있다. 방법은 여러가지가 있는데 여기서는 크게 2가지 방법을 소개 할 예정이다. 첫번째 방법은 '스팟 복구 브러쉬 도구( spot healing brush tool )',두번째 방법은 '주파수 분리 기법' 오늘 소개할 방법은 스팟 복구 브러쉬 도구를 활용한 방법이다.1. 스팟 복구 브러쉬 도구 (spot healing brush tool) [포토샵] 인물 보정 1 - 잡티 제거잡티 제거-잡티 제거 ..

[Javascript] JSON 구조의 데이터를 웹페이지 출력하기

JSON 이란? JavaScript Object Notation의 약자로서, 사람과 컴퓨터가 읽기 쉬운 데이터 교환 형식을 의미한다.가볍고 호환성이 좋아 웹에서 많이 사용된다. JSON 데이터 구조 형식[ { "name": "김민수", "age": 30 }, { "name": "이정호", "age": 20 },]   JSON 데이터 웹페이지에 출력하기이번에 사용 할 JSON 데이터는 테스트 목적이기 때문에 FAKE REST API인 'JSON PLACEHOLDER'를 사용 할 것이다. JSONPlaceholder - Free Fake REST API{JSON} Placeholder Free fake and reliable API for testing and prototypin..

[포토샵] 머리카락이 있는 인물 및 모델 이미지 누끼 따기

배경이 있고, 머리카락을 가진 인물의 누끼를 따는 법을 포스팅하고자 한다. 위의 인물 이미지는 한눈에봐도 배경이 복잡하고, 머리카락도 있기 때문에 일일이 선택해서 누끼를 따기에는 시간이 정~말 많이 소요 된다.  기능을 사용하여 상대적으로 간단하게 누끼를 따보자. 1. 포토샵의 '피사체 선택' 기능을 사용하여 인물의 피사체를 자동 선택 -피사체 선택 기능을 활용해도 아래와 같이 원하지 않는  -피사체 선택 기능을 활용해도 아래와 같이 원하지 않는 영역이 생길 수 있다. 추후 디테일 작업을 해줘도 괜찮고, 이 단계에서 할 수 있는 작업자는 '개체 선택 도구'를 사용하여 작업해도 괜찮고, 대충 정리만 해두고 아래의 단계에서 정리를 해줘도 괜찮다. *필자는 '대충' 어느정도는 제거하고 디테일 한 부분은 아래 ..

[포토샵] 하늘 배경을 가진 복잡한 이미지 쉽게 따서 합성하기 - 혼합 옵션

한 눈에 봐도 누끼 따기엔 어려운 나무와 지상엔 풀들이 있는 이미지다. 이 포스트에선 '레이어 스타일-혼합옵션'을 사용하여 하늘 배경을 제거하고 복잡한 피사체들만 깔끔하게 누끼를 따서 다른 하늘로 합성을 할 수 있는 방법을 성명하고자 한다. ① 레이어 스타일 -혼합 옵션 활용하기 - 레이어 스타일 혼합 옵션 실행  - '혼합 옵션' 레이어 스타일 창에서 혼합 조건 셀렉트 박스를 파랑으로 설정하고 현재 레이어의 우측 화살표를 드래그하여 좌측으로 이동.   -화살표를 이동시키다 보면 이미지의 하늘이 실시간으로 깔끔하게 제거되어 지상의 복잡한 피사체만 자연스럽게 남는다.  - 디테일한 부분은 아래 이미지처럼 혼합 조건에서 이동한 화살표의 절반만  'ALT'를 누른 상태에서 드래그하면 아래 이미지처럼 화살표가 ..

최근 가장 많이 쓰는 폰트 - 한글 폰트 편(링크 포함)

한글 폰트 1. 프리텐다드 (Pretendard)웹과 모바일 환경에서 가독성이 우수하여 많은 디자이너들이 선호하는 산세리프 폰트. 눈누프리텐다드 - 길형진 (orioncactus)noonnu.cc  (출처-눈누)  2. 나눔스퀘어 (NanumSquare)네이버에서 제공하는 무료 폰트로, 깔끔하고 현대적인 느낌을 주어 다양한 디자인에 활용.  눈누나눔스퀘어 - 네이버noonnu.cc (출처-눈누)  3. 지마켓 산스(Gmarket Sans)마켓에서 배포한 폰트로, 굵기와 크기에 따라 다양한 용도로 사용 가능하며, 특히 제목이나 강조 텍스트에 적합  눈누G마켓 산스 - G마켓noonnu.cc (출처-눈누)  4. 고도체온라인 쇼핑몰 고도에서 제공하는 폰트로, 부드러운 곡선이 특징이며 친근한 느낌을 주는 폰트..

Tip 2024.12.27

[포토샵] 맑은 하늘로 합성하기

아래는 필자가 일본 아키하바라 방문 당시 찍은 사진이다. 당시 날씨가 꽤 흐렸는데 이 흐린 날씨인 상태로 SNS에 올리긴 아쉬워서 포토샵으로 하늘을 합성해보고자 한다.  1. 포토샵의 하늘 편집 기능 실행- 경로: 편집-하늘 대체  2. 하늘 대체 기능 창에서 대체하고 싶은 모양의 하늘 선택-하늘 대체 기능 실행시 포토샵에서 자동으로 하늘 영역을 인식하여 하늘이 변경된다.  3. 하늘 조정,전경 조정 기능을 활용하여 하늘 이미지를 적합하게 보정-드라마틱한 보정 작업이라기보다 하늘의 디테일한 사항들을 조정 하는 기능들이다. 4. 하늘 대체 기능이 적용된 이미지 확인.-여기까지 작업해두면 하늘은 맑은 상태로 매우 자연스럽게 합성이 완료 된다. 하지만, 맑은 하늘에 맞게 피사체들도 보정해주는 작업도 필요하다...

[포토샵] 그라디언트를 사용하여 이미지 확대 효과 만들기

쇼핑몰 상세페이지 등을 보면 아래와 이미지 특정 부분을 확대한 효과를 심심치 않게 볼 수 있다.그라디언트 툴로 이 효과를 만들어 보고자 한다.  우선 아래와 같은 사각형 화면을 구성한다.여기서 선택되어있는 하얀색 사각형에 그라디언트 툴을 활용하여 확대 효과를 넣을 것이다.   1. 확대 효과 사각형을 선택 해준다.- 레이어 패널에서 확대효과 사각형 썸네일에 커서를 올려주고 Ctrl+클릭해주면 선택된다.  2.그라디언트 효과 실행 및 옵션 설정-그라디언트 툴을 선택하고 적용을 하기전 옵션을 아래 이미지와 같이 맞춰준다.(이때 아래이미지랑 다르게 반전에 체크된 체크박스는 해제)  3. 그라디언트 툴 적용-사용법은 매우 간단하다. 그라디언트 툴을 선택하고 클릭 후 드래그하면 아래처럼 선택한 영역에 그라디언트 ..

[CSS] CSS 방법론 소개

CSS방법론CSS 방법론은 웹 개발에서 CSS 코드를 구조화하고 관리하는 규칙과 패턴을 제시하는 방법이다.주로 CSS가 복잡해질수록 스타일을 유지보수하고 협업을 용이하게 만드는 데 중요한 역할을 한다.   1. BEM (Block Element Modifier)BEM은 구조화된 클래스 명명 규칙으로, 큰 프로젝트에서 일관성 있게 CSS를 관리할 수 있도록 도와준다.BEM은 CSS 클래스 이름을 블록, 요소, 수정자로 나누어 작성한다.Block: 독립적인 UI 구성 요소 (예: .menu, .header, .card)Element: 블록 안의 구성 요소 (예: .menu__item, .card__title)Modifier: 블록 또는 요소의 상태나 변형 (예: .menu__item--active, .car..

[JQuery] HTML 요소의 'data 속성' 값 가져오는 법.

이전에 순수 자바스크립트로 HTML요소의 data속성 값을 가져오는 포스트를 게시했었다. [Javascript] HTML 요소의 'data 속성' 값 가져오는 법.HTML의 'data' 속성이란? - 사용자 정의 데이터를 HTML 요소에 저장할 수 있는 방법을 제공해주는 속성 - 'data'속성은 접두사를 가진 속성으로, 해당 요소와 관련된 정보를 HTML에서 마크업 할때 사용. ejoroki.tistory.com 자바스크립트의 라이브러리인 제이쿼리로도 htmnl data속성에 쉽게 접근이 가능하다. 'data'속성의 일반적인 형식my key위의 코드에서 data- 접두사 뒤에 붙는 'key'는 작업자가 작명한 이름이고 value는 그에 해당되는 데이터 값이다. 이 데이터값은 HTML 요소에서는 별도로 ..