haehaee 님의 블로그

이것저것

haehaee — Mon, 18 May 2026 11:25:41 +0900

ui호버 적용법

디폴트에 호버값 디자인
디자인한 디폴트 복붙(페이스트)
붙여넣기 한 디폴트에 호버 추가
호버값에 필요없는거 삭제 (디폴트 옵션 삭제)
디폴트에 필요없는거 삭제 (호버값 옵션 삭제)
디폴트에 커서 트렌지션

자주쓰는 코드

중앙정렬

position:absolute;
text-align: center;
top: 50%;
left: 50%;

transform: translate(-50%, -50%);

디버깅

ai한테 물어보고 못찾아내면
마크업 하나씩 지워보기
아티클을 찾았으면 덩어리 하나씩 지워보기
하나로 안나오면 두개씩 지워보기
css가서 또 하나씩 지워보기
마크업으로 다시 가서 섹션 하나하나 뒤져보기

CS트레이닝

haehaee — Fri, 15 May 2026 09:22:10 +0900

2026-03-05 (목)

HTML5
(하이퍼텍스트 마크업 랭귀지 파이브)
웹페이지의 뼈대와 의미를 정의
이전 버전과 달리 시맨틱 태그를 도입해
문서 구조를 명확히 하고
별도 플러그인 없이 멀티미디어 자체 지원

CSS3
(캐스케이딩 스타일 시트 쓰리)
웹의 시각적 디자인과 레이아웃 담당
이전 버전과 달리 미디어 쿼리를 통해
반응형 웹을 구현하고
플렉스박스 레이아웃 및 자체 애니메이션 지원

2026-03-06 (금)

자바스크립트

자바스크립트는 모든 웹 브라우저가 직접 이해하고 실행하는 유일한 언어로 리액트, 뷰같은 최신 프론트엔드 기술들의 기반이되는 핵심 토대이며 멈춰있는 화면에 생명력을 불어넣어 사용자와 상호작용 하게 만들어줍니다

~~웹 페이지를 살아 움직이게 하는 동적 프로그래밍 언어~~

~~버튼을 누르면 팝업창이 뜨거나 이미지 슬라이드가 되는 웹페이지의 모든 움직임과 상호작용을 담당~~

HTML, CSS, JS 역할과 관계 비유
HTML - 식당의 건물, 주방 등 식당 운명에 필요한 뼈대 공간의 역할
CSS - 예쁜 접시, 조명, 벽지같은 가게 분위기를 결정하는 인테리어와 같은 역할
JS - 손님이 다가가면 열리는 자동문, 벨을 누르면 오는 직원처럼 손님의 행동에 맞춰 반응하는 서비스 동작

2026-03-09 (월)

도메인

복잡한 숫자로 되어있는 컴퓨터의 진짜 주소 (IP 주소)를 사람이 기억하기 쉽고 입력하기 쉽게 영어 등의 문자로 바꾼 대표 상호명의 역할

URL

(유니폼 리소스 로케이터)

도메인을 포함한 웹페이지의 주소나 이미지파일의 위치를 알려주는 정확하고 정확하고 구체적인 전체 상세 주소

2026-03-10 (화)

Web hosting

하나의 서버 자원(CPU, 메모리, 디스크 등)을 여러 사용자가 분할하여 공유하는 서비스

Server hosting

웹 호스팅에서 분할해서 사용하던 서버 자원을 단독으로 임대해서 사용하는 서비스

disk

웹 사이트를 구성하는 소스 코드와 미디어 파일이 실제로 저장되는 서버의 물리적 용량

traffic

사용자가 웹사이트에 접속하여 페이지를 열람할때 서버에서 전송되는 데이터의 총량

사용자의 행동으로 발생한 동적 데이터를 구조화하여 저장, 조회, 관리하는 시스템으로 디스크와는 분리된 별도의 데이터 공간

2026-03-11 (수)

웹 사이트 트래픽

호스팅 스펙에서의 트래픽과는 다른 웹 사이트에 방문하는 사람들의 발걸음을 의미

단순히 몇 명이 들어왔는지뿐만 아닌 어디서 왔는지 어떤 페이지를 오래 봤는지 등 모든 발자취를 포함

대표적인 트래픽 분석도구

구글 애널리틱스(GA)로 무료로 사용 가능하며 전 세계에서 사실상 표준도구로 사용되고 있음

사용방법
구글 애널리틱스 사이트에 가입하여 웹 사이트를 등록하고 구글에서 발급해주는 자바스크립트 코드 뭉치를 받아서 HTML에 코드를 삽입하면 사용 가능

2026-03-12 (목)

FTP - File Transfer Protocol

(파일 트랜스퍼 프로토콜)
내 컴퓨터에 있는 파일이나 소스 코드를 안전하게 올리거나 내리기 위한 대용량 파일 전송 규칙

HTTP - HyperText Transfer Protocol

(하이퍼텍스트 트랜스퍼 프로토콜)
웹 브라우저와 서버가 웹페이지의 데이터를 주고 받기 위해 사용하는 기본적인 대화 규칙

2026-03-13 (금)

파일의 절대 경로

(Absolute Path : 앱솔루트 패스)

현재 위치와 상관없이 고정되어있는 파일의 고유 주소

상대 경로

(Relative Path : 렐러티브 패스)

현재 위치를 기준으로 대상 파일의 위치를 알려주는 방식

2026-03-16 (월)

UTF-8

(유니코드 트렌스포메이션 포맷 - 8 (비트)

Unicode Transformation Format - 8

전 세계 표준 문자를 컴퓨터가 알아들을 수 있게 8비트 단위로 변환해 주는 규칙

2026-03-17 (화)

웹폰트

사용자의 컴퓨터나 스마트폰에 해당 폰트 파일이 설치되어 있지 않아도 인터넷을 통해 폰트를 임시로 내려받아 웹페이지를 올바르게 보여주는 기술이다

2026-03-18 (수)

시스템 폰트

윈도우나 맥 등 사용자의 기기에 운영체제에 기본적으로 내장되어있는 폰트

장점 - 웹에서 폰트 파일을 따로 다운로드 할 필요가 없어서 로딩 속도가 빠르고 웹사이트 성능 최적화에 유리하다

단점 - 사용자가 접속한 기기마다 각기 다른 폰트로 보이기 때문에 일관된 디자인을 100% 똑같이 유지하기 어렵다

2026-03-19

이미지 폰트

글자를 진짜 텍스트로 치는게 아닌 디자인된 글씨를 아예 하나의 그림 파일로 만들어서 웹에 띄우는 방식

장점 - 화려하고 복잡한 글꼴이나 특수 효과를 기기나 브라우저 환경에 영향받지 않고 똑같은 디자인으로 보여줄 수 있다

단점 - 검색 엔진이 그림으로 인식해서 검색 노출에 불리하고 유지보수가 힘들다

2026-03-20

TTF - TrueType Font

애플과 마이크로소프트가 함께 만든 표준 폰트 파일 형식

일반적인 문서 작업용(워드, 엑셀 등)

OTF - OpenType Font

마이크로소프트와 어도비가 만든 TTF보다 한 단계 더 진화한 전문가용 폰트 파일 형식

전문가용 고해상도 디자인 작업용

2026-03-23

WOFF - Web Open Font Format
웹 사이트에서 폰트를 빠르게 불러오기 위해 기존 폰트의 용량을 압축한 웹 전용 폰트 파일 형식

웹폰트를 내 웹사이트에 직접 적용할때 사용하고 TTF보다 용량이 훨씬 가볍고 거의 모든 웹 브라우저에서 완벽하게 지원하기 때문에 현재 프론트엔드 실무에서 가장 표준으로 쓰이는 포맷

2026-03-24

em - Parent Relative
자신이 속한 부모 요소의 폰트 크기를 기준으로 배수가 곱해지고 레이아웃이 중첩될수록 크기 관리가 어려움

rem - Root Relative
문서의 최상위 요소 단 하나만 기준으로 삼기 때문에 계산이 직관적이고 실무에 많이 사용됨

2026-03-25

JPG - Joint Photographic Experts Group (조인트 포토그래픽 엑스퍼츠 그룹)
파일 용량을 획기적으로 줄이기 위해 눈에 띄지 않는 이미지의 일부 데이터를 지우는 손실 압축 방식을 사용 (배경을 투명하게 만드는 기능은 지원하지 않음)

모던 웹에서는 화질을 미세하게 포기하는 대신 용량을 확 줄일 수 있어서 색상이 복잡하게 섞인 고해상도 실사 사진이나 웹사이트의 큼직한 배경 사진에 주로 사용한다

2026-03-26

PNG - Portable Network Graphics(포터블 네트워크 그래픽스)
화질을 전혀 훼손하지 않고 원본 데이터 그대로 보존하는 무손실 압축
jpg에 없는 알파 채널기능을 지원해서 이미지 배경을 투명하게 만들 수 있다

웹사이트 상단의 로고, 아이콘, 버튼등 그래픽 요소에 주로 사용한다

2026-03-27

webP

구글이 웹 페이지 로딩 속도를 높이기 위해 만든 이미지 포맷으로 jpg같은 압축과 png같은 투명도를 가졌지만 용량은 훨씬 가벼운 만능 포맷

고화질 상품 사진부터 투명한 로고나 배너까지, 트래픽을 아끼고 화면을 빠르게 띄워야하는 거의 모든 모던 웹 서비스에서 기존 포맷을 대체하여 사용

2026-03-30

SVG

벡터 방식으로 선명함이 유지되고 텍스트 코드로 이루어져 있어 에디터에서 코드로 수정이 가능하며 단순한 도형의 경우 파일 용량이 가볍다

모던 웹에서 웹 아이콘 및 로고에 주로 사용하고 코드로 되어있기 때문에 애니메이션등 동적 효과 제어도 가능하다

2026-03-31

Hex code
빛의 3원색 비율을 16진수 문자로 조합해 총 6자리로 표현하는 웹 표준 색상 코드

#ff0000(빨간색) #000000(검은색)

2026-03-31

RGBA - Red, Green, Blue, Alpha
빛의 3원색에 투명도를 결정하는 알파값을 추가하여 색상을 표현하는 방식
0.0(완전 투명) ~ 1.0(완전 불투명)

rgba(0, 0, 0, 0.5) 검은색에 투명도0.5를 적용하여 반투명하게 만들 수 있다

2026-04-01

semantic tag 중 가장 중요한 7개

<header> - 웹 문서나 특정 구역의 맨 위에 위치하는 로고, 검색창 등의 머리말 영역
<nav> - 사이트 내 주요 메뉴나 이동 링크를 모아두는 네비게이션 영역
<main> - 웹 문서 전체에서 중심이 되는 가장 핵심 콘텐츠 영역 (페이지당 한 번만 사용)
<section> - 연관된 내용들을 하나의 주제로 묶어주는 그룹화 영역
<article> - 뉴스 기사나 블로그 글처럼 독립적으로 떼어내도 의미가 완벽히 통하는 영역
<aside> - 본문 내용과 직접적인 연관성이 적은 사이드바, 배너, 부가 정보 영역
<footer> - 웹 문서 맨 아래에 위치하여 저작권, 연락처 등을 표시하는 꼬리말 영역

2026-04-02

해상도 통계

해상도 통계 1위 - 1920*1080 43.25%
해상도 통계 2위 - 2560*1440 16.08%
리서치 기관 - 스탯카운터
리서치 일자 - 최근 1년

2026-04-06

국내 모바일 웹 브라우저 점유율 순위
1위 Chrome 36.43%
2위 Samsung Internet 25.01%
3위 Safari 22.9%
통계기관 - 스탯카운터
통계일자 - 최근1년

2026-04-07

대한민국 모바일 디바이스 해상도 통계 베스트3
통계 1위 - 414x896 14%
통계 2위 - 384x832 10%
통계 3위 - 360x780 9%
리서치 기관 - 스탯카운터
리서치 일자 - 최근 1년

2026-04-08

mobile only

pc버전을 고려하지 않고 오직 모바일 앱 환경에 모든 기능과 디자인을 집중하는 전략이다.

2026-04-09

RWD (Responsive Web Design - 반응형 웹 디자인)

리스판시브 웹 디자인
하나의 HTML소스로 화면 크기에 따라 레이아웃이 유동적으로 변하는 방식
AWD (Adaptive Web Design - 적응형 웹 디자인)

어댑티브 웹 디자인
미리 정해진 특정 해상도에 맞춰서 준비된 레이아웃을 보여주는 방식

사용자 기기에 맞춰 최적의 화면을 보여준다는 목적은 같지만 구현하는 방법이 다르다
전체적인 틀은 RWD로 잡되 특정 기기에선 아예 다른 기능을 보여줘야할때 AWD방식을 부분적으로 도입하기도 한다

2026-04-10

viewport
웹 페이지가 사용자에게 실제로 보여지는 화면 영역

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2026-04-13

Media Query
기기의 특성에 따라 서로 다른 스타일을 적용할 수 있게 해주는 CSS 모듈

@media screen and (min-width: 1366px) {}

2026-04-14

Native App (네이티브 앱)
특정 운영체제에 최적화된 언어로 개발되어 기기에 직접 설치되는 가장 정석적인 앱
장점 - 속도가 가장 빠르고 하드웨어 기능을 완벽하게 활용하며 사용자 경험이 매우 뛰어나다
단점 - 플랫폼별로 따로 개발해야 하므로 비용과 시간이 많이들고 유지보수가 까다롭다

2026-04-15

Hybrid App (하이브리드 앱)
네이티브 앱의 껍데기 안에 웹 페이지를 담은 웹뷰 기반의 앱 방식
장점 - 한번의 개발로 여러 OS에 배포할 수 있어 경제적이며 웹처럼 실시간 업데이트 가능
단점 - 네이티브 앱보다 구동 속도가 느리고 복잡한 기능, 고사양 그래픽 구현에는 한계가 있다

2026-04-16

모바일 웹 앱
브라우저를 통해 실행되며 앱의 UX를 흉내 낸 모바일 최적화 웹사이트
장점 - 별도의 설치와 심사 과정이 없어 접근성과 유지보수가 매우 뛰어남
단점 - 하드웨어 기능 활용이 제한적이고 네트워크 상태에 따라 성능이 좌우되며 앱스토어 배포가 불가능

2026-04-17

Web Accessibility
웹 접근성은 모든 사용자가 장애 여부와 상관없이 웹 콘텐츠에 접근하고 이해할 수 있도록 보장하는것

2026-04-20

Web Standards

웹 표준은 브라우저나 기기가 달라도 웹사이트가 정상적으로 작동하도록 W3C에서 정한 공식 기술 규격

2026-04-21

웹 표준은 웹 접근성을 높이는 가장 쉽고 확실한 방법으로

웹 표준이 기술적인 약속이라면 웹 접근성은 그 약속을 통해 실현하는 정보의 평등이다

2026-04-22

wireframe (와이어프레임)
색칠하기 전 연필로 밑그림을 그리듯 선과 박스만으로 설계도를 그려서 화면의 구조와 기능을 미리 파악하고 팀원 간의 협업을 원활하게 만드는 역할을 한다

(h1,h2 텍스트로 / 본문은 라인처리 / ui폼은 텍스트로 둔다)

2026-04-23

story board (스토리보드)
와이어프레임에 구체적인 기능 설명과 사용자의 흐름을 더한 최종 기획 문서

2026-04-24

개발명세서
서비스의 기능을 기술적으로 어떻게 구현할지 요구사항과 데이터 처리 규칙을 상세히 기록한 문서

2026-04-27

bootstrap (부트스트랩)
웹사이트 제작에 필요한 디자인 요소(CSS/JS)를 미리 만들어 놓은 프론트엔드 프레임워크

2026-04-28

Vanilla JS (바닐라 자바스크립트)
플러그인이나 라이브러리를 사용하지않고 순수 자바스크립트 기능만 사용하는것으로 웹 개발 실력을 갖추기 위해서 익혀야할 기초

2026-04-29

JS Variable (자바스크립트 베리어블)
자바스크립트 변수는 데이터를 저장하고 이름으로 불러와 사용하기 위한 메모리 상자

var - 똑같은 이름의 상자를 또 만들 수 있어서 실수로 덮어쓸 위험이 크고 요즘은 단점이 많아서 거의 안 쓰이는 추세
let - var의 단점을 보완해서 나온, 값이 변할 수 있는 데이터를 담을때 쓰는 표준 방식
const - 한번 값을 넣으면 절대 바꿀 수 없는 잠긴 상자

2026-04-30

JS data type (자바스크립트 데이터 타입)
자바스크립트가 처리하는 데이터의 형태를 구분하는 기준

크게 기본 타입(Primitive Type)과 참조 타입(Object/Reference Type)으로 나뉜다
기본 타입엔 숫자(Number), 문자(String), 논리(Boolean), 빈 값(Null, Undefined) 등이 있다

2026-05-04

JS null (널)
개발자가 의도적으로 비어있는 상자라고 명시해둔 상태
undefined (언디파인드)
상자(변수)를 만들고 안에 아무것도 넣지 않은 상태

2026-05-06

Control Statement (컨트롤 스테이트먼트)
코드에 생각을 심어주는 제어문

조건문 - 상황에 따라 다른 코드를 실행하고 싶을 때 ( if, else if, else, switch )
반복문 - 똑같은 일은 여러 번 시키고 싶을 때 ( for, while, do...while )

2026-05-07

JS Function (함수)
특정한 목적의 작업을 수행하기 위해 독립적으로 설계된 코드의 집합으로 반복되는 코드를 하나로 묶어둔 코드뭉치 또는 기계

2026-05-08

Parameter (파라미터)
매개변수는 함수 내부에서 사용하기 위해 정의한 변수 이름

Arguments (아규먼트)
인수는 함수를 실행할때 실제로 넘겨주는 구체적인 값

2026-05-11

JS Object (오브젝트)
객체는 관련 데이터와 기능을 하나로 묶어놓은 종합 데이터 주머니

2026-05-12

JS Method (메소드)
객체의 프로퍼티중 값이 함수인것

2026-05-13

JS Property (프로퍼티)
객체의 특징을 나타내는 키(데이터의 이름표)와 값(실제 저장된 데이터)의 한 쌍을 말한다

2026-05-14

JS Built-in Object (빌트인 오브젝트)
자바스크립트가 기본적으로 제공하는 내장 객체

2026-05-15

JS BOM (브라우저 오브젝트 모델)
웹 브라우저의 기능들을 객체로 만들어서 제어할 수 있게 만든 모델

2026-05-18

JS DOM (도큐먼트 오브젝트 모델)
HTML문서를 브라우저가 이해할 수 있도록 객체 형태로 바꾼 모델

2026-05-19

OOP (Object-Oriented Programming) (오브젝트 오리엔티드 프로그래밍)
객체 지향 프로그래밍은 프로그램을 독립된 객체들의 조립식 모음으로 만드는 프로그래밍 방식

CSS, HTML Default 코드

haehaee — Wed, 13 May 2026 12:07:04 +0900

HTML

<!doctype html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
  <meta name="keywords" content="hae">
  <meta name="description" content="hae">
  <meta name="author" content="hae">
  <title>----hae----</title>
  <link rel="stylesheet" href="style.css">
  <style type="text/css"></style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="script.js"></script>
  <script type="text/javascript"></script>
</head>

<body>


    
</body>
</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-height: 1rem;
}

button {
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 8px 25px;
  border: 1px solid black;
  background: none;
  transition: 0.3s;
}

button:hover {
  cursor: pointer;
}

/* mobile start */



/* pc start */
@media screen and (min-width: 1366px) {



}

퍼블리싱 / 프론트엔드 코딩 체크리스트

haehaee — Fri, 8 May 2026 17:21:27 +0900

1. 작업 순서
전체 마크업 구조를 먼저 완성한 뒤 CSS 작업 시작.
(섹션별로 마크업 후 바로 해당 스타일 작업하는 방식 노노.)
무조건 모바일 먼저 디자인 후 PC(미디어쿼리) 디자인 작업 진행.
모바일 : PC의 css 스타일 비중은 약 70 : 30 권장.

2. css 스타일 작성 규칙
불필요한 공백은 지우고 가독성을 위한 들여쓰기 공백은 넣어주기.
클래스명은 직관적으로 바로 알아볼 수 있게 작성.
영어 알파벳 대문자 절대 금지.
의미 없는 클래스명과 키워드에 해당하는 클래스명 금지.
(예: .box, .inner, .wrap2, .small 등)
클래스 수 최소화.
주석은 꼭 필요한 경우에만 사용.

3. 시맨틱 태그 사용
address 태그는 반드시 footer 내부에서 주소 정보에만 지정하여 사용하기.
(상호명, 전화번호 등에 부모요소로서 같이 사용하지 않기)
예시:
<footer>
<address>서울특별시 ...</address>
<div>010-1234-5678<div>
</footer>

4. CSS 작성 규칙
작성 순서 통일.
CSS는 마크업 순서와 우선순위에 맞춰 작성.
권장 순서:
.sample {

/* size */
width: 100%;
height: 50px;

/* color */
color: #111;
background: #fff;

/* box model */
margin: 0;
padding: 0;

/* layout */
display: flex;
justify-content: center;
align-items: center;

/* etc */
border-radius: 8px;

/* hover */
transition: 0.3s;
}

5. 반응형 단위 규칙
텍스트: rem 사용.
이미지 및 고정 요소: px 사용.
(vh 단위는 제어가 까다로우므로 필요한 경우에만 사용)

6. 리스트 / 테이블 사용 기준
table: 데이터성 콘텐츠에 사용 (게시판, 표 형태 데이터 등)
list (ul, ol): 단순 나열형 UI에 사용, 한 줄 또는 반복 구조 UI에 적합

7. 리스트 활용 방식
li 내부에 a, div 등을 자유롭게 활용 가능
예시:
<ul>
<li>
<a href="#">
<span>메뉴</span>
</a>
</li>
<li>
<div class="card">
내용
</div>
</li>
</ul>

----------------------------
핵심 요약
마크업 완료 후 CSS 작업
모바일 퍼스트
클래스 최소화 + 직관적으로 작성
CSS 순서 통일
텍스트는 rem, 이미지는 px
address는 주소에만 사용
데이터는 table, UI 나열은 list
불필요한 공백/주석 최소화

1. 큰태그에서 작은 자식 구분해주기.
2. 섹션안에 섹션 금지.
3. 아티클 안에는 섹션 최소한만.
4. css에서 디폴트 태그와 디자인 태그는 주석으로 구분해주기. (/*디자인*\, /*어사이드*\, /*버튼*\ 등)
5. 폼 태그는 테이블 추천 하지만 ,어려우니 디브로 작성하기.
6. 푸터에 섹션, 아티클, 네브 노노!! 디브&li 사용하기.
7. 아티클 외부에서 섹션 금지!!!!
8. 스팬, 제트 인덱스, 앱솔루트는 진짜 사용할일 없다.

HC-12 스튜디오 JT

haehaee — Fri, 8 May 2026 11:59:30 +0900

레퍼런스

https://studio-jt.co.kr/

워드프레스 제작 전문 업체 | 스튜디오 제이티 - 개발, SEO, 디자인, 기획을 골고루 잘하는 회사

워드프레스 제작 전문 업체 스튜디오 제이티. kakao·아모레퍼시픽·LG 등 다수 기업 프로젝트 수행. iF·Red Dot 어워드 수상. 브랜드 가치를 담는 홈페이지 제작·SEO·UI/UX. 전국 프로젝트 환영.

studio-jt.co.kr

패딩값 차이
모바일 - % 1~20%
랩탑 - 모바일온리(%)(실무용), 바디를 고정시켜버림(포폴용)

뽀짝한 마우스커서 이미지 같은거 쓰면 이슈가 생겨도 내가 알아서 찾아야함
귀찮은일이 많아져요~

푸터 맨 밑 기본마진 100px이상

리스트, 테이블, 박스 중 뭐가 최선일까?
리스트는 1~2개 정도로 가벼울때만 3개 이상부턴 박스로 하는게 좋음
테이블은 데이터를 다룰때 쓰기
결론 박스로 하는게 편하다!

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <meta name="keywords" content="studio-jt">
    <meta name="description" content="studio-jt">
    <meta name="author" content="studio-jt">
    <title>studio-jt</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>

<body>

    <header>
        <div class="logo">
            <span>S</span>
            <span>T</span>
            <span>U</span>
            <span>D</span>
            <span>I</span>
            <span>O</span>
            <span class="blue-wave">〰</span>
            <span>J</span>
            <span>T</span>
        </div>
        <h4>아름답고 유용하며 의미있는 <span class="typings" id="typings"></span></h4>

        <div class="menu-wrapper">
            <div class="menu-text">menu</div>
            <div class="hamburger">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>

    </header>

    <main>
        <article class="homep">

            <section>
                <p>SANC 기업 대표 홈페이지</p>
            </section>

            <section>
                <p>OKSURO PROMRT</p>
            </section>

            <section>
                <p>KAKAO 대표 홈페이지 UI/UX 개편</p>
            </section>

            <section>
                <p>퓨리토 서울</p>
            </section>

            <section>
                <p>2025 뭘 좀 아는 사람들 캠페인</p>
            </section>

            <section>
                <p>꼬띠샵</p>
            </section>
        </article>
    </main>


    <article class="projt">
        <p>스튜디오 제이티는 매 프로젝트를 ‘기준을 올리는 과정’으로 바라봅니다. <br />
            브랜드 경험 디자인, UI/UX, SEO, 워드프레스 CMS 제작 전 영역에서 우리는 내부 기준을 한 단계 더 높이고, 그 원칙을 흔들림 없이 지켜냅니다. 이 철학이 우리가 말하는
            ‘제이티스러움’을 완성합니다.</p>

        <a href="#">우리의 프로젝트 더 보기 <span>➜</span></a>

    </article>

    <article class="awardjt">
        <h2>주요 수상 내역</h2>
        <div>
            <section>
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fy1pLs%2FdJMcaaLWCBE%2FAAAAAAAAAAAAAAAAAAAAAGGEYTrXpy7A4dsi6H-RnLSgdV6jfbUoOZHC3NOAD5qb%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DVJAQbg1lB23H2a4xmTWGCU3V8pg%253D">
                    <div>
                        <p class="awardmain">OKSURO</p>
                        <div>

                            <p>Communication & website / Winner</p>
                            <p>Winner</p>
                        </div>

                    </div>
            </section>

            <section>
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fy1pLs%2FdJMcaaLWCBE%2FAAAAAAAAAAAAAAAAAAAAAGGEYTrXpy7A4dsi6H-RnLSgdV6jfbUoOZHC3NOAD5qb%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DVJAQbg1lB23H2a4xmTWGCU3V8pg%253D">
                    <div>
                        <p class="awardmain">웅진씽크빅 SUPERPOT ENGLISH</p>
                        <div>

                            <p>User Experience UI</p>
                            <p>iF DESIGN AWARD</p>
                        </div>
                    </div>
                </div>
            </section>

            <section>
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkEQ2n%2FdJMcaaLWCBF%2FAAAAAAAAAAAAAAAAAAAAAFacXXiSKV2UlWKzEQm2B7kKnbhJ6c1N0mFXLx0b6oKS%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DMpJuvYXe26b2wgJqtqIVQvLORTw%253D">
                    <div>
                        <p class="awardmain">브로앤팁스</p>
                        <div>
                            <p>Reddot winner 2020 Brands & Communication</p>
                            <p>BEST OF THE BEST</p>
                        </div>
                    </div>
                </div>
            </section>

            <section class="lastborder">
                <div>
                    <img
                        src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FkEQ2n%2FdJMcaaLWCBF%2FAAAAAAAAAAAAAAAAAAAAAFacXXiSKV2UlWKzEQm2B7kKnbhJ6c1N0mFXLx0b6oKS%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DMpJuvYXe26b2wgJqtqIVQvLORTw%253D">
                    <div>
                        <p class="awardmain">필보이드</p>
                        <div>

                            <p>Reddot winner 2020 Brands & Communication</p>
                            <p>Winner</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        <a href="#">수상내역 전체보기 <span>➜</span></a>

    </article>

    <article class="storyjt">
        <h2>제이티 이야기</h2>
        <div>
            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbmgMx8%2FdJMcah5nkFs%2FAAAAAAAAAAAAAAAAAAAAABkq3VCtWRbxT4GiyoF_t1w00JZsgzWUtRgXc9IpHLku%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DTo0fgl5O0Mgxxyko%252FcgBCS5qjos%253D">
                <p>GEO란 무엇인가: 생성형 AI가 출처를 선택하는 방식</p>
                <a href="#">view more <span>➜</span></a>
            </section>

            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FWsAAk%2FdJMcah5nkFu%2FAAAAAAAAAAAAAAAAAAAAAKhrNMwJ2XjixB8OfVBdwtAVeXs9zrU-ACQ1WLjNXfnE%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DM%252BfDnAOEc6lSdSmrpBQ6%252FojQCcs%253D">
                <p>스튜디오 제이티 디자인팀도 즐겨쓰는 저작권 걱정 없는 무료 이미지 사진 사이트 BEST5+</p>
                <a href="#">view more <span>➜</span></a>
            </section>

            <section>
                <img
                    src="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FSCh6T%2FdJMcah5nkFt%2FAAAAAAAAAAAAAAAAAAAAAI357fIYzSXJgGv7rPG1sI0OSdQ_jOzYWQ_CQSRkXkdJ%2Fimg.png%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D%252FapEA3fsaZ5JXeZcoJ9cOEmtEKA%253D">
                <p>AI 검색 최적화를 위한 ai.txt 및 llms.txt 설정 가이드 (초보자용 SEO/AEO/GEO)</p>
                <a href="#">view more <span>➜</span></a>
            </section>
        </div>
        <a href="#">제이티 이야기 전체보기 <span>➜</span></a>


    </article>

    <footer>
        <article>
            <section class="foobtn">
                <button>AI 이미지</button>
                <button>프로젝트 의뢰하기
                </button>
            </section>

            <section class="fooadr">
                <h4>BUSAN OFFICE</h4>
                <p>
                    부산광역시 해운대구 센텀서로30,
                    knn타워 26층 <br />
                    010-8542-4711<br />
                    contact@studio-jt.co.kr</p>
                <img
                    src="https://blog.kakaocdn.net/dna/bu1I08/dJMb990A5L6/AAAAAAAAAAAAAAAAAAAAADx3vhdRSDIJVI07_blo_NvWTGroVwqbFA8PTyyIsSKn/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=V1t2HQ1MhCgj46ANc0L2ySOlvPU%3D">
            </section>
            <hr>
            <section class="foosns">
                <img
                    src="https://blog.kakaocdn.net/dna/dEznu9/dJMcaf7wjih/AAAAAAAAAAAAAAAAAAAAAL30TqYNn9tT3COkz_phHozaSlPlJKleJG34CxVt0bQ9/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=Uwzst61LzB3tG32Bc2bhJdz%2FIBs%3D">
                <img
                    src="https://blog.kakaocdn.net/dna/d99Zhg/dJMcagk31f2/AAAAAAAAAAAAAAAAAAAAAPwLIFXd28zT3cnBFEEXaYzsFfwSSlsAvEnXiDqSwsRg/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=K5LlvffYGMaf6hbDbpjNTNYaQxY%3D">
                <img
                    src="https://blog.kakaocdn.net/dna/So6Hr/dJMcaffrHkz/AAAAAAAAAAAAAAAAAAAAAEGYXBrWKIlIgTccAYDwH9QBy7PMDtcPG0c0FqKJabcb/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=uevwB2NNsFlj%2BKVCrWNzkyvgvfg%3D">
                <img
                    src="https://blog.kakaocdn.net/dna/cmpcnq/dJMcabjNVtv/AAAAAAAAAAAAAAAAAAAAAJxMB_ko37L9gbA13EIHYP-bQYA_ETo9fim1BOK0PRFQ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=0VOMP%2FeC74d6d97FRntQG20EATU%3D">
            </section>
            <p>COPYRIGHT 2012-2026 STUDIO-JT. ALL RIGHTS RESERVED.</p>
        </article>
    </footer>

    <script>
        //노출될 문구 리스트
        const texts = [
            "UX / UI 디자인",
            "홈페이지 제작",
            "워드프레스 제작",
            "브랜드 경험 디자인",
            "검색엔진최적화(SEO)"
        ];
        //typings를 찾아와서 여기에 글자를 써라
        const typingElement = document.getElementById("typings");

        let textIndex = 0;
        let charIndex = 0;
        let isDeleting = false;

        function type() {
            const currentText = texts[textIndex];

            if (isDeleting) {
                typingElement.textContent = currentText.substring(0, charIndex--);
            } else {
                typingElement.textContent = currentText.substring(0, charIndex++);
            }

            let speed = isDeleting ? 50 : 100;

            if (!isDeleting && charIndex === currentText.length + 1) {
                speed = 1500;
                isDeleting = true;
            }

            if (isDeleting && charIndex === 0) {
                isDeleting = false;
                textIndex = (textIndex + 1) % texts.length;
                speed = 500;
            }

            setTimeout(type, speed);
        }

        type();
    </script>

</body>

</html>

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');

/* .montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.noto-sans-kr {
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
} */

/* 스마트폰
540

테블릿
754

랩탑-테블릿 가로모드 경계
1024

랩탑
1445

QHD, 4K
1785

1400부터 푸터 백그라운드 픽스
모바일 390 랩탑 1920 최적화

5/13 코드리뷰
금월화 */
* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    outline: 0px solid silver;

}

a:hover,
button:hover,
.hamburger:hover,
.projt a:hover,
.awardmain:hover,
.awardjt a:hover,
.storyjt section img:hover,
.storyjt section a:hover,
.storyjt>a:hover,
.foobtn :nth-child(1):hover,
.foobtn :nth-child(2):hover,
.foosns img:hover {
    cursor: url('https://studio-jt.co.kr/wp-content/themes/studio_jt/images/layout/cursor-hand.png'), auto;
}

body {
    font-family: 'Montserrat', 'Noto Sans KR' sans-serif;
    font-size: 1rem;
    line-height: 1rem;
    letter-spacing: 0.1px;
    color: #000;
    cursor: url("https://studio-jt.co.kr/wp-content/themes/studio_jt/images/layout/cursor-pointer.png"), auto;
}

a:link {
    color: #000;
    text-decoration: none;
    display: block;
}

a:visited {
    color: #666;
}

a:hover {
    color: blue;
}

a:focus {
    color: blue;
}

a:active {
    color: blue;
}

h1,
h2,
h3,
h4 {
    font-family: 'Noto Sans KR', sans-serif;
}

h1 {
    font-size: 2rem;
    line-height: 4rem;
    text-transform: uppercase;
}


h2 {
    font-size: 1.8rem;
    line-height: 3rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.6rem;
    line-height: 2rem;
}

h4 {
    font-size: 1rem;
    line-height: 2rem;
}


p {
    line-height: 1rem;
}

button {
    font-size: 0.8rem;
    text-transform: uppercase;
    padding: 12px 15px;
    border: 2px solid #fff;
    border-radius: 3px;
    background: white;
    transition: 0.2s;
}

button:hover {
    background: none;
    border: 2px solid #fff;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}



/* mobile start */


header {
    position: relative;
    width: 100%;
    height: 100px;
    padding: 25px 3%;
    margin: 0 0 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    width: 60px;
    height: 60px;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.8rem;
    font-weight: 600;
}

.logo span {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 33.33%;
    height: 20px;
}

.blue-wave {
    color: blue;
    font-weight: bold;
    font-size: 0.7rem;
}

header h4 {
    position: absolute;
    bottom: -50px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
}

.typings {
    border-right: 3px solid white;
    padding: 0 5px;
    white-space: nowrap;
    overflow: hidden;
    animation: blink 0.7s infinite;
    color: blue;
}

.menu-wrapper {
    display: flex;
    line-height: 3.5rem;
    gap: 10px;
}

.menu-text {
    display: none;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
}

.hamburger {
    width: 23px;
    height: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    align-items: flex-start;
}

.hamburger span {
    height: 2px;
    background-color: #333;
    transition: 0.2s;
}

.hamburger :nth-child(1),
.hamburger :nth-child(3) {
    width: 100%;
}

.hamburger :nth-child(2) {
    width: 60%;
}

.hamburger:hover :nth-child(2) {
    width: 100%;
}



.homep {
    margin: 0 4%;
}

.homep section {
    position: relative;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    margin: 70px auto;
}

.homep p {
    position: absolute;
    display: flex;
    bottom: -30px;
    font-weight: 500;
}

.homep> :nth-child(1) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fcdet5Y%2FdJMcaiiSDWO%2FAAAAAAAAAAAAAAAAAAAAAM1udNcEEteUUUiGs0FTF6SZtCqPLHfroujk5ScY-loQ%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D%252BC7sqh8tJUwdLY29PG7rU3rhZWA%253D) no-repeat;
    background-position: center;
    background-size: cover;
}

.homep> :nth-child(2) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FcBugUm%2FdJMcaaLWCBK%2FAAAAAAAAAAAAAAAAAAAAAJHJVh7im1B8aTeDRdNU3oAK6bJWbHcI0XBsUdQ5WyuR%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D6upRa%252BgJIIWWIB22WIme89xjQrE%253D) no-repeat;
    background-position: center;
    background-size: cover;
}

.homep> :nth-child(3) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FciZtEW%2FdJMcajaZVxr%2FAAAAAAAAAAAAAAAAAAAAABXzMEmxoEaxbZWXeqxRq-EDjDvCFaBimPL664uS-1Ev%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D0c04SUj5qblF6NGPwUIL%252B7D6GtA%253D) no-repeat;
    background-position: center;
    background-size: cover;
}

.homep> :nth-child(4) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2FbnaD9O%2FdJMcajaZVxs%2FAAAAAAAAAAAAAAAAAAAAAEnSsbL4xDNAssOBUyVgUqtBbi0r7w_wB17FsgPRzQYX%2Fimg.jpg%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3D0OslZuHMMUs%252BtmH%252FyzhhPaSQii0%253D) no-repeat;
    background-position: center;
    background-size: cover;
}


.homep> :nth-child(5) {
    background: url(https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdna%2Fbcbe5Z%2FdJMcaiiSDWR%2FAAAAAAAAAAAAAAAAAAAAAEHQIuUB6LfGasgOT5ilO3UHLqN38SqrsF58_8t3ryMB%2Fimg.webp%3Fcredential%3DyqXZFxpELC7KVnFOS48ylbz2pIh7yKj8%26expires%3D1780239599%26allow_ip%3D%26allow_referer%3D%26signature%3DK%252BKS5EgvcUVHlco%252BWWME6DVnXiY%253D) no-repeat;
    background-position: center;
    background-size: cover;
}


.homep> :nth-child(6) {
    background: url(https://blog.kakaocdn.net/dna/I7qBr/dJMcaiiSDWS/AAAAAAAAAAAAAAAAAAAAALWt0_qV-dvJGdOI2WUzt2PGpjiWb8Xucj9F0edc8lRV/img.gif?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1780239599&allow_ip=&allow_referer=&signature=W9aH6BWyJV2kl7hmAFk6f3GcKmE%3D) no-repeat;
    background-position: center;
    background-size: cover;
}


.projt {
    width: 90%;
    margin: 140px 5% 100px;
    padding: 0 5%;
}

.projt p {
    font-size: 1.05rem;
    line-height: 1.7rem;
    font-weight: 600;
    text-align: center;
}

.projt a {
    margin: 20px auto;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: #000;
    transition: 0.3s;
}

.projt a:hover {
    color: blue;
}

.projt a span {
    font-size: 1.1rem;
    margin: 0 0 0 6px;
}

.awardjt {
    margin: 0 4%;
}

.awardjt h2 {
    margin: 0 0 30px;
    text-align: center;
}

.awardjt img {
    width: 25px;
    height: 25px;
}

.awardjt section {
    border-top: 1px solid #000;
}

.awardjt section>div {
    margin: 20px auto;
    display: flex;
}

.awardjt section>div>div {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
}

.awardmain {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 3px 0 12px;

    transition: 0.5s;
}

.awardmain:hover {
    text-decoration: underline;
    text-decoration-thickness: 0.5px;
    text-underline-offset: 5px;
}

.awardjt section>div>div>div :nth-child(1) {

    font-size: 0.7rem;
    color: #444;
}

.awardjt section>div>div>div :nth-child(2) {
    font-size: 0.9rem;
    font-weight: 500;
}

.lastborder {
    border-bottom: 1px solid #000;
}

.awardjt a {
    margin: 40px auto;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: #000;
    transition: 0.3s;
}

.awardjt a:hover {
    color: blue;
}

.awardjt a span {
    font-size: 1.1rem;
    margin: 10px 0 6px;
}

.storyjt {
    margin: 0 4%;
}

.storyjt h2 {
    margin: 115px 0 30px;
    text-align: center;
    font-weight: 500;
}


.storyjt div {
    display: flex;
    justify-content: space-between;
}

.storyjt section {
    width: 48%;
}

.storyjt section img {
    width: 100%;
    transition: 0.2s;
}

.storyjt section img:hover {
    transform: translateX(-10px) translateY(-10px);
}

.storyjt>div> :nth-child(3) {
    display: none;
}

.storyjt section p {

    margin: 10px 0;
    font-weight: 600;
    line-height: 1.6rem;
    font-size: 0.9rem;
}

.storyjt section a {
    font-weight: 500;
    color: #888;
    font-size: 0.8rem;
    transition: 0.3s;
}

.storyjt section a:hover {
    color: #444;
}

.storyjt>a {
    margin: 40px auto 0 0;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 500;
    color: #000;
    transition: 0.3s;
}

.storyjt>a:hover {
    color: blue;
}

.storyjt>a span {
    font-size: 1.1rem;
    margin: 0 0 0 6px;
}

footer {
    background: #222;
    margin: 100px auto 0;
    padding: 25px 0;
}

.foobtn {
    text-align: center;
    display: flex;
    justify-content: space-between;
    margin: 10px 20px;
}

.foobtn :nth-child(1),
.foobtn :nth-child(2) {
    font-weight: 600;
    width: 49%;
}


.foobtn :nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: blue;
    border: 2px solid blue;
    color: white;
}

.foobtn button img {
    display: none;
}


.foobtn :nth-child(2):hover {
    background: none;
    border: 2px solid yellow;
    color: yellow;
}

.fooadr {
    width: 270px;
    text-align: left;
    margin: 20px 5%;
}



.fooadr h4 {
    color: #ddd;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4rem;
}

.fooadr p {
    color: #888;
    font-weight: 600;
    font-size: 0.7rem;
    line-height: 1.4rem;
}

.fooadr img {
    width: 12px;
    filter: contrast(0.1);
    margin: 10px 0;
}

hr {
    border: none;
    height: 1px;
    box-shadow: 0 0.1px 0 0 rgba(255, 255, 255, 0.9);
}

.foosns {
    width: 170px;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
}

.foosns img {
    width: 33px;
    border-radius: 8px;
    filter: contrast(0.4);
    transition: 0.3s;
}

.foosns img:hover {
    filter: contrast(1);
}

footer>article>p {
    width: 200px;
    margin: 0 auto;
    font-size: 0.7rem;
    font-weight: 600;
    color: #888;
    text-align: center;
}

/* pc start */


@media screen and (min-width: 1366px) {

    * {
        outline: 0px solid silver;
    }

    header {
        padding: 90px 50px;
        margin: 0 0 0px;
    }

    .logo {
        width: 100px;
        height: 100px;
        font-size: 1.3rem;
        position: fixed;
        top: 70px;
        left: 50px;
        z-index: 1;
    }

    .logo span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 33.33%;
        height: 25px;
    }

    .blue-wave {
        color: blue;
        font-weight: bold;
        font-size: 0.9rem;
    }

    header h4 {
        position: absolute;
        bottom: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        text-align: center;
        font-size: 1.3rem;
        font-weight: 600;
    }

    .menu-wrapper {
        position: fixed;
        top: 70px;
        right: 50px;
        z-index: 1;
    }

    .hamburger {
        border: 1px solid black;
        width: 70px;
        height: 70px;
        padding: 25px 23px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        align-items: flex-start;
    }


    .hamburger span {
        height: 3px;
        background-color: #333;
        transition: 0.2s;
    }

    .menu-wrapper .menu-text {
        display: block;

    }

    .homep {
        margin: 0 13%;
        display: flex;
        flex-wrap: wrap;
    }

    .homep section {
        width: 50%;
        margin: 0;

    }

    .homep p {
        bottom: 30px;
        left: 30px;
        font-weight: 600;
        font-size: 1.1rem;
        color: white;
    }

    .projt {
        width: 60%;
        margin: 250px auto 300px;
    }

    .projt p {
        font-size: 1.3rem;
        line-height: 1.9rem;
        font-weight: 700;
    }

    .projt a {
        margin: 48px auto 0;
        font-size: 1rem;
    }

    .awardjt {
        margin: 0 13%;
    }

    .awardjt h2 {
        margin: 0 0 50px;
        font-size: 2.5rem;
    }


    .awardjt section>div {
        display: flex;
        align-items: center;
        padding: 20px 0;
    }

    .awardjt section>div>div {
        display: contents;
    }


    .awardmain {
        order: 1;
        flex: 1;
        margin: 0;
        font-size: 1.2rem;
        font-weight: 700;
    }


    .awardjt section>div>img {
        order: 2;
        width: 35px;
        height: 35px;
        margin: 0 40px;
    }


    .awardjt section>div>div>div {
        order: 3;
        width: 200px;
        display: flex;
        flex-direction: column;
    }

    .awardjt section>div>div>div :nth-child(1) {
        width: 180px;
        font-weight: 600;
        font-size: 0.8rem;
        line-height: 1.3rem;
        margin-bottom: 4.8px;
    }

    .awardjt a {
        margin: 50px auto;
        font-size: 1rem;
    }


    .storyjt {
        margin: 0 13%;
    }

    .storyjt h2 {
        margin: 0 0 50px;
        font-size: 2.5rem;
        font-weight: 700;
    }

    .storyjt section {
        width: 28%;
    }

    .storyjt>div> :nth-child(3) {
        display: block;
    }

    .storyjt section p {
        margin: 32px 0 10px;
        line-height: 2rem;
        font-size: 1.1rem;
    }

    .storyjt section a {
        font-size: 0.9rem;
    }

    .storyjt section a span {
        font-size: 1rem;
        margin-left: 12px;
    }

    .storyjt>a {
        margin: 80px auto 0 0;
        font-size: 0.95rem;
    }


    footer {
        position: relative;
        margin: 230px 13% 0;
        padding: 135px 0 80px;
    }

    .foobtn {
        position: absolute;
        width: 450px;
        height: 60px;
        right: 130px;
        top: 70px;
    }

    .foobtn :nth-child(1) {
        width: 43%;
    }

    .foobtn :nth-child(2) {
        width: 55%;
    }


    .fooadr {

        width: 270px;
        text-align: left;
        margin: 0 5% 150px;
    }


    .fooadr h4 {
        color: #ddd;
        font-size: 0.8rem;
        font-weight: 600;
        line-height: 1.4rem;
    }

    .fooadr p {
        color: #888;
        font-weight: 600;
        font-size: 0.7rem;
        line-height: 1.4rem;
    }

    .fooadr img {
        width: 12px;
        filter: contrast(0.1);
        margin: 10px 0;
    }

    hr {
        margin: 0 10% 60px;
    }

    .foosns {
        margin: 20px auto 40px;
    }


    footer>article>p {
        width: 500px;
        font-weight: 500;
    }

}

나만의 coding 룰 10

haehaee — Fri, 8 May 2026 10:24:14 +0900

1. 미래의 나를 믿지 말자

지금 모르는 건 미래의 나도 모른다. 나중에 수정하겠다고 미루기보다, 지금 당장 대충이라도 돌아가는 코드를 짜고 메모를 남기는 것이 훨씬 효율적이다.

2. 나무보다 숲을 먼저 보자

작은 디테일에 집착하다 전체 일정을 망치지 않는다. 일단 전체적인 구조와 큰 그림을 완성한 뒤에 세부적인 디자인과 기능을 다듬는다.

3. 마감이 최고의 퀄리티다

기간 내에 완성하지 못한 코드는 가치가 없다. 완벽주의보다는 '완성'을 우선순위에 두고, 데드라인을 엄수하는 습관을 들인다.

4. 허리 요정의 소리를 듣자

건강이 무너지면 코딩도 멈춘다. 의식적으로 허리를 펴고, 스트레칭을 하며 내 몸을 관리하는 것도 개발자의 중요한 실력이다.

5. 구조(HTML)가 꼬이면 다 꼬인다

집을 지을 때 뼈대가 중요하듯, HTML 마크업을 시맨틱하게 잘 짜야 CSS와 JS 작업이 편해진다. 뼈대 세우기에 공을 들이자.

6. 이름 짓기에 인색하지 말자

변수명이나 클래스명을 대충 'aaa', 'test'로 지으면 나중에 반드시 후회한다. 누구나 알아볼 수 있는 명확한 이름을 고민하고 짓자.

7. 기록은 기억을 이긴다 (TIL의 생활화)

오늘 해결한 에러나 새로 배운 속성은 반드시 티스토리에 기록한다. 기록된 데이터는 나중에 실무에서 가장 강력한 자산이 된다.

8. 레퍼런스는 정답지가 아닌 나침반이다

남의 코드를 그대로 복사하기보다, 왜 그렇게 짰는지 원리를 이해하려고 노력한다. 명확한 레퍼런스를 바탕으로 내 방식대로 응용한다.

9. 일관성이 가독성을 만든다

코드의 들여쓰기, 따옴표 종류, CSS 선언 순서 등 사소한 규칙을 일관되게 유지한다. 깔끔한 코드는 협업의 시작이다.

10. 코드는 나만 보는 일기가 아니다

뷰티파이(Beautify)와 정돈된 구조는 기본이다. 내가 짠 코드의 의도를 팀장이나 동료가 즉시 파악할 수 있도록 깔끔하게 관리해야 비로소 '협업할 줄 아는 개발자'가 된다.

ui-kit

haehaee — Thu, 23 Apr 2026 17:45:24 +0900

<!doctype html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>ui-kit</title>
    <link rel="stylesheet" href="style.css">
    <style type="text/css"></style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript"></script>
</head>


<body>


    <h1>RED-DASH UI</h1>


    <article>

        <section>
            <p class="h-big">font</p>
            <h1 class="lefts">h1 text</h1>
            <h2 class="lefts">h2 text</h2>
            <h3 class="lefts">h3 text</h3>
            <h4 class="lefts">h4 text</h4>
            <h5 class="lefts">h5 textp</h5>
            <h6 class="lefts">h6 text</h6>
            <p>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 distribution
                of
                letters, as opposed to
                using 'Content here, content here', making it look like readable English.</p>
            <p><a href="">Link text</a></p>
        </section>

    </article>

    <article>

        <section>
            <h2>button</h2>
            <button class="button-primary">button-primary</button>
            <button class="button-level-01">button</button>
            <button class="button-level-02">button-level-02</button>
            <button class="button-level-03">button-level-03</button>
            <button class="button-small">small</button>
        </section>

    </article>

    <article>

        <section>
            <h2>radio n check</h2>
            <div>
                <div>
                    <input type="radio" id="opt-one" name="subject" value="">
                    <label for="opt-one">one</label>

                    <input type="radio" id="opt-two" name="subject" value="">
                    <label for="opt-two">two</label>
                </div>

                <div>
                    <input type="checkbox" id="vehicle1" name="vehicle1" value="bike">
                    <label for="vehicle1">I have a bike</label>

                    <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
                    <label for="vehicle2">I have a car</label>

                    <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
                    <label for="vehicle3">I have a boat</label>
                </div>

                <div>
                    <input type="radio" id="radio-one-single" name="subject" value="">
                    <label for="radio-one-single">one</label>
                </div>

                <div>
                    <input type="radio" id="radio-two-single" name="subject" value="">
                    <label for="radio-two-single">two</label>
                </div>

                <div>
                    <input type="checkbox" id="vehicle1-single" name="vehicle1" value="Bike">
                    <label for="vehicle1-single">I have a bike</label>
                </div>

                <div>
                    <input type="checkbox" id="vehicle2-single" name="vehicle2" value="Car">
                    <label for="vehicle2-single">I have a car</label>
                </div>

                <div>
                    <input type="checkbox" id="vehicle3-single" name="vehicle3" value="Boat">
                    <label for="vehicle3-single">I have a boat</label>
                </div>
        </section>
    </article>

    <article>

        <section>

            <h2>Input</h2>

            <input type="text" placeholder="ID"></input>
            <input type="password" placeholder="PASSWORD"></input>

            <h4 class="margin-tops">Essential</h4>
            <input type="text" placeholder="your name"></input>
            <div>
                <div class="custom-select">
                    <button>Year <span>▼</span></button>
                    <ul>
                        <li>2020</li>
                        <li>2019</li>
                        <li>2018</li>
                        <li>2017</li>
                        <li>2016</li>
                    </ul>
                </div>

                <div class="custom-select">
                    <button>Month <span>▼</span></button>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>

                <div class="custom-select">
                    <button>Date <span>▼</span></button>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>
                <div>
                    <input type="radio" id="gender-female" name="gender" value="female">
                    <label for="gender-female">Female</label>

                    <input type="radio" id="gender-male" name="gender" value="male">
                    <label for="gender-male">Male</label>
                </div>
            </div>

            <h4 class="margin-tops">Optional</h4>
            <div>
                <input type="radio" id="opt-dreamcatcher" name="group1" value="">
                <label for="opt-dreamcatcher">Dreamcathcer</label>

                <input type="radio" id="opt-twice" name="group1" value="">
                <label for="opt-twice">Twice</label>
            </div>

            <div>
                <input type="radio" id="opt-jiyou" name="group2" value="">
                <label for="opt-jiyou">Jiyou</label>

                <input type="radio" id="opt-siyeon" name="group2" value="">
                <label for="opt-siyeon">Siyeon</label>
            </div>
            <textarea name="name" rows="8" placeholder="Description"></textarea>
            <button class="button-primary">button</button>
        </section>
    </article>


    <article>
        <section>
            <h2>Select</h2>
            <div class="custom-select">
                <button>default <span>▼</span></button>
                <ul>
                    <li>default</li>
                    <li>option1</li>
                    <li>option2</li>
                </ul>
            </div>
        </section>
    </article>


    <article>
        <section>
            <h2>Indicator</h2>
            <div class="space-betweens">
                <button class="indicator-button" id="btn-first">«</button>
                <button class="indicator-button" id="btn-prev">‹</button>

                <div class="indicator-dots">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
                <button class="indicator-button" id="btn-next">›</button>
                <button class="indicator-button" id="btn-last">»</button>
            </div>
        </section>
    </article>


    <article>
        <section>
            <h2>tabmenu</h2>
            <div>
                <div class="space-betweens">
                    <button class="tabmenu-button tablink tabmenu-color"
                        onclick="openCity(event, 'London')">London</button>
                    <button class="tabmenu-button tablink" onclick="openCity(event, 'Paris')">Paris</button>
                    <button class="tabmenu-button tablink" onclick="openCity(event, 'Tokyo')">Tokyu</button>
                </div>
                <div class="margin-tops centers">
                    <div id="London" class="city">
                        <h2>London</h2>
                        <p>London is the capital city of England.</p>
                    </div>
                    <div id="Paris" class="city" style="display: none;">
                        <h2>Paris</h2>
                        <p>Paris is the capital of France.</p>
                    </div>
                    <div id="Tokyo" class="city" style="display: none;">
                        <h2>Tokyo</h2>
                        <p>Tokyo is the capital of Japan.</p>
                    </div>
                </div>
            </div>
        </section>
    </article>

    <h4>Developed by Haeseung</h4>




    <script>

        function openCity(evt, cityName) {
            var i, x, tablinks;
            x =
                document.getElementsByClassName("city");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            tablinks =
                document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" tabmenu-color", "")
            };
            document.getElementById(cityName).style.display = "block";

            evt.currentTarget.className += " tabmenu-color";
        }

        //--------------- 드롭다운 js 코드 ---------------
        // 드롭다운 버튼 클릭 시 열고 닫기 
        document.querySelectorAll('.custom-select button').forEach(button => {
            button.addEventListener('click', function (e) {
                e.preventDefault();
                const parent = this.parentElement;

                // 다른 열려있는 드롭다운이 있다면 닫아줌
                document.querySelectorAll('.custom-select').forEach(select => {
                    if (select !== parent) {
                        select.classList.remove('open');
                    }
                });

                // 현재 클릭한 드롭다운 토글
                parent.classList.toggle('open');
            });
        });

        // 리스트(li) 항목 선택 시 글자 변경 및 닫기
        document.querySelectorAll('.custom-select li').forEach(item => {
            item.addEventListener('click', function () {

                // 현재 클릭한 li가 속한 부모 박스와 버튼 찾기
                const parent = this.closest('.custom-select');
                const button = parent.querySelector('button');

                // 버튼의 텍스트를 내가 클릭한 li의 글자로 바꾸기 (+ 화살표 유지)
                button.innerHTML = this.innerText + ' <span>▼</span>';

                // 메뉴창 닫기
                parent.classList.remove('open');
            });
        });
        // 드롭다운 바깥 영역 클릭 시 모든 창 닫기
        document.addEventListener('click', function (e) {
            // 클릭한 곳이 .custom-select 내부가 아니라면
            if (!e.target.closest('.custom-select')) {
                document.querySelectorAll('.custom-select').forEach(select => {
                    select.classList.remove('open'); // 싹 다 닫아줌
                });
            }
        });
        //---------------여기까지 드롭다운---------------


        //---------------인디케이터 모핑 닷 효과 js코드 ---------------
        // '.indicator-dots .dot' 클래스를 가진 모든 점을 찾아서 'dots'라는 배열(리스트)에 저장
        const dots = document.querySelectorAll('.indicator-dots .dot');

        // 각각의 조작 버튼들을 HTML의 id 속성으로 찾아서 변수에 저장
        const btnFirst = document.getElementById('btn-first');
        const btnPrev = document.getElementById('btn-prev');
        const btnNext = document.getElementById('btn-next');
        const btnLast = document.getElementById('btn-last');

        // 지금 몇 번째 점에 불이 들어와 있는지 기억하는 변수
        // 컴퓨터는 숫자를 0부터 세기 때문에, 처음 시작 위치는 0(첫 번째 점)
        let currentIndex = 0;

        // 괄호 안의 숫자를 받아서 해당 위치의 점에 불을 켜주는 역할
        function updateActiveDot(index) {
            // 일단 모든 점들을 하나씩 돌아가면서(forEach) 'active' 클래스를 지움 (모두 초기화)
            dots.forEach(dot => dot.classList.remove('active'));

            // 내가 이동하겠다고 지정한 번호(index)의 점에만 다시 'active' 클래스를 부여 (불 켜기)
            dots[index].classList.add('active');

            // 지금 활성화된 위치를 방금 이동한 위치(index)로 업데이트(그래야 다음 이동 때 안 헷갈림)
            currentIndex = index;
        }

        // (<<) 클릭 시
        btnFirst.addEventListener('click', () => {
            updateActiveDot(0); // 0번째(무조건 맨 처음) 점으로 바로 이동
        });

        // (<) 클릭 시
        btnPrev.addEventListener('click', () => {
            // 현재 위치가 0보다 클 때만 작동하게 막아둠 (맨 앞인데 더 앞으로 가면 에러)
            if (currentIndex > 0) {
                updateActiveDot(currentIndex - 1); // 현재 위치에서 1을 뺀 위치로 이동
            }
        });

        // (>) 클릭 시
        btnNext.addEventListener('click', () => {
            // 현재 위치가 맨 끝 번호보다 작을 때만 작동하게 막아둠
            // dots.length는 전체 점의 개수(예: 7개) 숫자는 0부터 세니까 마지막 번호는 6
            // 전체 개수에서 1을 뺀 값(dots.length - 1)과 비교
            if (currentIndex < dots.length - 1) {
                updateActiveDot(currentIndex + 1); // 현재 위치에서 1을 더한 위치로 이동
            }
        });

        // (>>) 클릭 시
        btnLast.addEventListener('click', () => {
            // 전체 개수에서 1을 뺀 번호(무조건 맨 마지막 번호)로 한 번에 이동
            updateActiveDot(dots.length - 1);
        });

        //---------------여기까지 인디케이터 모핑 닷---------------

    </script>
</body>

</html>

@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0px solid #eee;
}

body {
    margin: 60px 0;
    font-family: 'pretendard', sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #333;
    letter-spacing: 0.1px;
    word-break: keep-all;
}

img {
    width: 100px;
}



h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    margin-bottom: 30px;
    text-align: center;
}

h1,
h2,
h3 {
    text-transform: uppercase;
}

h1 {
    font-size: 3.5rem;
    line-height: 3.5rem;
    color: black;
}

h2 {
    font-size: 2rem;
    line-height: 2rem;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.4rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

p {
    margin-bottom: 30px;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background: #fff;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    border: 0px solid #444;
    border-radius: 10px;
    color: #666;
    text-transform: uppercase;
    transition: 0.3s;
    cursor: pointer;
}


article {
    margin: 64px 5%;
    border: 1px solid #670000;
    border-radius: 10px;
}

section {
    padding: 56px 5%;
}


/* form default */

input,
select {
    padding: 12px;
    margin-bottom: 16px;
    color: #333;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    outline: none;
    transition: 0.4s;
}

input:focus {
    border: 1px solid #670000;
    box-shadow: inset 0 0 0 1px #670000;
    background: #eeeeee;
}

select:focus {
    border: 2px solid #670000;
}

textarea {
    padding: 12px;
    margin-bottom: 16px;
    color: #999;
    background: #fff;
}

input[type="radio"],
input[type="checkbox"] {
    display: none;

}

input[type="radio"]+label,
input[type="checkbox"]+label {
    display: inline-block;
    padding: 8px 16px;
    margin: 5px;
    background-color: #f5f5f5;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    cursor: pointer;
    color: #666;
}


input[type="radio"]:checked+label,
input[type="checkbox"]:checked+label {
    background-color: #670000;
    color: #ffffff;
    text-shadow: 0 0 0.6px #fff, 0 0 0.6px #fff;
    outline: 1px solid #670000;
    outline-offset: 2px;
}

/* 드롭다운 전체를 감싸는 */
.custom-select {
    position: relative;
    width: 100%;
    margin-bottom: 16px;
}

/* 기존 select 박스 역할 */
.custom-select button {
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 10px;
    color: #333;
    font-size: 0.9rem;
    font-weight: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}


.custom-select button:focus {
    border-color: #670000;
}

/* 클릭하면 아래로 떨어져 나오는 박스 */
.custom-select ul {
    position: absolute;
    top: calc(100% + 8px);
    /* 버튼 높이에서 8px 띄움 */
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    list-style: none;
    display: none;
    z-index: 10;
    overflow: hidden;
}

/* js로 opne 클래스가 붙으면 메뉴가 보이게 함 */
.custom-select.open ul {
    display: block;
}

.custom-select li {
    padding: 12px 16px;
    color: #666;
    cursor: pointer;
    transition: background 0.2s;
}

.custom-select li:hover {
    background: #f9f9f9;
    color: #670000;
    font-weight: bold;
}


textarea {
    width: 100%;
    background: #eee;
    border-radius: 10px;
    border: 1px solid #dbdbdb;
    font-family: 'pretendard', sans-serif;
    outline: none;
    transition: 0.3s;
}

textarea:focus {
    color: #000;
    border: 1px solid #670000;
    box-shadow: inset 0 0 0 1px #670000;
}

input[type="text"],
input[type="password"],
input[type="search"] input[type="tel"] {
    width: 100%;
}


/* design default */

.h-big {
    font-family: 'Inter', sans-serif;
    font-size: 6rem;
    font-weight: bold;
    margin-bottom: 30px;
    text-transform: uppercase;
    line-height: 6rem;
    color: #670000;
}

.lefts {
    text-align: left;
}

.button-primary {
    background: #670000;
    color: #ffffff;
}

.button-level-01 {
    background: #dbdbdb;
    color: #333333;
}

.button-level-01:hover {
    background: #f1f1f1;
    color: #670000;
}

.button-level-02 {
    background: #999999;
    color: #ffffff;
}

.button-level-03 {
    background: #333333;
    color: #dbdbdb;
}

.button-primary:hover,
.button-level-02:hover,
.button-level-03:hover {
    background: #dbdbdb;
    color: #670000;
}

.button-small {
    width: 80px;
    padding: 6px;
    background: #dbdbdb;
    text-align: center;
    font-size: 0.7rem;
    border: 0px solid #670000;
    color: #333333;
    text-transform: uppercase;
    transition: 0.5s;
    cursor: pointer;

}

.button-small:hover {
    background: #999999;
    color: #670000;
}

.margin-tops {
    margin-top: 30px;
}

.space-betweens {
    display: flex;
    justify-content: space-between;
}


.indicator-button {
    font-size: 2rem;
    color: #999;
}

.indicator-button:hover {
    color: #333;
}

.indicator-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #777;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dot.active {
    width: 24px;
    background: #670000;
}

.tabmenu-button {
    background: #dbdbdb;
    width: 100%;
    margin: 0 5px;
}

.tabmenu-color {
    background: #670000;
    color: white;
}

.none {
    display: none;
}

.centers {
    text-align: center;
}

.tabmenu-button:hover {
    background: #670000;
    border: 0px solid #111;
    color: #fff;
}


/* mobile */

/* labtop */

@media screen and (min-width: 1366px) {

    article {
        width: 600px;
        margin: 48px auto;
    }

}

Figma - 단축키 모음

haehaee — Tue, 21 Apr 2026 17:14:58 +0900

피그마(Figma)는 단축키만 잘 활용해도 작업 속도가 최소 2배는 빨라집니다.

효율적인 설계를 위해 반드시 익혀야 할 필수 단축키를 카테고리별로 정리해 드립니다.

1. 도구 및 레이어 선택 (Basics)

가장 기본이 되는 도구 전환 단축키입니다.

기능	단축키 (Win)	단축키 (Mac)
선택 도구 (Move)	V	V
프레임 도구 (Frame)	F	F
텍스트 도구 (Text)	T	T
도형 그리기 (Rect / Circle)	R / O	R / O
펜 도구 (Pen)	P	P
스포이드 (Color Picker)	I	I

2. 레이아웃 및 정렬 (Layout)

오토 레이아웃은 피그마의 핵심 기능입니다.

기능	단축키 (Win)	단축키 (Mac)
오토 레이아웃 적용	Shift + A	Shift + A
오토 레이아웃 해제	Alt + Shift + A	Option + Shift + A
그룹 만들기 (Group)	Ctrl + G	Cmd + G
그룹 해제 (Ungroup)	Ctrl + Shift + G	Cmd + Shift + G
좌측/상단/중앙 정렬	Alt + A / W / H	Option + A / W / H

3. 편집 및 스타일 (Editing)

복사, 붙여넣기 이상의 효율을 내는 단축키들입니다.

기능	단축키 (Win)	단축키 (Mac)
복제하기 (Duplicate)	Ctrl + D (혹은 Alt 드래그)	Cmd + D (혹은 Option 드래그)
속성 복사하기	Ctrl + Alt + C	Cmd + Option + C
속성 붙여넣기	Ctrl + Alt + V	Cmd + Option + V
불투명도 조절	숫자 키 1 ~ 0	숫자 키 1 ~ 0
레이어 숨기기/보이기	Ctrl + Shift + H	Cmd + Shift + H
레이어 잠금/해제	Ctrl + Shift + L	Cmd + Shift + L

4. 뷰 제어 (View)

화면을 빠르게 이동하고 격자를 확인하는 기능입니다.

기능	단축키 (Win)	단축키 (Mac)
전체 화면 맞춤	Shift + 1	Shift + 1
선택 요소 확대	Shift + 2	Shift + 2
100% 크기로 보기	Shift + 0	Shift + 0
레이아웃 그리드 On/Off	Ctrl + Shift + 4	Ctrl + Shift + 4
아웃라인 모드	Ctrl + Y	Cmd + Y

꿀팁: 단축키 학습 모드

피그마 화면 오른쪽 하단에 있는 '?' 아이콘을 누르거나, 단축키 Ctrl + Shift + ? (Mac은 Cmd + Shift + ?)를 누르면 Keyboard Shortcuts 패널이 뜹니다. 내가 사용한 단축키는 파란색으로 표시되니, 아직 써보지 않은 단축키를 하나씩 채워가는 재미가 있을 거예요!

Reference

https://uxplat.com/figma-keyboard-shortcut-%ED%94%BC%EA%B7%B8%EB%A7%88-%EB%8B%A8%EC%B6%95%ED%82%A4-%EB%AA%A8%EC%9D%8C-%EA%B8%B0%EB%8A%A5-%EC%A2%85%EB%A5%98/

Figma 피그마 단축키 모음 2025 - 자주 쓰는 기능, 종류별로 모아보기

어떤 툴이든 단축키를 익히고 익숙해지면 작업 시간을 굉장히 효율적으로 사용할 수 있습니다. Figma 피그마 단축키 모음을 통해 알아두면 편리한 단축키를 알려드립니다.

uxplat.com

Figma - 인터페이스

haehaee — Tue, 21 Apr 2026 17:14:21 +0900

Menu Bar

파일 저장, 불러오기, 내보내기, 편집과 같은 기본 명령어들이 모여 있습니다. 여기서 프로젝트 관리와 설정도 할 수 있습니다.

이동 도구 (Move Tool)
선택한 오브젝트를 자유롭게 이동시킬 수 있는 기본 도구입니다.

디자인 작업 중 가장 자주 사용하는 기능입니다.

프레임 도구 (Frame Tool)
캔버스에 프레임을 만들어 아트보드처럼 활용할 수 있습니다.

웹이나 모바일 화면 크기에 맞는 작업 영역을 설정할 때 매우 유용합니다.

도형 도구 (Shape Tools)
사각형, 원, 선 등 다양한 기본 도형을 그릴 수 있습니다.

디자인의 기본 요소를 만드는 데 필수적인 도구입니다.

펜 도구 (Pen Tool)
자유로운 곡선 및 벡터 경로를 그릴 수 있어서 복잡한 모양의 아이콘이나 일러스트를 만들 때 사용합니다.

텍스트 도구 (Text Tool)
텍스트를 입력하고 편집할 수 있는 도구입니다.

디자인에 글자를 추가할 때 사용하며, 폰트와 크기를 자유롭게 조절할 수 있습니다.

손 도구 (Hand Tool)
캔버스 전체를 드래그하여 이동할 수 있는 도구로, 작업 중 화면 위치를 빠르게 조정할 때 편리합니다.

확대/축소 도구 (Zoom Tool)
원하는 부분을 확대하거나 축소해 세밀한 작업을 할 수 있는 도구입니다.

자르기 도구 (Slice Tool)
디자인 일부 영역을 선택하여 별도로 내보내거나 저장할 때 사용하는 도구입니다.

Toolbar

디자인에 필요한 주요 도구들이 위치해 있습니다.

예를 들어, 이동 도구, 프레임 도구, 도형 도구, 펜 도구, 텍스트 도구 등이 있어 필요한 작업을 바로바로 선택하여 사용할 수 있습니다.

Canvas

실제 디자인 작업이 이루어지는 중앙 공간입니다.

여기에 프레임을 추가하고, 오브젝트를 배치하며 디자인을 완성합니다.

Properties Panel

선택한 오브젝트의 상세 속성들을 수정할 수 있는 곳입니다.

크기, 위치, 색상, 불투명도, 그림자, 테두리 등 세밀한 조절이 가능합니다.

Layers Panel

좌측 툴바 아래나 캔버스 가까이에 위치하며, 디자인에 사용된 모든 객체와 그룹들의 계층을 한눈에 볼 수 있습니다.

객체들의 순서 변경이나 그룹 설정 시 유용합니다.

레이어의 종류

각 레이어에는 레이어 유형의 이름과 아이콘이 있습니다.

이러한 아이콘 중 일부가 도구 모음에 표시되는 것을 눈치채셨을 것입니다.

도구 모음에서 해당 도구를 선택하거나 키보드 바로가기를 사용하면 해당 유형의 레이어를 더 만들 수 있습니다

Status Bar

화면 하단에 위치해 있으며 좌표 위치, 캔버스 확대율 등을 확인할 수 있습니다.

Plugins and Widgets

추가 기능을 설치하거나 활용할 수 있는 공간으로, 디자인 작업을 더욱 풍부하고 편리하게 만들어 줍니다.

피그마 인터페이스는 이렇게 여러 영역으로 나뉘어 있어 각 부분이 조화롭게 디자인 작업을 지원합니다.

처음 사용하실 때는 익숙하지 않을 수 있으나, 차근차근 익히시면 훨씬 편리하게 다룰 수 있습니다.

Reference

https://help.figma.com/hc/ko/articles/15297425105303-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%8C%8C%EC%9D%BC-%ED%83%90%EC%83%89

디자인 파일 탐색

이 가이드에서는 Figma Design에서 디자인 파일로 작업하는 기본 사항을 다룹니다. Figma Design을 처음 사용하신다면, 초보자를 위한 Figma Design 강좌를 수강하시기를 권장합니다. 이 강좌에서는 디자

help.figma.com

https://help.figma.com/hc/ko/articles/23954856027159-UI3-%ED%83%90%EC%83%89%ED%95%98%EA%B8%B0-Figma%EC%9D%98-%EC%83%88%EB%A1%9C%EC%9A%B4-UI

UI3 탐색하기: Figma의 새로운 UI

이 기능을 사용할 수 있는 사용자 모든 요금제에서 베타로 제공 Figma를 처음 사용하신다면 Figma 디자인 파일 탐색 가이드를 추천합니다. Config 2024에서는 UI3라는 새롭게 디자인된 Figma를 소개했습

help.figma.com

https://help.figma.com/hc/ko/articles/360039832014-%EC%98%A4%EB%A5%B8%EC%AA%BD-%EC%82%AC%EC%9D%B4%EB%93%9C%EB%B0%94%EC%97%90%EC%84%9C-%EB%A0%88%EC%9D%B4%EC%96%B4-%EC%86%8D%EC%84%B1-%EB%94%94%EC%9E%90%EC%9D%B8-%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85-%EC%A0%9C%EC%9E%91-%ED%83%90%EC%83%89%ED%95%98%EA%B8%B0

오른쪽 사이드바에서 레이어 속성 디자인, 프로토타입 제작, 탐색하기

이 문서는 이전 Figma UI와 새로운 Figma UI에서 모두 확인할 수 있습니다. 페이지 왼쪽 하단의 토글을 사용하여 현재 UI를 선택하세요. UI3 알아보기: Figma의 새 디자인 → 시작하기 전에 이 기능을 사

help.figma.com

https://uxplat.com/figma-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%9D%B8%ED%84%B0%ED%8E%98%EC%9D%B4%EC%8A%A4-%EC%9E%91%EC%97%85-%ED%99%94%EB%A9%B4-ui/

Figma 피그마 인터페이스 - 작업 화면 UI(Figma Interface 2025)

Figma 피그마 인터페이스가 심플하고 사용 방법이 쉬운 프로그램입니다. 하지만 피그마 초보자라면 누구라도 어려움을 느낄 수 있습니다.

uxplat.com

https://uxplat.com/figma-%ED%94%BC%EA%B7%B8%EB%A7%88-%EB%A9%94%EC%9D%B8-%EB%A9%94%EB%89%B4-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0-%ED%94%BC%EA%B7%B8%EB%A7%88-%EC%82%AC%EC%9A%A9%EB%B2%95/

Figma 피그마 메인 메뉴 살펴보기 - 피그마 사용법 2025

이번 시간에는 Figma 피그마 메인 메뉴를 살펴보고 어떤 기능이 있는지 기본 사용법에 대해서 알아보겠습니다.

uxplat.com

https://uxplat.com/figma-%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%8C%8C%EC%9D%BC-%EC%95%84%EC%9D%B4%EC%BD%98-%EC%A2%85%EB%A5%98-%EC%9E%91%EC%97%85-%ED%8C%8C%EC%9D%BC-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0/

Figma 피그마 파일 아이콘 종류 - 작업 파일 구분하기 2025

피그마에서 작업할 때 파일 브라우저에서 피그마 파일 아이콘 종류로 작업 파일을 구분할 수 있습니다. 파

uxplat.com

https://uxplat.com/figma-toolbar-design-tools-%ED%94%BC%EA%B7%B8%EB%A7%88-%ED%88%B4%EB%B0%94-%EB%A9%94%EB%89%B4-%EC%82%B4%ED%8E%B4%EB%B3%B4%EA%B8%B0/

Figma 피그마 툴바 메뉴 살펴보기 - 피그마 디자인 툴 2025

지난번 피그마 메인 메뉴에 이어 이번 시간에는 피그마 툴바 메뉴에 대해서 알아보겠습니다.

uxplat.com

AWD 디자인 리뉴얼

haehaee — Tue, 21 Apr 2026 17:02:12 +0900

<!doctype html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
  <title>MUTE</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="script.js"></script>
</head>

<body>

  <main>
    <header>
      <div>MUTE</div>
      <nav>≡</nav>
    </header>

    <div>
      <h1>Silent but Powerful</h1>
      <p data-key="mainDesc">고요하지만 강력한 흔적</p>
      <button data-key="mainBtn">자세히 보기</button>
    </div>
  </main>

  <article class="power-text">
    <h2 data-key="powerTitle1">THE ULTIMATE MANLINESS</h2>
    <div class="vertical-line"></div>
  </article>

  <article class="power">
    <div>
      <h2 data-key="powerTitle2">POWER IN SILENCE</h2>
      <p data-key="powerDesc1">
        MUTE는 단순히 향기를 파는 것이 아니라, 당신의 존재감을 증명하는 보이지 않는 수트를 제안합니다.<br>
      </p>
      <p data-key="powerDesc2">
        고요함 속에 잠재된 폭발적인 에너지를 경험하세요. 한 번의 분사로 세상을 당신의 향기로 채우세요.<br>
      </p>
      <button data-key="powerBtn">브랜드 가이드</button>
    </div>
  </article>

  <article class="house-text">
    <h2 data-key="houseTitle">CURATED FRAGRANCE HOUSE</h2>
    <p data-key="houseDesc">
      당신을 위한 프리미엄 향기 큐레이션<br />
      전 세계에서 엄선된 니치 향수부터 트렌디한 브랜드까지, 당신의 분위기에 맞는 최적의 향을 제안합니다.
    </p>
  </article>

  <article class="house">
    <section>
      <div>
        <h3>JO MALONE LONDON</h3>
        <button data-key="discoverBtn">보러가기</button>
      </div>
    </section>

    <section class="video-hover-box">
      <video
        src="https://www.yslbeautykr.com/on/demandware.static/-/Sites-ysl-kr-ng-Library/ko_KR/dwc52a8873/pdp/APAC-1004728-YSL/240821/APAC-1004728-YSL_video_02.mp4"
        poster="https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070" muted loop playsinline
        autoplay>
      </video>
      <div class="content">
        <h3>YVES SAINT LAURENT</h3>
        <button data-key="discoverBtn">보러가기</button>
      </div>
    </section>

    <section>
      <div>
        <h3>VERSACE</h3>
        <button data-key="discoverBtn">보러가기</button>
      </div>
    </section>
  </article>

  <article class="our-text">
    <h2 data-key="ourTitle">OUR SIGNATURE SERVICES</h2>
    <p data-key="ourDesc">
      오직 뮤트에서만 경험할 수 있는 특별함<br>단순한 향수 구매를 넘어, 당신의 삶에 깊게 스며들 수 있는 특별한 가치를 제안합니다. <br>전문가의 섬세한 터치로 완성되는 퍼스널 조향부터 전 세계 유수의
      니치 향수를 직접 경험할 수 있는 오프라인 스토어까지, 오직 뮤트(MUTE)에서만 허락된 감도 높은 프리미엄 서비스를 지금 바로 확인해 보세요.
    </p>
  </article>

  <article class="our">
    <section>
      <div>
        <button data-key="ourBtn1">테마별 큐레이션</button>
      </div>
    </section>
    <section>
      <div>
        <button data-key="ourBtn2">퍼스널 향수</button>
      </div>
    </section>
    <section>
      <div>
        <button data-key="ourBtn3">디스커버리 키트</button>
      </div>
    </section>
    <section>
      <div>
        <button data-key="ourBtn4">매장 안내</button>
      </div>
    </section>
  </article>

  <article class="partner">
    <h2 data-key="partnerTitle">PARTNER BRANDS</h2>
    <div>
      <img
        src="https://blog.kakaocdn.net/dna/muR4Y/dJMcag6gQAG/AAAAAAAAAAAAAAAAAAAAAKUv1rlzBVFxk1B9MNyox2yoysfkHjGSHYQFimT920nE/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=XGnSuaPu8IzMZ8Z87lFR7aqMfA4%3D">
      <img
        src="https://blog.kakaocdn.net/dna/b2LDxX/dJMcaf7laGB/AAAAAAAAAAAAAAAAAAAAAMu_sGOOM0yJmartaUSAB_gjW2MjF3AcU1zVFkXo3DPp/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=pdfLYJANSEeksb3lwHjXnerbVOI%3D">
      <img
        src="https://blog.kakaocdn.net/dna/1dJLR/dJMcagd8Hb7/AAAAAAAAAAAAAAAAAAAAAO7MyQz38pSIghTCFDNYg7-VzTRQBssSfUGYDyiN8H4U/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=%2B1DZTLCC%2FWcFePb7DfYUS7n4QeE%3D">
      <img
        src="https://blog.kakaocdn.net/dna/0yOsK/dJMcag6gQAF/AAAAAAAAAAAAAAAAAAAAAFE9p8ZUn3jI5B7eDH85UdP29i01RKHvYfdDEqCieFUJ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=krVbBxIA1WY8rkqfAHldj%2B8dK3M%3D">
      <img
        src="https://blog.kakaocdn.net/dna/Dm79S/dJMb990pdX4/AAAAAAAAAAAAAAAAAAAAAN_Dqx6vAOZrdgqBHIqPSWDPxXeyhHnLPUx0jnC0W7mJ/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=cgm9KP5Zcudxhj53c3gvNeejCVI%3D">
      <img
        src="https://blog.kakaocdn.net/dna/eoOpic/dJMcag6gQAE/AAAAAAAAAAAAAAAAAAAAAIzGO2PjG8LdAEnjKtOGFaysT8TvgsHF0RkWhdpWovkT/img.png?credential=yqXZFxpELC7KVnFOS48ylbz2pIh7yKj8&expires=1777561199&allow_ip=&allow_referer=&signature=xAQCcahiQbi9D6hyOMQFgTBIpv4%3D">
    </div>
    <div>
      <p data-key="partnerDesc">함께하는 프리미엄 파트너</p>
    </div>
  </article>

  

  <article class="guides">
    <h2 data-key="guidesTitle">향의 깊이 가이드</h2>
    <p data-key="guidesSub">지속시간에 따른 향수의 종류 알아보기</p>
    <table>
      <tr>
        <td width="150px" data-key="th1">등급</td>
        <td width="150px" data-key="th2">부향률</td>
        <td width="200px" data-key="th3">지속 시간</td>
        <td width="400px" data-key="th4">특징</td>
      </tr>
      <tr>
        <td data-key="td1_1">퍼퓸</td>
        <td>15% ~ 30%</td>
        <td data-key="td1_2">7 ~ 8시간 이상</td>
        <td data-key="td1_3">가장 깊고 풍부한 향, 특별한 날 추천</td>
      </tr>
      <tr>
        <td data-key="td2_1">오드 퍼퓸</td>
        <td>10% ~ 15%</td>
        <td data-key="td2_2">5시간 전후</td>
        <td data-key="td2_3">대중적이며 선명한 발향, 데일리용</td>
      </tr>
      <tr>
        <td data-key="td3_1">오드 뚜왈렛</td>
        <td>5% ~ 10%</td>
        <td data-key="td3_2">3 ~ 4시간 전후</td>
        <td data-key="td3_3">가볍고 부드러운 느낌, 캐주얼한 사용</td>
      </tr>
    </table>
  </article>

  <footer>
    <div>
      <h2>ORDER</h2>
      <p data-key="footerDesc">비회원 주문 조회 및 배송 현황</p>
      <form>
        <div>
          <label for="name" data-key="footerName">이름</label>
          <input type="text" name="name" id="name">
        </div>
        <div>
          <label for="order-num" data-key="footerOrderNum">주문번호</label>
          <input type="text" name="order-num" id="order-num">
        </div>
        <div>
          <label for="password" data-key="footerPw">구매 비밀번호</label>
          <input type="password" name="password" id="password">
        </div>
        <div>
          <button type="submit" name="submit" id="submit" data-key="footerBtn">조회</button>
        </div>
      </form>
    </div>
  </footer>

  <address>
    <div>
      <h2 data-key="addressTitle">STAY IN MUTE</h2>
      <p data-key="addressDesc">서울특별시 강남구 테헤란로 123, 뮤트 빌딩 15층<br>TEL: 02-1234-5678<br>EMAIL: info@mute.com</p>
    </div>
  </address>


  <div class="langs" id="lang-btn">EN</div>


</body>

</html>

@charset "utf-8";
@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");
@import url("https://fonts.googleapis.com/css?family=Oswald&display=swap");
@import url("https://fonts.googleapis.com/css?family=Playfair+Display&display=swap");
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');



* {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    word-break: keep-all;
    outline: 0px solid silver;
}

img {
    width: 100px;
}

body {
    background: black;
    font-family: "Roboto", "pretendard", sans-serif;
    font-size: 0.9rem;
    line-height: 1rem;
    color: #ddd;
    letter-spacing: 0.1px;
}

h1,
h2,
h3 {
    font-family: "Oswald", "pretendard", sans-serif;
}

h1 {
    font-size: 4rem;
    line-height: 4rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.4rem;
    line-height: 2.4rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
    text-align: center;
}

h3 {
    font-size: 1.4rem;
    line-height: 1.4rem;
}

h4,
h5 {
    font-family: "Playfair Display", "pretendard", serif;
}

h4 {
    font-size: 1.1rem;
    line-height: 1.1rem;
}

h5 {
    font-size: 0.7rem;
    line-height: 0.7rem;
}

a:link {
    color: #666;
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:hover {
    color: red;
}

a:active {
    color: red;
}

button {
    font-size: 0.7rem;
    text-transform: uppercase;
    padding: 10px 30px;
    border: 1px solid #C5A059;
    background: #E5E4E2;
    cursor: pointer;
    transition: 0.3s;
}

button:hover {
    background: #222;
    color: white;
}

main {
    position: relative;
    background: linear-gradient(rgba(255, 255, 255, 0.1) 30%, rgba(0, 0, 0, 1) 100%), url("https://images.unsplash.com/photo-1598634222670-87c5f558119c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: bottom center;
    height: 600px;
    color: white;
}

main header {
    padding: 0 10%;
    text-transform: uppercase;
    line-height: 5rem;
    display: flex;
    justify-content: space-between;
}

main header div {
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.8s;
}

main header div:hover,
main header nav:hover {
    color: #777;
}

main header nav {
    font-size: 3rem;
    cursor: pointer;
    transition: 0.8s;
}

main>div {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -70%);
}

main div p {
    padding: 16px;
    margin: 20px auto;
    font-size: 1.4rem;
}

.power-text {
    padding: 150px 10%;
    text-align: center;
}

.vertical-line {
    width: 3px;
    height: 100px;
    background: #707072;
    margin: 150px auto 40px;
}


.power {
    background: url("https://cdn.pixabay.com/photo/2016/07/13/11/55/spray-1514264_1280.jpg") no-repeat;
    background-size: cover;
    background-position: center right;
    height: 500px;
    color: white;
    display: flex;
    flex-direction: row-reverse;
}

.power div {
    background: rgba(0, 0, 0, 0.5);
    width: 50%;
    height: 100%;
    padding: 80px 5%;
}

.power div h2 {
    text-align: left;
}

.power>div>p:nth-of-type(1) {
    margin: 32px 0;
}

.power>div>p:nth-of-type(2) {
    display: none;
    margin: 32px 0 0;
}

.house-text {
    padding: 150px 10% 50px;
    line-height: 20px;
    text-align: center;
}

.house-text p {
    margin: 70px auto;
}

.house section {
    height: 500px;
    color: white;
    text-align: center;
}



.house> :nth-child(1) {
    background: url("https://images.unsplash.com/photo-1519669011783-4eaa95fa1b7d?q=80&w=1958&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}

.house> :nth-child(2) {
    position: relative;
    background: url("https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}


.house .video-hover-box {
    position: relative;
    overflow: hidden;
    background: url("https://images.unsplash.com/photo-1700473209752-395910c89003?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat center center / cover;
}


.house .video-hover-box video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
    pointer-events: none;
}


.house .video-hover-box:hover video {
    opacity: 1;
}

.house .video-hover-box:hover .content {
    background: rgba(0, 0, 0, 0.7);
}

.house> :nth-child(3) {
    background: linear-gradient(rgba(0, 0, 0, 0.1) 80%, rgba(0, 0, 0, 1) 100%), url("https://images.unsplash.com/photo-1519761192872-d8496d4ccaaf?q=80&w=1935&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}

.house .video-hover-box .content,
.house section div {
    position: relative;
    z-index: 2;
    /* background: rgba(0, 0, 0, 0.2); */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 80px 25%;
    cursor: pointer;
    transition: 0.8s;
}

.house section div:hover {
    background: rgba(0, 0, 0, 0.4);
}

.house section div button {
    background: rgba(255, 255, 255, 0.5);
    color: white;
}

.our-text {
    padding: 150px 10%;
    text-align: center;
}

.our-text p {
    margin: 60px auto 0;
}

.our section {
    height: 140PX;
}

.our> :nth-child(1) {
    background: url(https://images.unsplash.com/photo-1602070945737-067cfd04174c?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: center center;
}

.our> :nth-child(2) {
    background: url("https://plus.unsplash.com/premium_photo-1670574873484-bf0923c33a24?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D") no-repeat;
    background-size: cover;
    background-position: center center;
}

.our> :nth-child(3) {
    background: url(https://plus.unsplash.com/premium_photo-1739831741008-6213d7f8c17e?q=80&w=2071&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: center center;
}

.our> :nth-child(4) {
    background: url(https://images.unsplash.com/photo-1629881604792-7313167e39f9?q=80&w=2069&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) no-repeat;
    background-size: cover;
    background-position: top center;
}

.our section div {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.5s;
}

.our section div:hover {
    background: rgba(0, 0, 0, 0);
}

.our section div button {
    width: 150px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    transition: 0.5s;
}

.our section div button:hover {
    width: 150px;
    background: white;
    color: black;
}

.partner {
    position: relative;
    padding: 90px 10%;
    text-align: center;
}

.partner h2 {
    margin: 10px auto 40px;
}

.partner p {
    margin: 40px auto 0;
    font-size: 1rem;
}

.partner :nth-child(2) img {
    width: 70px;
    margin: 10px 2%;
    opacity: 0.5;
    padding: 0 0 10px;
    cursor: pointer;
    transition: 0.5s;
    filter: invert(1);
}

.partner :nth-child(2) img:hover {
    opacity: 1;
}



.guides {
    display: none;
}

.guides p {
    text-align: center;
}

footer {
    background: #222;
    padding: 80px 10%;
    text-align: center;
}

footer h2 {
    color: #aaa;
}

footer p {
    margin: 20px 0;
}

footer>div {
    color: #ddd;
}

footer div form div {
    padding: 8px 0;
    display: flex;
    flex-direction: column;
}

footer div form div input,
footer div form div textarea {
    width: 240px;
    padding: 10px;
    background: transparent;
    border: none;
    border-bottom: 1px solid #555;
    color: white;
    margin: 0 auto;
}

footer div form div button {
    width: 240px;
    margin: 0 auto;
}

address {
    background: #333;
    padding: 80px 10%;
    text-align: center;
    color: #aaa;
}

address h2 {
    font-size: 1.5rem;
}

.langs {
    position: fixed;
    background: white;
    color: black;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid silver;
    bottom: 30px;
    right: 30px;
    text-align: center;
    line-height: 3rem;
    font-weight: bold;
    cursor: pointer;
    transition: 1s;
    z-index: 3;
}

.langs:hover {
    background: black;
    color: white;
    border: 1px solid silver;
}


/* 랩탑 시작점 */

@media screen and (min-width: 1366px) {
    main {
        height: 800px;
    }

    .power>div>p:nth-of-type(2) {
        display: block;
        margin: 32px 0;
    }

    .house {
        display: flex;
    }

    .house section {
        height: 600px;
        width: 100%;
    }

    .our {
        display: flex;
        flex-wrap: wrap;
    }

    .our section {
        width: 25%;
        height: 400px;
    }

    .our section button {
        font-size: 0.8rem;

    }

    .partner {
        width: 1000px;
        margin: 0 auto;
    }

    .partner :nth-child(4) img {
        width: 80px;
    }

    .guides {
        display: block;

        padding: 80px 0;
    }

    .guides table {
        width: 1000px;
        margin: 30px auto;
        border-collapse: collapse;
    }

    .guides table tr {
        border-bottom: 1px solid #ddd;
    }

    .guides table td {
        padding: 16px;
    }

    footer div {
        width: 1000px;
        margin: 0 auto;
    }

    address div {
        width: 1000px;
        margin: 0 auto;
    }

}

// 1. 한글/영어 사전 (Dictionary) 만들기
const langData = {
    ko: {
        mainDesc: "고요하지만 강력한 흔적",
        mainBtn: "자세히 보기",
        powerTitle1: "THE ULTIMATE MANLINESS",
        powerTitle2: "POWER IN SILENCE",
        powerDesc1: "MUTE는 단순히 향기를 파는 것이 아니라, 당신의 존재감을 증명하는 보이지 않는 수트를 제안합니다.<br>",
        powerDesc2: "고요함 속에 잠재된 폭발적인 에너지를 경험하세요. 한 번의 분사로 세상을 당신의 향기로 채우세요.<br>",
        powerBtn: "브랜드 가이드",
        houseTitle: "CURATED FRAGRANCE HOUSE",
        houseDesc: "당신을 위한 프리미엄 향기 큐레이션<br />전 세계에서 엄선된 니치 향수부터 트렌디한 브랜드까지, 당신의 분위기에 맞는 최적의 향을 제안합니다.",
        discoverBtn: "보러가기",
        ourTitle: "OUR SIGNATURE SERVICES",
        ourDesc: "오직 뮤트에서만 경험할 수 있는 특별함<br>단순한 향수 구매를 넘어, 당신의 삶에 깊게 스며들 수 있는 특별한 가치를 제안합니다. <br>전문가의 섬세한 터치로 완성되는 퍼스널 조향부터 전 세계 유수의 니치 향수를 직접 경험할 수 있는 오프라인 스토어까지, 오직 뮤트(MUTE)에서만 허락된 감도 높은 프리미엄 서비스를 지금 바로 확인해 보세요.",
        ourBtn1: "테마별 큐레이션",
        ourBtn2: "퍼스널 향수",
        ourBtn3: "디스커버리 키트",
        ourBtn4: "매장 안내",
        partnerTitle: "PARTNER BRANDS",
        partnerDesc: "함께하는 프리미엄 파트너",
        guidesTitle: "향의 깊이 가이드",
        guidesSub: "지속시간에 따른 향수의 종류 알아보기",
        th1: "등급",
        th2: "부향률",
        th3: "지속 시간",
        th4: "특징",
        td1_1: "퍼퓸",
        td1_2: "7 ~ 8시간 이상",
        td1_3: "가장 깊고 풍부한 향, 특별한 날 추천",
        td2_1: "오드 퍼퓸",
        td2_2: "5시간 전후",
        td2_3: "대중적이며 선명한 발향, 데일리용",
        td3_1: "오드 뚜왈렛",
        td3_2: "3 ~ 4시간 전후",
        td3_3: "가볍고 부드러운 느낌, 캐주얼한 사용",
        footerDesc: "비회원 주문 조회 및 배송 현황",
        footerName: "이름",
        footerOrderNum: "주문번호",
        footerPw: "구매 비밀번호",
        footerBtn: "조회",
        addressTitle: "뮤트와 연결되는 공간",
        addressDesc: "서울특별시 강남구 테헤란로 123, 뮤트 빌딩 15층<br>TEL: 02-1234-5678<br>EMAIL: info@mute.com"
    },
    en: {
        mainDesc: "A silent but powerful trace",
        mainBtn: "LEARN MORE",
        powerTitle1: "THE ULTIMATE MANLINESS",
        powerTitle2: "POWER IN SILENCE",
        powerDesc1: "MUTE doesn't just sell scents; we propose an invisible suit that proves your presence.<br>",
        powerDesc2: "Experience the explosive energy dormant in the silence. Fill the world with your scent with a single spray.<br>",
        powerBtn: "BRAND GUIDE",
        houseTitle: "CURATED FRAGRANCE HOUSE",
        houseDesc: "Premium fragrance curation for you.<br />From globally selected niche perfumes to trendy brands, we suggest the optimal scent for your vibe.",
        discoverBtn: "DISCOVER",
        ourTitle: "OUR SIGNATURE SERVICES",
        ourDesc: "Exclusivity only at MUTE.<br>Beyond a simple purchase, we offer special values that permeate deep into your life. <br>From personal blending finished by expert touches to offline stores where you can experience leading niche perfumes, discover premium services only at MUTE.",
        ourBtn1: "CURATED COLLECTIONS",
        ourBtn2: "PERSONAL PERFUME",
        ourBtn3: "DISCOVERY KIT",
        ourBtn4: "STORE LOCATION",
        partnerTitle: "PARTNER BRANDS",
        partnerDesc: "Premium Partnership",
        guidesTitle: "Fragrance Intensity Guide",
        guidesSub: "Learn about perfume types based on duration",
        th1: "Type",
        th2: "Conc.",
        th3: "Duration",
        th4: "Features",
        td1_1: "Parfum",
        td1_2: "Over 7~8 hrs",
        td1_3: "Rich scent, recommended for special days",
        td2_1: "Eau de Parfum",
        td2_2: "Around 5 hrs",
        td2_3: "Popular and clear scent, for daily use",
        td3_1: "Eau de Toilette",
        td3_2: "Around 3~4 hrs",
        td3_3: "Light and soft, for casual use",
        footerDesc: "Non-member order tracking and shipping status",
        footerName: "Name",
        footerOrderNum: "Order No.",
        footerPw: "Password",
        footerBtn: "TRACK",
        addressTitle: "STAY IN MUTE",
        addressDesc: "15F, MUTE Bldg, 123 Teheran-ro, Gangnam-gu, Seoul, Korea<br>TEL: +82-2-1234-5678<br>EMAIL: info@mute.com"
    }
};


$(document).ready(function() {
/* 기본언어 한글 */
    let currentLang = 'ko'; 

    $('#lang-btn').click(function() {
    
        currentLang = currentLang === 'ko' ? 'en' : 'ko';
        
    
        $(this).text(currentLang === 'ko' ? 'EN' : 'KO');


        $('[data-key]').each(function() {
            let key = $(this).attr('data-key');
            if (langData[currentLang][key]) {
                $(this).html(langData[currentLang][key]);
            }
        });
    });
});