UI 2

[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

UX 와 UI 의 차이점

🔶 UX UX는 사용자의 경험을 고려한 디자인이다.우리가 웹 사이트를 사용하며 시스템이나 서비스 등을 이용하면서 느낀 반응이나 경험을 토대로 디자인하는것이다. 예를 들어 우리가 웹 페이지를 이용할 때버튼을 클릭하면 보이지않던 메뉴가 나온다거나Top 버튼을 누르면 상단으로 이동하는 등  웹사이트를 이용하면서 여러 기능들과 서비스를 경험해보았을것이다. 이렇듯 사용자의 경험을 관점으로 더 편리하게 이용할수있도록 설계를 하여시각적으로 풀어내어 배치하고 디자인하는것을 UX 라고 한다. 🔶 UIUI 는 사용자의 사용환경 즉 시각적으로 접하는 디자인을 총칭한다.웹 페이지를 이용할때 우리가 필요한 기능들과 요소들을 디자인 한다. 예를 들어 UX 에서 TOP 버튼을 눌러 상단으로 가는것을 설계하면           ..

CSS 2025.01.14