728x90

프로젝트/블로그 사이트 5

5. 포스트 페이지 구현하기

홈페이지에서 포스트 페이지 링크 연결하기 notifications 글쓰기 home.html 파일의 해당 코드 부분에 글쓰기 버튼을 추가한다. 그리고 글쓰기 버튼 클릭시 포스트 페이지로 이동하도록 링크를 걸어준다. header .navbar ul li a button{ width: 5rem; height: 2rem; background: var(--primary-color); color: #fff; border: none; border-radius: 2rem; cursor: pointer; font-size: .9rem; transition: .2s; } header .navbar ul li a button:hover{ background: var(--secondary-color); letter-spaci..

4. 홈페이지 구현하기

홈페이지 뼈대코드 구성하기 html 폴더에 home.html 파일을 생성하고 위와 같이 작성한다. 폰트아우썸 아이콘과 구글 머터리얼 아이콘을 함께 사용한다. 구글 머터리얼 아이콘은 CDN 형태로 위와 같이 추가하면 사용이 가능하다. 헤더 디자인하기 홈페이지 헤더에는 사용자 정보를 조회하기 위한 아바타 아이콘과 알림 메세지를 조회하기 위한 종모양 아이콘이 위치하고 있다. Sunblog notifications 구독중37 구독자119 최근 내가 업로드한 글 여행 1시간전 공감9 제주도 오른 까페 방문하기 성산의 해안도로를 따라 달리다 보면 보이는 오른 카페는 제주도의 자연요소 중 하나인 오름을 모티브로 한 카페의 콘셉트인 만큼 자연과 함께 커피를 마시며 즐길 수 있었던 것 같아요.😋 촌부 by 농돌이 구독하..

3. 스토리 페이지 구현하기

스토리 페이지 뼈대코드 구성하기 html 폴더에 story.html 파일을 생성하고 위와 같이 작성한다. 폰트아우썸 아이콘도 좋지만 이번 시간에는 구글 머터리얼 아이콘도 함께 사용한다. 구글 머터리얼 아이콘은 CDN 형태로 위와 같이 추가하면 사용이 가능하다. 헤더 디자인하기 헤더에는 스토리(블로그)를 검색하기 위한 검색창이 위치한다. 또한, 사용자 계정을 생성하기 위한 시작하기 버튼도 있다. Sunblog search 시작하기 맛집 라이프 IT 연애 시사 여행 1시간전 공감9 제주도 오른 까페 방문하기 성산의 해안도로를 따라 달리다 보면 보이는 오른 카페는 제주도의 자연요소 중 하나인 오름을 모티브로 한 카페의 콘셉트인 만큼 자연과 함께 커피를 마시며 즐길 수 있었던 것 같아요.😋 촌부 by 농돌이 구..

2. 랜딩 페이지 구현하기

헤더 디자인하기 Sunblog 서비스 스토리 연락처 나만의 스토리를 만들어보세요 Sunblog는 자신의 이야기나 친구들과 공유할 이야기 등 여러분들의 창의성을 마음껏 발휘해볼 수 있도록 많은 서비스를 제공해드립니다. 저희 서비스를 이용하여 일상에서 일어나는 일들을 스토리로 기록해보세요! 글쓰기 다른 사람들의 스토리가 궁금하신가요? Sunblog는 다양한 사람들의 흥미진진한 이야기들을 담고 있습니다. 여러분의 삶에서 일어나는 기상천외한 이야기를 읽어보실 준비가 되셨나요? 스토리 보기 서비스에 대해 하고싶은 말이 있나요? Sunblog는 여러분의 생각과 제안을 기다립니다. 아이디어가 생각나시거나 궁금한 사항이 있으시면 언제든지 저희에게 연락주세요. 연락하기 Sunrise. All rights reserved..

1. 프로젝트 준비

프로젝트 백업을 위한 깃허브 저장소 생성하기 프로젝트를 진행하면서 작업순서를 기억하고, 혹시나 모르는 데이터 손실 상황에 대비하기 위하여 깃허브 저장소를 생성하고 해당 저장소에 백업을 할 수 있도록 준비한다. 프로젝트 루트 디렉토리 생성하기 프로젝트 코드가 저장될 루트 디렉토리를 생성한다. 프로젝트 구조 잡기 프로젝트 루트 디렉토리 내부에 위와 같이 index.html 파일과 html, css, js. imgs 폴더를 생성한다. index.html 기본뼈대 코드 생성하기 index.html 은 웹사이트에서 다른 페이지로 이동하기 위한 안내 페이지다. 뼈대 코드를 위와 같이 생성한다. 아이콘 사용을 위하여 위의 CDN 링크를 index.html 파일의 head 부분에 추가한다. 랜딩페이지의 디자인을 위하여..

728x90