flex2 [프로젝트 1차] Cha.Dam.Hwa (3/1 - 2일차) 1. Nav 만들기 (컴포넌트화 완료) 1-1. logo 만들기 SoolDamHwa의 로고처럼 우리가 만들 ChaDamHwa의 로고도 의미있게 만들고 싶었다. 차(TEA)를 파는 사이트이니, 찻잎과 꽃, 그리고 차를 마시면서 대화하는 의미를 주고 싶어서 말풍선도 함께 추가해서 한 송이의 꽃처럼 표현했다. 또한, 우리나라 전통차를 파는 사이트라서 영어를 사용하기 보다, 한글을 사용해서 만들고 싶었다. 그래서 한글 초성만을 이용해서 깔끔하고 심플하게 만들어보았다. 1-2. Nav 만들기 (컴포넌트화) 웹사이트에서 계속 반복적으로 나타나는 Nav는 컴포넌트화를 시켜주었다. 우리는 "구독하기" 메뉴를 이번 프로젝트에서 하지 않기로 했기때문에 메뉴에는 "담화마켓(스토어)"과 "로그인"만 보여진다. flex를 사용.. 2022. 3. 3. Westagram main-page (HTML & CSS & JavaScript) 인스타그램을 모티브로 위스타그램을 만들어 보았다. 가장 먼저 레이아웃 틀부터 잡아주었다. 위 사진처럼 feeds태그와 main-right태그를 묶어줄 wrap태그를 만들고 wrap태그를 묶어줄 main태그 그리고 메뉴바인 nav태그까지!! 전체 레이아웃 구조를 위 사진과 같이 만들어주었다. nav태그를 만들기 전에 가장 먼저 생각해야 할 것은 각 요소들을 어떻게 배치해서 만들것이냐에 대한 고민이다. 가로배치를 해야하기때문에 nav태그안에 3개의 요소들을 각각 파란틀로 만들어준 후 각각의 파란틀안의 요소들을 또 div태그로 잡아주었다. 물론 메뉴바이기때문에 ul태그로 묶어서 li요소들로 배치해서 만들어주어도 된다. 메뉴바는 엄청 중요한 요소가 아니기때문에 div태그를 써서 만들든, ul태그를 써서 만들든 .. 2022. 2. 12. 이전 1 다음
