yyj4853 님의 블로그

리디자인 템플릿 2025/11/25(화)

yyj4853 — Tue, 25 Nov 2025 14:07:57 +0900

리디자인 템플릿 _ 비디오 제거.zip

11.85MB

[피드백]

[문제점]

[해결코드]

[해결코드 정리]

2025 / 11 / 24(월) 코딩 복습 D.O.D / 95%

yyj4853 — Mon, 24 Nov 2025 14:11:45 +0900

DOD.zip

3.99MB

[피드백]

[문제점]

[해결코드]

[해결코드 정리]

리디자인 템플릿 2025/11/20(목)

yyj4853 — Thu, 20 Nov 2025 16:15:06 +0900

리디자인 템플릿 비디오 제거.zip

9.82MB

rem 값을 쓰는 이유

yyj4853 — Thu, 20 Nov 2025 15:35:20 +0900

✅ 1. rem은 “사용자 기본 글자 크기”를 기준으로 계산되는 단위

1rem = html { font-size }
브라우저 기본값(대부분 16px) → 1rem = 16px

그래서:

12.5rem = 12.5 × 16px = 200px

즉,
12.5rem = 200px 과 완전히 동일한 값인 거야.

그런데 rem을 쓰면 장점이 생김.

✅ 2. rem은 “확장성”이 좋아서 반응형에 강함

유저가 브라우저에서 기본 글자 크기를 키우면
rem 단위로 디자인된 레이아웃들은 전체적으로 비율이 맞게 커짐.

→ 접근성 + 반응형에 강함
→ px은 고정이라 크기 변화가 없음

✅ 3. rem을 쓰면 전체 디자인 시스템이 일정한 비율로 움직임

예를 들어 spacing 시스템을 아래처럼 만들 수 있음:

1rem = 16px
2rem = 32px
3rem = 48px
12.5rem = 200px

이러면 디자인 가이드 만들기도 쉽고
여러 컴포넌트의 패딩, 마진, 폰트 사이즈 등 규칙이 생김.

반면 px만 쓰면 페이지마다 숫자가 따로 놀아서 유지보수 어려움.

✅ 4. 실무에서는 px → rem 변환해서 쓰는 게 추세

특히 대기업/브랜딩/반응형 중심 프론트엔드에서 더 그래.

결론

⭐ 왜 12.5rem를 쓰는가?

200px과 같은 값이지만
반응형, 접근성, 디자인 일관성, 유지보수에서 훨씬 유리해서.

video 넣는법

yyj4853 — Thu, 20 Nov 2025 14:57:11 +0900

브라우저가 video 태그를 지원하지 않습니다.

</video>

<h1>FUJIFILM COLLECTION</h1>

</div>

</section>

.main-video {

position: relative;

width: 100%;

height: 100vh;

overflow: hidden;

}

/* 비디오 자체 설정 */

.main-video video {

position: absolute;

top: 50%;

left: 50%;

width: 100%;

height: 100%;

object-fit: cover;

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

}

유튜브 URL(iframe) 방식 — 장점과 단점

✔ 장점

다운로드 & 인코딩 필요 없음 (가장 큰 장점)
링크만 바꾸면 영상 교체 가능 → 유지보수 편함
누가 봐도 업데이트 쉬움

❌ 단점 (실무에서 가장 치명적)

절대로 완벽한 풀스크린 “배경 영상”처럼 보이지 않음
(유튜브 플레이어 UI 구조가 있어서)
모바일에서 자동재생이 완전히 보장되지 않음 (특히 iOS)
유튜브 로고, 유튜브 워터마크 완전 제거 불가
→ 브랜드 사이트에서 싫어함
로딩 속도 느려짐 (유튜브 iframe이 무거움)
광고 뜰 수 있음 (브랜드 사이트에 최악)
회사/서버 정책에서 외부 플랫폼 의존을 싫어함
→ “서비스 안정성 문제” 발생

✔ 결론:
빠르게 임시로 쓰기엔 좋지만, 브랜드/기업 사이트에선 거의 안 씀.

mp4 파일을 직접 사용하는 방식 — 실무 1위

✔ 장점 (왜 실무에서 다 이걸 쓰나?)

완전한 Fullscreen Background Video 구현 가능
(object-fit: cover)
광고 없음
로고 없음
브랜드 이미지 100% 유지 가능
로딩 속도 훨씬 빠름
CSS로 자유롭게 다룰 수 있음
모바일 대응이 훨씬 예측 가능
유지보수 명확함
→ “video/main.mp4”만 교체하면 됨

❌ 단점

영상 파일을 직접 갖고 있어야 함
파일 크기 관리 필요 (압축/인코딩)

✔ 하지만 정식 웹사이트·기업 페이지·프로젝트에서는
이 방식이 압도적으로 표준임.

최종 정리 (현업 기준)

브랜딩 또는 기업 웹사이트 = 무조건 mp4 쓰는게 정답
임시 페이지, 개인 포트폴리오, 이벤트 페이지 = 유튜브도 OK

2025 / 11 /20(목) 코딩 복습 D.O.D / 90%

yyj4853 — Thu, 20 Nov 2025 14:31:27 +0900

DOD.zip

3.99MB

[피드백]

웹 부가설명

/* 아래와 같은 상황에서는 header가 불필요한 태그가 되지 않도록 header에 fixed 사용하기 */

/* .topbanner에 position 속성 두개 사용되었음*/
/* fixed 사용할때는 width: 1920px 사용하지 않기 */
/* line-height: 1.6;는 전체적으로 적용하지 않고 문장에 적절히 사용
-> 이구간에 필요하지 않음, 최하위 태그까지 상속되기 때문에 상위 태그에 사용시 위험 */
/* vertical-align: baseline; -> 아주 옛날에 사용하던 코드로 현재 사용하지 않음 */

<header> <div class="topbanner"></div>
</header>

header {
position: relative;
z-index: 3;
}

.topbanner {

position: absolute;
align-items: center;
justify-content: center;
position: fixed;
width: 1920px;
font-size: 14px;
line-height: 1.6;
vertical-align: baseline;
color: white;
}

[문제점]

[해결코드]

[해결코드 정리]

리디자인 템플릿

yyj4853 — Wed, 19 Nov 2025 16:14:21 +0900

리디자인 템플릿 _ 유용진.zip

9.82MB

2025 / 11 / 19(수) 코딩 복습 D.O.D

yyj4853 — Wed, 19 Nov 2025 14:44:10 +0900

DOD.zip

3.99MB

[피드백]

position: absolute;
left: 0; right: 0;
width: -> 제거 후에 스크롤 발생 가능성 o

position: absolute; 사용 지양

display로 구현할 수 있는건 display 사용

a태그에 max width 사용 x

겹치는 코드 정리

[문제점]

html 트리구조 떨어지는 순서대로 css 순서 구성하기

css 라이브러리랑 겹치는 직관적인 이름 지양 (fixed 라는 class를 사용했음)

[해결코드]

DOD.zip

3.99MB

[해결코드 정리]

코딩 복습 모작 모음

yyj4853 — Wed, 19 Nov 2025 14:41:53 +0900

코딩 복습

조선미녀 모작 / ~ 10/24 완 10.20 블로그 이동

조선미녀 모작 / ~ 10/24 완 10.20

https://codepen.io/yyj4853/pen/bNEvpRG 완료 10.17 금 10/20 월 10/21화 10/22 수 10/23 목

yyj4853.tistory.com

H FASHION 모작 10/21 블로그 이동

H FASHION 모작 10/21

10.21 완 https://drive.google.com/drive/folders/10j60kFLVzh-VLGwkir4iNZ9vPJF_id9A?usp=sharing ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ

yyj4853.tistory.com

D.O.D 모작 2025.11.19(수) 블로그 이동

2025 / 11 / 19(수) 코딩 복습

[피드백] [문제점] [해결코드] [해결코드 정리]

yyj4853.tistory.com

D.O.D 모작 2025.11.20(목) 90% 블로그 이동

2025 / 11 / 2(목) 코딩 복습 D.O.D / 90%

[피드백][문제점][해결코드][해결코드 정리]

yyj4853.tistory.com

오답노트 디자인

yyj4853 — Fri, 7 Nov 2025 14:30:18 +0900

4.트렌드 분석의 결과로 가장 알맞은 것은?
① 매출 예측표
② 디자인 스타일과 컬러 방향 제시
③ 사용자 페르소나 작성
④ 브랜드 스토리 기획
정답: ②

트렌드 분석은 현재 시장에서 어떤 디자인 스타일, 색상, 폰트, 그래픽 요소가 유행하는지를 조사하는 과정임

10.아래 중 사용자 분석 결과의 시각화 방법으로 알맞은 것은?
① 페르소나 카드
② 워드클라우드
③ 캘린더 일정표
④ ①과 ② 모두
정답: ④

워드클라우드

ㄴ 문서의 문구와 단어를 분석하여 중요도나 사용 빈도를 직관적으로 파악할 수 있도록 시각화하는 표현 기법.

핵심단어 시각화라고도 불림

11.시장·트렌드·사용자 분석의 결과를 종합해 설정하는 단계는?
① 콘셉트 도출 단계
② 기획서 디자인
③ 인쇄 제작
④ 피드백 회의
정답: ①

콘셉트 도출 단계 = “감성적 방향” + “시각적 언어”를 설정하는 과정

즉 시장 트렌드와 사용자 분석의 결과를 종합해서 설정해야함