fixed3 [프로젝트 1차] Cha.Dam.Hwa (3/2 - 3일차) 1. Sub-nav 만들기 내가 느낀 기존의 술담화 홈페이지의 불편한 사항은 메인페이지를 스크롤로 내려도, 메뉴가 따라 내려오지 않기 때문에, 다시 메뉴를 보려면 한참을 위로 올려야하는 불편함이 있었다. 그래서 그 사항을 개선하기 위해서, 스크롤을 내려도 메뉴가 위에 있게끔 만들었다. position:fixed 와 z-index 기능을 사용했다. 그랬더니 잘 작동된다. 하지만, 아래의 컨텐츠들이 nav와 subnav를 인식못해서 위로 올라와버리는 현상이 발생했다. 그래서 margin-top값을 줘서 문제를 해결했다. 2. Main Page 만들기 main 페이지 아직, 미완성의 메인 페이지다. 영상에서 보이는 분홍 부분에 슬라이더 기능을 넣어서 이벤트 배너를 넣으려한다. 아직 이벤트 배너는 만들지 못했다.. 2022. 3. 3. [프로젝트 1차] Cha.Dam.Hwa (3/1 - 2일차) 1. Nav 만들기 (컴포넌트화 완료) 1-1. logo 만들기 SoolDamHwa의 로고처럼 우리가 만들 ChaDamHwa의 로고도 의미있게 만들고 싶었다. 차(TEA)를 파는 사이트이니, 찻잎과 꽃, 그리고 차를 마시면서 대화하는 의미를 주고 싶어서 말풍선도 함께 추가해서 한 송이의 꽃처럼 표현했다. 또한, 우리나라 전통차를 파는 사이트라서 영어를 사용하기 보다, 한글을 사용해서 만들고 싶었다. 그래서 한글 초성만을 이용해서 깔끔하고 심플하게 만들어보았다. 1-2. Nav 만들기 (컴포넌트화) 웹사이트에서 계속 반복적으로 나타나는 Nav는 컴포넌트화를 시켜주었다. 우리는 "구독하기" 메뉴를 이번 프로젝트에서 하지 않기로 했기때문에 메뉴에는 "담화마켓(스토어)"과 "로그인"만 보여진다. flex를 사용.. 2022. 3. 3. [HTML & CSS] Position => fixed ? sticky ? 오늘은 position 속성 중 비슷한 2가지에 대해서 자세히 포스팅을 해보려 한다. 지난번에 인스타그램을 클론코딩해보았는데, 최근에 인스타그램과 똑같은 기능을 구현해보고자하는 마음이 들었다. 그래서 스크롤바를 내려도 메뉴가 고정된 위치를 유지하고, 인스타그램의 사이드바인 "스토리 기능"과 "팔로우 추천 기능"이 스크롤바를 따라 함께 움직이는 기능을 구현해보고 싶어졌다. 그러면서 알게 된 지식들을 다시 상기시켜보고자 업로드해본다. fixed와 sticky를 사용한 완성물 위 영상을 보면 상단의 메뉴바가 고정되어 스크롤을 내려도 사라지지않는다. 또한, 오른쪽의 사이드바 메뉴는 스크롤을 따라 움직인다. sticky는 CSS의 Position의 속성으로 사용된다. Fixed가 브라우저 화면의 절대 위치를 사용.. 2022. 2. 26. 이전 1 다음
