Pixel & Process 픽셀의 디테일과 과정의 기록

1. 태그: 동영상 삽입웹 페이지에 동영상을 재생하기 위한 인라인 요소이다. 브라우저가 해당 영상을 지원하지 않을 때를 대비해 태그 사이에 대체 문구를 작성한다.주요 속성:controls: 재생, 일시정지, 볼륨 등 컨트롤러를 표시한다.poster: 영상 재생 전 보여줄 썸네일 이미지 경로를 지정한다.loop / muted: 반복 재생과 음소거를 설정한다.autoplay: 자동 재생 설정이다. 크롬 등 최신 브라우저에서는 muted가 함께 설정되어야 작동한다.playsinline: iOS 사파리에서 영상 재생 시 전체 화면으로 전환되는 것을 방지하고 페이지 내에서 재생되게 한다.preload: 페이지 로드 시 영상을 미리 다운로드할지 결정한다. (none, metadata, auto)2. 태그: 오디..

1. 태그: 이미지 삽입HTML 문서에 이미지를 넣을 때 사용하는 인라인 요소이다. 닫는 태그가 없는 빈 요소(Empty element)인 것이 특징이다.기본 형식: src 속성 (필수): 이미지의 경로를 지정한다. 같은 서버라면 상대 경로, 외부 서버라면 절대 경로를 사용한다. (프로토콜이 다를 경우 //로 시작하여 프로토콜을 생략할 수 있다.)alt 속성 (필수): 이미지가 보이지 않을 때 대신 나올 텍스트이다. 스크린 리더가 읽어주므로 웹 접근성에 중요하며, SEO(검색 엔진 최적화)에도 영향을 준다.팁: 단순 꾸미기용 이미지라면 alt=""와 같이 비워두는 것이 좋다.2. 지원하는 이미지 형식브라우저에서 주로 사용하는 형식은 다음과 같다.GIF: 애니메이션 지원 (.gif)JPG/JPEG: 사진..

1. 태그 (Anchor)텍스트나 미디어에 URL을 연결하여 하이퍼링크를 만든다. 인라인 요소이지만 자식으로 블록 요소도 포함할 수 있는 특이점이 있다.href 속성: 연결할 주소(URL)를 지정한다.target 속성:_self: 현재 탭에서 열기 (기본값)_blank: 새 브라우저 탭에서 열기title 속성: 마우스 오버 시 나타나는 보충 설명(툴팁)이다.2. 하이퍼링크 활용 팁텍스트 링크: "클릭", "이동하기" 대신 "네이버 바로가기"처럼 목적지를 알 수 있는 키워드를 써야 한다. (SEO 및 접근성 향상)이미지 링크: 태그로 를 감싸며, alt 속성에 이동 경로를 적어준다.전화번호 링크: href="tel:번호"를 사용하여 모바일에서 바로 전화를 걸 수 있다.북마크: 이동할 위치의 태그에 id..

안녕하세요, 디자인 공부를 하고 있는 단미입니다.최근 웹툰 원작을 실사화하는 포스터 디자인 작업을 진행해 보았습니다. 대상은 네이버 웹툰의 입니다. 이번 작업은 대형 인쇄 규격인 700x1000mm 사이즈에 맞춰 고화질 소스를 확보하고,생성형 AI(Adobe Firefly)를 디자인 요소로 어떻게 녹여낼 수 있을지 고민하며 진행했습니다. 1. 디자인 모티브 및 기획원작 웹툰 포스터의 구도와 색감을 현대적인 광고 느낌으로 재해석하는 것을 목표로 삼았습니다.참고 자료: 원작 포스터의 메인 컬러인 핑크/레드와 소주병 소스를 기반으로 하되, 인물 중심의 깔끔하고 트렌디한 레이아웃을 참고했습니다. 사이즈 설정: 실제 포스터 규격인 700x1000mm로 작업하여, 대형 출력물에서도 깨지지 않는 디테일을 확보하는 ..

1. 디자인의 적, 고전 게임의 BMP 포맷현재 진행 중인 '귀혼' 리디자인 프로젝트에서 가장 큰 복병은 바로 리소스 파일의 형식이었습니다. 예전 게임이라 그런지 아이콘부터 캐릭터 소스까지 대부분 .bmp 파일이더군요.웹 디자인 포트폴리오를 만들 때 BMP는 용량이 너무 크고 투명 배경 처리가 안 되어 사용하기 매우 까다롭습니다. 그렇다고 수백 개의 파일을 일일이 포토샵으로 옮기기엔 제 손목과 시간이 너무 소중했습니다.2. "설치 없이 브라우저에서 바로!" 변환 도구 제작파이썬 같은 복잡한 설치 과정 없이, 티스토리 블로그 안에서 바로 파일을 드래그해 변환할 수 있는 HTML/JS 기반의 변환기를 클로드와 함께 만들었습니다.디자이너로서 제가 꼭 필요했던 기능을 담았습니다:무설치 실행: 웹브라우저만 있으면..

1. 태그 (Paragraph)문단을 나타내는 블록 레벨 요소이다.브라우저 기본 스타일이 적용되어, 문단과 문단 사이는 한 줄 간격으로 분리된다.2. 태그 (Horizontal Rule)이야기의 장면 전환이나 구획 내 주제 변경 등, 문단 레벨 요소에서 주제가 분리됨을 나타낸다.블록 레벨 요소이며 브라우저에서는 가로줄로 표시된다.3. 태그 (Preformatted)미리 서식을 지정한 텍스트를 나타내는 블록 레벨 요소이다.HTML 코드에 작성한 내용과 공백 문자가 그대로 유지되며, 브라우저에는 고정폭 글꼴로 표시된다.접근성 고려: 태그로 이미지나 도표를 만들 경우, 분명하고 간결한 대체 설명을 제공해야 한다. , 요소와 id, ARIA 속성을 조합하면 이미지처럼 표현하면서 대체 설명을 제공할 수 ..

웹 디자인 포트폴리오를 준비하고 수업을 들으면서 HTML의 기본 구조와 HTML5의 핵심인 시맨틱 요소를 다시 정리해본다.단순한 코딩을 넘어 구조적인 이해가 우선이다.1. HTML의 기본 골격💡모든 HTML 문서는 아래와 같은 표준 형식을 갖춘다. HTML 본문을 작성합니다. : 문서 형식을 나타내며 첫 줄에 작성한다.: 문서의 시작과 끝이다.: 브라우저에 표시되지 않는 문서 정보(메타데이터)를 포함한다.: 브라우저 화면에 실제로 출력되는 모든 내용을 담는다.2. 작성 시 주의할 특징😀공백과 줄바꿈: 코드 내에서 공백을 아무리 많이 넣어도 브라우저는 한 개의 공백으로만 인식한다. 줄바꿈 역시 공백으로 처리되므로 별도의 태그를 써야 한다.주석 (``): 브라우저는 해석하지 않지만 협업하..

안녕하세요피그마 공부를 하던 중 오토레이아웃, 컴포넌트, 베리언트의 중요성을 깨닫고논리적인 구조와 매커니즘을 확실하게 공부하기 위해 직접 실습 프로그램을 제작하게 되었습니다. ① 시작 — 기본 퀴즈 앱처음엔 오토 레이아웃·컴포넌트·배리언트 개념을 퀴즈로 학습하는 단순한 구조로 시작했습니다. 4지선다 퀴즈 10문제, 정답 시 피드백, 진행도 바, 챕터별 탭 구성이었습니다.② 퀴즈 → 인터랙티브 시뮬레이터로 전환퀴즈 방식이 연습에 불충분하다고 판단해서 방향을 완전히 바꿨습니다.실제 피그마 UI처럼 생긴 3단 레이아웃 (레이어 | 캔버스 | 속성 패널)오토 레이아웃 — Gap·Padding 슬라이더, 방향/Wrap/Align 버튼, 아이템 추가·삭제, 실시간 프레임 반영컴포넌트 — Main 색상 순환, 인스턴..

피그마를 공부하다 보면 오토레이아웃의 사용법이나 배리언트(Variants)의 상태 변화가 머릿속으로 그려지지 않을 때가 많습니다.그래서 직접 값을 바꿔보며 결과물을 실시간으로 확인할 수 있는 간단한 학습 프로그램을 제작해 보았습니다. 🛠 주요 기능 및 학습 포인트1. 실시간 오토레이아웃 시뮬레이션단순히 이론만 보는 게 아니라, 직접 간격(Gap)과 패딩(Padding) 값을 입력하며 요소의 배치를 익힐 수 있게 구성했습니다.2. 컴포넌트 & 배리언트 전환피그마의 컴포넌트 개념을 코드로 치환했을 때 어떻게 작동하는지 구현했습니다. 버튼의 여러 상태를 한눈에 비교해 보세요. 직접 클릭하며 값을 입력해보세요! 프로그램 단독으로 보고싶으시다면 ▼https://jiwon12011.github.io/figma_..

안녕하세요!웹디자인 기능사 실기 시험을 준비하며, 시험 전날과 당일 고사장으로 이동하면서 가볍게 훑어보기 위해 직접 정리한 핵심 필기노트입니다. 이 자료는 제가 시험을 대비하며 스스로 복습하고 실수를 줄이기 위해 제작한 필기노트입니다.그래서 제가 이해하기 편한 방식대로 정리되어 있습니다.💡 코드를 작성하는 방법은 사람마다 스타일이 다를 수 있습니다. 제가 정리한 방식이 정답은 아니므로, 본인이 공부하셨던 방식과 비교해 보시면서 "아, 이 사람은 이렇게 짰구나" 정도로 참고해 주시면 좋을 것 같아요. 때로는 본인과 다른 코드를 보는 것이 개념을 정립하는 데 더 편하실 수도 있으니까요! 하단 파일에는 실기 시험에서 감점 방지를 위해 반드시 기억해야 할 다음 내용들이 포함되어 있습니다.jQuery 메뉴: ..