해민

  • 홈
  • 태그
  • 방명록

스타벅스 1

[HTML + CSS + JAVASCRIPT] 반응형을 적용한 스타벅스 UI 따라 만들어보기

우선 스타벅스의 Header 부분의 외관 디자인을 따라만들어보았다. 반응형을 확인하기 위해 화면을 줄여보면? 그렇다면 문제점을 이제 하나하나 뜯어보겠다. 1️⃣ 첫번째 문제처음 화면을 줄일때 처음부터 전체적으로 줄어들어 nav가 로고를 침범하는 문제가 발생❓ 원인width 값의 설정값 방식 차이 % 로 설정할 경우 창이 줄어들면 블럭의 크기 또한 같이 줄어든다.px로 설정할 경우 창이 줄어들어도 블럭은 절대크기를 유지한다. 따라서 header 안에 inner 요소 width를 % 로 설정한 것이 원인이다. 💡 해결 header .inner { width: 75%; height: 100%; position: relative; }⬇️ header .inner { ..

CSS 2025.01.22
이전
1
다음
더보기
프로필사진

해민

기록하는 프로그래밍

  • 분류 전체보기 (64) N
    • Java (12)
    • JavaScript (11)
    • HTML (6)
    • 알고리즘 (1)
    • CSS (3)
    • 데이터베이스 (7)
    • 리액트 (9)
    • JSP (4)
    • SpringBoot (9)
    • Backend (2) N

Tag

어노테이션, Let, 쿠키, useState, react, useEffect, 비동기, axios, java, database, 리액트, var, const, 컴포넌트, 동기, 호이스팅, javascript, Spring, map, MySQL,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바