lshjju 님의 블로그

프론트엔드 개발자와 UI디자이너가 모르면 손해 보는 사이트

프론트엔드 개발과 UI디자인을 시작한 분이라면 꼭 알고 있어야 할 사이트를 정리해 보았습니다.도움 되기를 바랍니다. https://blog.naver.com/moolsaess/222771641173 UI디자인 레퍼런스 베스트디자인 레퍼런스 베스트 오랜 기간 국내 및 전세계에서 사랑받고 있는 검증된 UI/UX 디자인 레퍼런스 ...blog.naver.com https://blog.naver.com/moolsaess/222771613098 코딩 레퍼런스 베스트코딩 공부에 도움될 만한 레퍼런스 사이트를 소개합니다. 여기서 소개하는 레퍼런스는 코딩을 하는 사람이...blog.naver.com 개발자에게 유용한 커뮤니티https://cafe.naver.com/hacosa 하드코딩하는사람들 : 네이버 카페웹 기술자..

포토샵 패널 기본 세팅

포토샵을 처음 하는 분들은 워크스페이스 즉, 패널 세팅이 익숙하지 않을 것입니다.잘 모르겠다면 아래 세팅을 추천 합니다. 일단 워크스페이스를 가볍게 세팅해 보겠습니다. 메뉴바 - 윈도우 - 워크스페이스 - 리셋에센셜메뉴바 - 윈도우 - 워크스페이스 - 에센셜 이 설정이 가장 가볍고 기본세팅입니다.더 가볍게 세팅하고 싶다면 이렇게 해보세요.열려 있는 패널중에 레이어패널을 제외한 모든 패널을 다 닫으세요.닫는 방법은 각 패널 우측 상단 햄버거 - 클로즈 or 클로즈탭그룹그러면 화면에 레이어 탭 하나면 남을 것입니다.이제 레이어 패널에 3가지 패널을 추가 하겠습니다.매뉴바 - 윈도우 - 히스토리 - 패널 오픈합니다.패널을 레이어패널에 갖다 붙입니다. 매뉴바 - 윈도우 - 패스 - 패널 오픈합니다.패널을 레이어..

코딩에 필요한 키워드를 카테고리로 정리 했습니다.이 내용을 숙지 한다면 기술면접 준비도 덤으로 할 수 있습니다.도움 되기를 바랍니다.웹 표준 및 핵심 기술HTML5 / CSS3: HTML5는 웹의 구조와 콘텐츠를 정의하는 최신 표준 규격이며, CSS3는 애니메이션, 변형 등 화려한 스타일과 레이아웃을 담당하는 스타일 시트 표준입니다.HTML, CSS, JS의 역할: HTML은 건물의 구조(뼈대), CSS는 인테리어(디자인), JS는 엘리베이터나 조명 스위치 같은 동적인 기능(동작)을 담당하며 서로 보완 관계에 있습니다.Semantic Tag: , 처럼 브라우저와 개발자에게 태그의 의미를 명확히 전달하는 태그로, 웹 접근성과 검색 엔진 최적화(SEO)에 필수적입니다.UTF-8 인코딩: 전 세계 모든 언어를..

index https://lshjju.tistory.com/636 GTQi indexGTQi 로 공부하는 일러스트 매뉴얼 입니다.GTQi Illust Test specifications시험 요강 입니다.정확하게 확인하기 바랍니다.https://license.kpc.or.kr/nasec/qlfint/qlfint/selectGtqinfomg.do KPC자격정보기술자격(ITQ), ERP 정lshjju.tistory.comhttps://lshjju.tistory.com/637 GTQ indexGTQ로 공부하는 포토샵 매뉴얼 입니다.GTQ Photoshop Test specifications시험 요강 입니다.정확하게 확인하기 바랍니다.https://license.kpc.or.kr/nasec/qlfint/qlfin..

웹 디자인에서 요소를 한 줄로 나열하면서도 크기를 자유롭게 조절하고 싶을 때 사용하는 display: inline-block 속성에 대해 알아보겠습니다.이 속성은 이름 그대로 inline의 특징과 block의 특징을 모두 가지고 있는 하이브리드 성격의 속성입니다.1. 주요 특징 (Why use it?)inline-block은 주변 요소들과의 관계에서는 inline처럼 행동하고, 자기 자신의 크기를 결정할 때는 block처럼 행동합니다.한 줄에 나열: block 요소(예: div)와 달리, 줄 바꿈 없이 다른 요소와 같은 라인에 가로로 나열됩니다.크기 설정 가능: inline 요소(예: span)와 달리, width, height, margin, padding 속성을 모두 완벽하게 적용할 수 있습니다.텍스..

이아웃 시스템의 뼈대를 이루는 CSS display 속성에 대해 알아보겠습니다.display 속성은 웹 페이지의 모든 요소가 화면에서 어떻게 보이고, 주변 요소들과 어떻게 배치될지를 결정하는 가장 기초적이면서도 중요한 속성입니다.1. 주요 속성값 (기본 레이아웃)가장 빈번하게 사용되는 네 가지 기본값입니다.block: 항상 새로운 줄에서 시작하며, 가능한 전체 너비를 차지합니다.예: , , , inline: 새로운 줄에서 시작하지 않고 콘텐츠만큼의 너비만 차지합니다.주의: width, height, 상하 margin 설정이 적용되지 않습니다.예: , , inline-block: inline처럼 한 줄에 나란히 배치되지만, block처럼 width, height 및 모든 margin 설정을 가질 수 있습니..

과거 웹 레이아웃의 핵심이었으며 현재도 텍스트 흐름을 제어할 때 요긴하게 쓰이는 CSS Float 속성에 대해 알아보겠습니다.1. 정의 (Definition)float은 사전적 의미로 '뜨다' 또는 **'부풀다'**라는 뜻을 가집니다.CSS에서는 요소를 일반적인 흐름(Normal Flow)에서 벗어나게 하여 부모 요소의 왼쪽(left)이나 오른쪽(right)으로 띄워 배치하는 속성입니다.본래 이 속성은 이미지 주위를 텍스트가 감싸도록 만들기 위해 고안되었습니다.2. 주요 속성값none: 요소를 띄우지 않습니다. (기본값)left: 요소를 부모 컨테이너의 왼쪽에 배치하고, 다른 콘텐츠(텍스트 등)는 그 오른쪽으로 흐르게 합니다.right: 요소를 부모 컨테이너의 오른쪽에 배치하고, 다른 콘텐츠는 그 왼쪽으..

웹 페이지의 시각적 완성도를 결정하는 CSS 배경(Backgrounds) 속성에 대해 알아보겠습니다.배경 속성은 단순히 색상을 칠하는 것을 넘어 이미지를 배치하고, 반복시키고, 고정하는 등 다양한 디자인적 효과를 제어합니다.1. 개별 배경 속성들배경을 세밀하게 제어하기 위한 주요 속성들입니다.background-color: 요소의 배경 색상을 지정합니다.background-image: 배경에 넣을 이미지 경로를 url() 함수로 지정합니다.background-repeat: 이미지의 반복 여부를 결정합니다. (repeat, no-repeat, repeat-x, repeat-y)background-position: 이미지의 시작 위치를 설정합니다. (top, center, bottom, left, right..

웹 페이지에 풍성한 색감과 깊이감을 더해주는 CSS 그라데이션(Gradients) 속성에 대해 알아보겠습니다.그라데이션은 별도의 이미지 파일 없이 CSS 코드만으로 두 개 이상의 색상이 부드럽게 섞이는 효과를 만들어내며, 로딩 속도와 해상도 대응 면에서 매우 효율적입니다.1. 선형 그라데이션 (Linear Gradients)색상이 일정한 방향(직선)으로 진행하며 변하는 방식입니다.구문: linear-gradient(방향/각도, 색상1, 색상2, ...)방향: to right, to bottom left 처럼 키워드를 쓰거나, 45deg 처럼 각도를 직접 지정할 수 있습니다.CSS .linear-box { /* 위에서 아래로(기본값), 파란색에서 분홍색으로 */ background: linear-gra..

**RWD(Responsive Web Design, 반응형 웹 디자인)**란 하나의 웹사이트가 접속하는 기기(PC, 태블릿, 스마트폰 등)의 화면 크기에 반응하여 레이아웃을 자동으로 최적화하는 기술을 말합니다.쉽게 비유하자면, 물을 그릇에 담으면 그릇의 모양에 따라 형태가 변하듯 웹 콘텐츠가 기기의 화면 크기에 맞춰 유연하게 변하는 것이라고 이해하면 쉽습니다.🏗️ 반응형 웹을 만드는 3가지 핵심 요소반응형 웹은 마법처럼 작동하는 것이 아니라, 세 가지 기술적인 약속을 기반으로 만들어집니다.그리드 시스템 (Fluid Grid): 요소를 배치할 때 px 같은 고정 단위가 아니라 %나 vw 같은 상대 단위를 사용합니다. 덕분에 화면이 넓어지면 넓게, 좁아지면 좁게 비율에 맞춰 늘어납니다.유연한 이미지 (Fl..