해민

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

Css 에서 이미지를 붙일 수 있는 방법이 2가지가 있다. 1️⃣ 태그를 이용한 방식2️⃣ background-image 를 이용한 방식 둘 다 똑같이 경로를 통하여 이미지를 불러오는 방식인데 두 방식의 차이점은 무엇일까? 알아보자 🔶 두 방식의 차이점▪️img 태그     - 이미지 로딩이 실패할때 alt를 통해 결과물 출력 가능      - 태그 자체가 "이미지"라는 의미를 가지고있어 검색 엔진에 인식되어 노출된다.  ▪️background-image    - 이미지를 불러오지 못할때 대체할 무언가가 존재하지않는다.    - 태그가 아닌 속성이기때문에 "이미지"라는 의미를 갖지 못하여 검색에 노출되지않는다.     따라서 각각 어떠한 경우에 사용하면 좋을까 ?  ✔️ 태그 컨텐츠에 관련이 있는 ..

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