안녕하세요.
#yeoneeblog 여니입니다 :)
지난 며칠간 14강까지 부트스트랩을 이용하여 기본적인 웹사이트 만드는 틀을 짜보았습니다.
이번 부트스트랩으로 웹사이트 만드는 프로젝트를 진행하며, 개발시 부트스트랩 적용에 대해 조금이나마 이해하고 중간 중간 응용하여 웹 사이트를 만드는 과정을 알아보게 되었습니다.
이번 포스팅에서는 그동안 작업한 부트스트랩으로 웹사이트 만들기 중 필요한 내용을 목록별로 쉽게 찾아볼 수 있도록 정리하여봅니다.
1. 부트스트랩 소개 및 개발환경 구축하기
https://yeoneeluv.tistory.com/282
[개인프로젝트] Garden of Books 책들의정원 1 (부트스트랩 소개 및 개발환경 구축하기)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 먼저 부트스트랩 홈페이지에 접속하여 부트스트랩 파일을 다운로드 해줍니다. 압축을 풀어 해당 내부 폴더들을 한 번에 드래그 하여 프로젝
yeoneeluv.tistory.com
2. 점보트론
https://yeoneeluv.tistory.com/283
[개인프로젝트] Garden of Books 책들의정원 2 (점보트론)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 홈페이지를 소개해주는 메인 부분인 점보트론을 이용해보겠습니다. 점보트론 만들기 책들의 정원에 초대합니다. Garden of Books에서 당
yeoneeluv.tistory.com
3. 네비게이션 바
https://yeoneeluv.tistory.com/284
[개인프로젝트] Garden of Books 책들의정원 3 (네비게이션 바)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 네비게이션 바를 구성해보겠습니다. 네비바 컨테이너 만들기 책들의 정원 네비바 코드들을 순서대로 넣어줍니다. 주로 네비바 컨테
yeoneeluv.tistory.com
4. 외부 스타일 적용
https://yeoneeluv.tistory.com/287
[개인프로젝트] Garden of Books 책들의정원 4 (외부 스타일 적용)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 외부 스타일 적용 @import url(http://fonts.googleais.com/earlyaccess/nanumgothic.css); *{ font-family: 'Nanum Gothic'; } a{ color: #000000; text-decoration: none; } a:hover{ color:
yeoneeluv.tistory.com
5. 푸터 footer
https://yeoneeluv.tistory.com/288
[개인프로젝트] Garden of Books 책들의정원 5 (footer)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 지난번 네비바 및 외부 스타일 적용 이후 푸터를 만들어보고자 합니다. 푸터 (footer) Copyright © 2023김소연 대표자 소개저는 책들의 정
yeoneeluv.tistory.com
6. 모달 modal
https://yeoneeluv.tistory.com/290
[개인프로젝트] Garden of Books 책들의정원 6 (모달 modal)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 모달 modal Garden of Books의 특징 Garden of Books는 다른 사이트와 다른 깔끔한 구성을 보여줍니다. 모든 페이지가 사용자가 접근하고 사용하기 쉽
yeoneeluv.tistory.com
7. 미디어 media
https://yeoneeluv.tistory.com/293
[개인프로젝트] Garden of Books 책들의정원 7(미디어 media)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 패널 안에 미디어 태그를 이용하여 사진이나 그림을 각각의 구역에 넣어서 깔끔하고 예쁘게 작업할 수 있는 방법을 알아보겠습니다.
yeoneeluv.tistory.com
8. 웹 사이트 확장하기
https://yeoneeluv.tistory.com/301
[개인프로젝트] Garden of Books 책들의정원 8(웹 사이트 확장하기)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 이전에 만들었던 홈페이지에서 각각 링크를 적용하지 않고 임시로 지정했던 #부분을 이번에 링크연결을 해주려고 합니다. 웹 사이트
yeoneeluv.tistory.com
9. 웹 디자인 - 테이블 table
https://yeoneeluv.tistory.com/303
[개인프로젝트] Garden of Books 책들의정원 9(웹 디자인 - 테이블)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 지난 시간에는 이전에 만들었던 홈페이지에서 각각 링크를 적용시켜 각 페이지의 html을 만들어주었는데요, 오늘은 부트스트랩을 이용한 테
yeoneeluv.tistory.com
10. 인용구-인용구삽입, 인용구 꾸미기
https://yeoneeluv.tistory.com/307
[개인프로젝트] Garden of Books 책들의정원 10(인용구-인용구삽입, 인용구 꾸미기)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 인용구란 하나의 문장을 멋지게 표현하고자 할 때 사용합니다. 혹은 강조할 때 사용하기도 하죠. 이 인용구는 스타일시트를 이용해서 스타
yeoneeluv.tistory.com
11. 리스트 그룹 - 게시판 리스트
https://yeoneeluv.tistory.com/308
[개인프로젝트] Garden of Books 책들의정원 11(리스트 그룹 - 게시판 리스트)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 리스트 그룹이란 같은 성질을 가진 목록을 담는 그릇 같은 것입니다. 각각의 목록은 링크를 통해 이동이 가능합니다. 한 번 만들어 볼까요?
yeoneeluv.tistory.com
11-1. 리스트 그룹, Modal응용 - 게시판 리스트 모달창 띄우기
https://yeoneeluv.tistory.com/310
[개인프로젝트] Garden of Books 책들의정원 11-1(리스트 그룹, Modal응용 - 게시판 리스트 모달창 띄우
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 이전 포스팅에서 리스트 그룹을 이용하여 게시판 리스트 목록을 만드는 것을 실습해보았는데요, 해당 게시물을 누르면 책의 정보의 Modal창
yeoneeluv.tistory.com
12. 동영상 불러오기 (+ "youtube.com에서 연결을 거부"시 해결방법)
https://yeoneeluv.tistory.com/323
[개인프로젝트] Garden of Books 책들의정원 12(동영상 불러오기 + "youtube.com에서 연결을 거부"시 해결
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 외부의 영상링크를 불러와 화면에 띄울 수 있는 동영상 불러오기 실습을 해보도록 하겠습니다. "youtube.com에서 연결을 거부"시 해결방
yeoneeluv.tistory.com
13. 소스 코드 작성하기
https://yeoneeluv.tistory.com/325
[개인프로젝트] Garden of Books 책들의정원 13(소스 코드 작성하기)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 웹 사이트 내에서 소스 코드를 보여주고 싶을 때 어떻게 해야 할까요? 사용되는 방법은 태그를 이용하는 방법입니다. 태그를 이용하면 입력
yeoneeluv.tistory.com
14. 폼 - Form
https://yeoneeluv.tistory.com/332
[개인프로젝트] Garden of Books 책들의정원 14(폼 - Form)
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 폼 - Form 텍스트 박스 만들기 위처럼 댓글을 입력할 수 있는 div 박스를 만들어주면 아래와 같이 텍스트 박스가 생성됩니다. 이렇게 댓글을 작
yeoneeluv.tistory.com
'｡*:･ﾟ☆･ﾟschedule･ﾟ*:･ﾟ★･:*:･☆ *:･ﾟ★ > 개인프로젝트' 카테고리의 다른 글
| [개인프로젝트] JSP 게시판 만들기 2 (로그인 페이지 만들기) (0) | 2023.10.08 |
|---|---|
| [개인프로젝트] JSP 게시판 만들기 1 (아파치톰캣, 이클립스 설치 및 환경설정하기) (0) | 2023.10.08 |
| [개인프로젝트] Garden of Books 책들의정원 14(폼 - Form) (1) | 2023.10.07 |
| [개인프로젝트] Garden of Books 책들의정원 13(소스 코드 작성하기) (0) | 2023.10.05 |
| [개인프로젝트] Garden of Books 책들의정원 12(동영상 불러오기 + "youtube.com에서 연결을 거부"시 해결방법) (1) | 2023.10.05 |
