haehaee 님의 블로그

이것저것

ui호버 적용법디폴트에 호버값 디자인 디자인한 디폴트 복붙(페이스트) 붙여넣기 한 디폴트에 호버 추가 호버값에 필요없는거 삭제 (디폴트 옵션 삭제) 디폴트에 필요없는거 삭제 (호버값 옵션 삭제) 디폴트에 커서 트렌지션 자주쓰는 코드중앙정렬position:absolute; text-align: center; top: 50%; left: 50%;transform: translate(-50%, -50%); 디버깅 ai한테 물어보고 못찾아내면 마크업 하나씩 지워보기 아티클을 찾았으면 덩어리 하나씩 지워보기 하나로 안나오면 두개씩 지워보기 css가서 또 하나씩 지워보기 마크업으로 다시 가서 섹션 하나하나 뒤져보기

2026-03-05 (목) HTML5(하이퍼텍스트 마크업 랭귀지 파이브)웹페이지의 뼈대와 의미를 정의이전 버전과 달리 시맨틱 태그를 도입해 문서 구조를 명확히 하고 별도 플러그인 없이 멀티미디어 자체 지원CSS3(캐스케이딩 스타일 시트 쓰리)웹의 시각적 디자인과 레이아웃 담당이전 버전과 달리 미디어 쿼리를 통해반응형 웹을 구현하고플렉스박스 레이아웃 및 자체 애니메이션 지원 2026-03-06 (금) 자바스크립트 자바스크립트는 모든 웹 브라우저가 직접 이해하고 실행하는 유일한 언어로 리액트, 뷰같은 최신 프론트엔드 기술들의 기반이되는 핵심 토대이며 멈춰있는 화면에 생명력을 불어넣어 사용자와 상호작용 하게 만들어줍니다 웹 페이지를 살아 움직이게 하는 동적 프로그래밍 언어버튼을 누르면 팝업창이 뜨거나 이미지 ..

HTML CSS@charset "utf-8";@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');* { margin: 0; padding: 0; list-style: none; box-sizing: border-box; word-break: keep-all; overflow-wrap: break-word; outline: 0px solid silver;}body { font-family: 'Noto Sans KR', sans-serif; font-size: 0.9rem; line-height: 1rem; letter-spacing: 0.1px;}p { line..

1. 작업 순서전체 마크업 구조를 먼저 완성한 뒤 CSS 작업 시작.(섹션별로 마크업 후 바로 해당 스타일 작업하는 방식 노노.)무조건 모바일 먼저 디자인 후 PC(미디어쿼리) 디자인 작업 진행.모바일 : PC의 css 스타일 비중은 약 70 : 30 권장.2. css 스타일 작성 규칙불필요한 공백은 지우고 가독성을 위한 들여쓰기 공백은 넣어주기.클래스명은 직관적으로 바로 알아볼 수 있게 작성.영어 알파벳 대문자 절대 금지.의미 없는 클래스명과 키워드에 해당하는 클래스명 금지.(예: .box, .inner, .wrap2, .small 등)클래스 수 최소화.주석은 꼭 필요한 경우에만 사용.3. 시맨틱 태그 사용address 태그는 반드시 footer 내부에서 주소 정보에만 지정하여 사용하기.(상호명, 전화..

레퍼런스https://studio-jt.co.kr/ 워드프레스 제작 전문 업체 | 스튜디오 제이티 - 개발, SEO, 디자인, 기획을 골고루 잘하는 회사워드프레스 제작 전문 업체 스튜디오 제이티. kakao·아모레퍼시픽·LG 등 다수 기업 프로젝트 수행. iF·Red Dot 어워드 수상. 브랜드 가치를 담는 홈페이지 제작·SEO·UI/UX. 전국 프로젝트 환영.studio-jt.co.kr패딩값 차이 모바일 - % 1~20% 랩탑 - 모바일온리(%)(실무용), 바디를 고정시켜버림(포폴용) 뽀짝한 마우스커서 이미지 같은거 쓰면 이슈가 생겨도 내가 알아서 찾아야함 귀찮은일이 많아져요~ 푸터 맨 밑 기본마진 100px이상 리스트, 테이블, 박스 중 뭐가 최선일까? 리스트는 1~2개 정도로 가벼울때만 3개 이상부..

1. 미래의 나를 믿지 말자지금 모르는 건 미래의 나도 모른다. 나중에 수정하겠다고 미루기보다, 지금 당장 대충이라도 돌아가는 코드를 짜고 메모를 남기는 것이 훨씬 효율적이다.2. 나무보다 숲을 먼저 보자작은 디테일에 집착하다 전체 일정을 망치지 않는다. 일단 전체적인 구조와 큰 그림을 완성한 뒤에 세부적인 디자인과 기능을 다듬는다.3. 마감이 최고의 퀄리티다기간 내에 완성하지 못한 코드는 가치가 없다. 완벽주의보다는 '완성'을 우선순위에 두고, 데드라인을 엄수하는 습관을 들인다.4. 허리 요정의 소리를 듣자건강이 무너지면 코딩도 멈춘다. 의식적으로 허리를 펴고, 스트레칭을 하며 내 몸을 관리하는 것도 개발자의 중요한 실력이다.5. 구조(HTML)가 꼬이면 다 꼬인다집을 지을 때 뼈대가 중요하듯, HTM..

RED-DASH UI font h1 text h2 text h3 text h4 text h5 textp h6 text P TAG - It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal d..

피그마(Figma)는 단축키만 잘 활용해도 작업 속도가 최소 2배는 빨라집니다.효율적인 설계를 위해 반드시 익혀야 할 필수 단축키를 카테고리별로 정리해 드립니다.1. 도구 및 레이어 선택 (Basics)가장 기본이 되는 도구 전환 단축키입니다.기능단축키 (Win)단축키 (Mac)선택 도구 (Move)VV프레임 도구 (Frame)FF텍스트 도구 (Text)TT도형 그리기 (Rect / Circle)R / OR / O펜 도구 (Pen)PP스포이드 (Color Picker)II2. 레이아웃 및 정렬 (Layout)오토 레이아웃은 피그마의 핵심 기능입니다.기능단축키 (Win)단축키 (Mac)오토 레이아웃 적용Shift + AShift + A오토 레이아웃 해제Alt + Shift + AOption + Shift ..

Menu Bar파일 저장, 불러오기, 내보내기, 편집과 같은 기본 명령어들이 모여 있습니다. 여기서 프로젝트 관리와 설정도 할 수 있습니다.이동 도구 (Move Tool)선택한 오브젝트를 자유롭게 이동시킬 수 있는 기본 도구입니다. 디자인 작업 중 가장 자주 사용하는 기능입니다.프레임 도구 (Frame Tool)캔버스에 프레임을 만들어 아트보드처럼 활용할 수 있습니다. 웹이나 모바일 화면 크기에 맞는 작업 영역을 설정할 때 매우 유용합니다.도형 도구 (Shape Tools)사각형, 원, 선 등 다양한 기본 도형을 그릴 수 있습니다. 디자인의 기본 요소를 만드는 데 필수적인 도구입니다.펜 도구 (Pen Tool)자유로운 곡선 및 벡터 경로를 그릴 수 있어서 복잡한 모양의 아이콘이나 일러스트를 만들 때 사용..

MUTE ≡ Silent but Powerful 고요하지만 강력한 흔적 자세히 보기 THE ULTIMATE MANLINESS POWER IN SILENCE MUTE는 단순히 향기를 파는 것이 아니라, 당신의 존재감을 증명하는 보이지 않는 수트를 제안합니다. 고요함 속에 잠재된 폭발적인 에너지를 경험하세요. 한 번의 분사로 세상을 당신의 향기로 채우세요. 브랜드 가이드 CURATED FRAGRANCE HOUSE 당신을 위한 프리미엄 향기 큐레이션 전 세계에서 엄선된 니치 향수부터 트렌디한..