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

안녕하세요 찐망고입니다.이번에 CSS 레이아웃 수업을 진행하면서 학생들이 개념을 눈으로 직접 보면서 익힐 수 있도록 인터랙티브 강의자료를 만들었습니다.슬라이더로 값을 바꾸면 레이아웃이 실시간으로 바뀌는 방식이라 "이 값이 바뀌면 어떻게 되지?"를 직접 확인하면서 배울 수 있습니다. 강의자료 바로가기 https://jjinmanggo.github.io/frontend-lecture/ Frontend Lecture📏 CSS 단위 px, em, rem, %, vw, vh 등 CSS 단위 개념을 확인해요. 퀴즈jjinmanggo.github.io 수업 구성CSS Grid (9챕터)display: grid / repeat() / fr 단위minmax() / auto-fill vs auto-fitgrid-col..

Figma 수업노트 Auto Layout완전정복 프레임 안의 요소를 자동으로 정렬·배치하는 Figma 핵심 기능 목차 1Auto Layout이란? 2Width / Height 설정 3Hug / Fill / Fixed 4Padding & Gap 5Alignment & Direction 6Wrap 기능 7Frame 중첩 8실전 팁 & 단축키 1 Auto Layout이란? Frame 또는 개체 간의 간격을 자동으로 잡아주는 기능으로, 요소를 추가·삭제해도 레이아웃이 알아서 재배치됩니다. ..

CSS Study Note Background 요소에 배경 색상과 이미지를 자유자재로 다루기 01 — 개별 속성 6가지 background-color 기본값: transparent 배경 색상을 지정합니다. 이미지와 함께 쓸 때 이미지 뒤에 깔립니다. red rgb() #hex transparent background-image 기본값: none 배경 이미지를 지정합니다. 스크린리더가 읽지 못하므로 의미 있는 이미지는 im..

CSS Study Note Position 브라우저 동작 원리를 이해하는 position 완전 정복 01 — 5가지 position 속성 static position 기본값. 일반 문서 흐름(normal flow) 그대로 유지. left/top/right/bottom 적용 안됨. 기본값 flow 유지 방향값 무시 position: static; /* 기본값 */ relative 자신의 원래 위치 기준으로 이동. 원래 자리는 공간 유지. absolute 자식의 기준점 역할로 많이 사용. 자기 기준 공간 유지 기준..

세상에 물건도 많고 정보는 더 많다. 뭘 하나 사려고 해도 비교해야 할 스펙이 수십 가지다 보니, 이젠 쇼핑 자체가 꽤 피곤한 노동이 됐다. 그러다보니 나의 노동을 줄여주는 서비스들을 이용하게 되고그 서비스들은 오히려 비교 분석 할 생각도 줄여준다. 예를 들어 올리브영 세일 알림이 와서 들어가 본다.내가 쓰는 제품이 세일을 안할 수도 있다. 특정한 브랜드보다 제품이 필요한 경우도 있다.'랭킹' 탭을 기웃거린다. "요즘 딴 사람들은 대체 뭘 사나?" 하고 슬쩍,일일히 제품을 분석할 여력은 없고, 남들이 이미 검증해 준 대세 속에서 하나 골라 잡으면 망하진 않겠지 라는 심리 쿠팡도 똑같다. 우리가 쿠팡에서 로켓배송 필터부터 켜고 시작하는 건 단순히 빨라서가 아니다. 물건이 맘에 안 들면 이유 불문하고 바로 ..

예전에는 좋은 물건을 만들고 나서 어떻게 광고할지 고민했는데 지금은 완전히 딴판이다.틱톡이든 인스타든 스레드든, 어디서든 일단 사람들 눈에 많이 띄게 하고그 다음에 제품을 끼워 넣는다.이쯤 되면 얘네가 제조업인지 미디어 회사인지 헷갈릴 정도다. 대기업 자본이 있거나 엄청 유명한 연예인일 필요도 없다.어떤 루트든 사람 눈에 띄어서 내 이름 석 자 알리기만 하면,장사든 사업이든 비약적으로 커질 수 있는 판이 깔려버렸다. 밴드왜건효과(Bandwagon Effect)라는 말이있다.다른 사람들이 많이 구매하거나 지지하는 것을 보고 덩달아 따라서 선택하는 대중적인 동조 심리현상을 뜻한다.입소문에 따라 파이가 커지게 되면 덩달아 구입하거나 사용하는 사람이 많아진다.그렇게 덩치를 키운 브랜드들은 가만 보면 두가지 길..

안녕하세요 찐망고입니다. 하드 코딩을 하지 않는 이시기에 굳이 HTML도 이전처럼 수업을 할 필요가 있나 싶지만 아주 기초적인 레벨이고 검수는 할 정도의 실력을 키우자는 의미로기본구조의 과정을 이틀내로 복습까지 끝내봤는데그래도 기본 문제는 풀어봐야 할 거 같아 만들어본 문제입니다. 재미나이랑 클로드를 이용했고혹시 문제 파일이 아니라 md파일이나 프롬프트가 필요하다면 댓글남겨 주세요! 문제 패턴은 이런 형태고 html파일은 두개이고 20문제씩 풀 수 있습니다. 요즘은 모든 태그를 무작정 외우는 시대는 아닙니다.하지만 화면을 보고 구조적인 아웃라인 설계능력과 검수는 여전히 프론트엔드/퍼블리싱의기본기이자 실력의 차이를 만든다 생각합니다. 이번 퀴즈 세트는 단순 문법 암기를 넘어,실무에서 시맨틱 마크업을 할 ..

사주 AI웹서비스 제작노트 -12사주 AI웹서비스 제작노트 -11사주 AI웹서비스 제작노트 -10사주 AI웹서비스 제작노트 -9사주 AI 웹서비스 제작노트 - 8사주 AI 웹서비스 제작노트 - 7사주 AI 웹서비스 제작노트 - 6사주 AI 웹서비스 제uiweb.tistory.com 오랜만에 써보는 제작노트 열세번째 아무런 바이럴도 안 한 지 꽤 됐는데, 무료 서비스라 그런지 이용자가 들어온다. 보통 웹사이트 체류 시간이 1분도 힘든데평균 5분 넘게 머문다는건 그만큼 내용이 길...🤣🤣 피드백 기능을 넣고 나니 후기가 40개 정도 쌓였는데, 그중 Bad가 세 개 찍혔다 피드백을 주셨으면 어케 고쳐보겠지만.. 뭐, 이김에 업데이트를 또 한번 해봐야지.. 이 서비스의 본질은 결국 신강, 신약과 용신을 ..

안녕하세요 찐망고 입니다. 이전글이 3년전 글이라 다시 써보는 모바일 디자인 단위 설명 포스팅! 모바일 디자인을 위한 해상도와 DPI 이해하기: 안드로이드와 iOS의 차이점안녕하세요 찐망고 입니다.오늘은 안드로이드와 iOS단위에 대해 포스팅해보겠습니다. 1. 해상도란 무엇인가?해상도는 화면에 표시되는 픽셀의 총 개수를 이야기합니다.최신 스마트폰들의 해상uiweb.tistory.com 이전글의 내용을 짧게 말하면 모바일 디자인 시안은 1배율로 잡는게 맞고,실무에서는 iOS는 보통 375×812 또는 393×852, Android는 360×780 정도를 많이 기준으로 본다.다만 정답 해상도가 1개가 있는건 아니고, 현재는 특정기기 해상도보다 반응형 기준 뷰포트를 잡는 방식이 더 중요하다. 화면 밀도(DPI..

보호되어 있는 글입니다.