Yeonee's Story

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 23.10.01 (일) - 실습(부트스트랩으로 웹사이트 만들기9) +티스토리 https://yeoneeluv.tistory.com/303 [개인프로젝트] Garden of Books 책들의정원 9(웹 디자인 - 테이블) 안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 지난 시간에는 이전에 만들었던 홈페이지에서 각각 링크를 적용시켜 각 페이지의 html을 만들어주었는데요, 오늘은 부트스트랩을 이용한 테 yeoneeluv.tistory.com - 코테(1) +티스토리 https://yeoneeluv.tistory.com/304 [프로그래머스/Java] 코딩테스트 Lv.0 짝수는 ..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 이전에 만들었던 홈페이지에서 각각 링크를 적용하지 않고 임시로 지정했던 #부분을 이번에 링크연결을 해주려고 합니다. 웹 사이트 링크 연결하기 먼저 기존 네비바에 홈페이지 제목으로 부여해준 # 부분에 'index.html'을 입력해줍니다. 기본이 되는 소개페이지도 'index.html'로 입력해줍니다. 그리고 나머지 메뉴부분에 링크가 될 각각의 html명을 입력해줍니다. 'book.html'을 입력후 '?bookKind=종류' 이런식으로 입력하여 각각의 목록을 매개변수로 서버쪽으로 보내주는 코드를 입력해줍니다. 로그인 부분의 링크부분도 'loginForm.html'을 입력해줍니다. 이제 해당 목록 혹은 메뉴등을..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 모달 modal Garden of Books의 특징 Garden of Books는 다른 사이트와 다른 깔끔한 구성을 보여줍니다. 모든 페이지가 사용자가 접근하고 사용하기 쉽도록 구성되었습니다. 자세히 알아보기 베스트셀러 추천 10년치 베스트셀러 및 화제의 책, 올해의 책을 만나보세요. 좋은 책에 투자하고자 하는 당신의 안목을 지켜드립니다. 자세히 알아보기 새로나온 책 새로나온 멋진 책들을 소개합니다. 내가 읽던 장르 혹은 전혀 다른 장르의 새로운 책들을 만나고 경험해보세요. 자세히 알아보기 위 코드를 jumbotron div 바로 아래에 추가해줍니다. 위와 같이 체크된 부분의 모습이 추가된 것을 볼 수 있습니다. 모..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 지난번 네비바 및 외부 스타일 적용 이후 푸터를 만들어보고자 합니다. 푸터 (footer) Copyright © 2023김소연 대표자 소개저는 책들의 정원의 대표 김소연입니다. 저는 사람들에게 도움을 주고 유용한 기능을 구현할 수 있는 멋진 개발자가 되고 싶습니다. 네비게이션 소개 베스트셀러 새로나온 책 도서목록 고객센터 SNS 인스타그램 유튜브 네이버 by 김소연 지난번 네비바 만들었던 코드 아래에 footer 코드를 추가해줍니다. 이전에 만들어본 부트스트랩 활용 적용 포스팅에서 배웠던 부분이 사용됩니다. 한 줄의 여러개 열이 들어갈 수 있도록 해줄 수 있습니다. col으로 한줄의 구역을 부여할 수 있습니다..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 네비게이션 바를 구성해보겠습니다. 네비바 컨테이너 만들기 책들의 정원 네비바 코드들을 순서대로 넣어줍니다. 주로 네비바 컨테이너를 만들 때는 'container-fluid'라고 만들어줍니다. 한 줄의 코드가 길어질 경우 다음 줄로 넘겨도 상관없습니다. 네비바 구성하기 홈페이지 가로를 줄이다보면 이렇게 우측 상단에 생기는 긴 막대바처럼 생긴 아이콘 바를 볼 수 있습니다. 이 아이콘 바를 적었던 코드를 2줄 복사하여 붙여넣어 주어 우리가 자주 보던 3줄로 버튼으로 예쁘게 만들어줍니다. 네비바 구성하기 네비바를 감싸는 큰 div인 div class="container-fluid" 안에 div class="navba..