한 걸음씩

반응형 웹사이트를 만들 때는 모바일을 기준으로 먼저 만들고 데스크탑로 넘어가야 한다 모바일에서 만들어둔 코드를 참고하면서 데스크탑에서 수정할 부분만 mediaquery로 만들어주면 된다 min-width ~이상 max-width ~이하 /* 데스크탑 버전 */ @media screen and (min-width: 768px){ .banner{ top: 0; bottom: auto; /* margin-bottom: 169px; */ } .banner-title a{ height: 80px; } .landing{ align-items: center; /* padding-top: 169px; */ } .landing-title{ font-size: 50px; text-align: center; margin-b..

► UX User Experience 제품이나 서비스를 사용하는 사람들이 느끼는 전체적인 경험과 만족도를 개선하고 최적화하기 위한 디자인과 개발 분야 일반적으로 기업에서 기획자 역할 (UX Researcher, User Researcher) 예시 러쉬 매장 근처만 가도 맡을 수 있는 러쉬 향기 백화점 1층에서 느껴지는 좋은 향수 향기 원하는 음악을 검색할 때 검색 기능이 적절하게 작동하고 검색 결과가 정확하게 나오는 것 설계 사람들의 마음과 생각을 이해하고 정리해서 제품에 녹여내는 과정이 필요 유저 리서치, 데이터 설계 및 정제, 유저 시나리오, 프로토타입 설계 등이 필요 ► UI User Interface 서비스와 사용자 간의 상호작용을 가능하게 하는 디자인 요소들을 개발하고 구현하는 분야 일반적으로 ..

► Responsive Web Design 디바이스 종류나 화면 크기에 상관없이, 어디에서든 일관된 레이아웃 및 사용자 경험을 제공하는 디자인 기술 Bootstrap grid system의 12개 column과 6개 breakpoints를 사용하여 반응형 웹 디자인을 구현 ► Grid system breakpoints 화면 크기(breakpoints)에 따라 12개의 칸을 각 요소에 나누어 주는 것 웹 페이지를 다양한 화면 크게에서 적절하게 배치하기 위한 분기점 화면 너비에 따라 6개의 분기점 제공(xs, sm, md, lg, xl, xxl) 각 breakpoints 마다 설정된 최대 너비 값 "이상으로" 화면이 커지면 grid system 동작이 변경됨 ⎣col-sm-6 : column에서 sm사이즈로..

💡 부트스트랩은 자주 사용해서 익숙해지기 + 외우기 X ► Bootstrap 프런트엔드 라이브러리(Toolkit) 반응형 웹 디자인 & CSS 및 JS 기반의 컴포넌트와 스타일 제공 컴포넌트 : 여러 개의 프로그램 함수들을 모아 하나의 특정한 기능을 수행할 수 있도록 구성한 작은 기능적 단위 Hello, world! https://getbootstrap.com/docs/5.2/getting-started/introduction/ Get started with Bootstrap Bootstrap is a powerful, feature-packed frontend toolkit. Build anything—from prototype to production—in minutes. getbootstrap.co..

1. 개요 ► Semantic Web 웹 데이터를 의미론적으로 표현하고 연결하는 개념 for 컴퓨터가 데이터의 내용과 문맥을 더 효율적으로 이해하고 더 지능적으로 활용 2. Semantic in HTML ► HTML Semantic Element 기본적인 모양과 기능 이외에 의미를 가지는 HTML 요소 검색엔진 및 개발자가 웹 페이지의 콘텐츠를 이해하기 쉽게 만들어줌 semantic element 설명 header introductory content, typically a group of introductory or navigational aids nav purpose is to provide navigation links, either within the current document or to ot..