Yeonee's Story

안녕하세요. #yeoneeblog 여니입니다 :) 지난 며칠간 14강까지 부트스트랩을 이용하여 기본적인 웹사이트 만드는 틀을 짜보았습니다. 이번 부트스트랩으로 웹사이트 만드는 프로젝트를 진행하며, 개발시 부트스트랩 적용에 대해 조금이나마 이해하고 중간 중간 응용하여 웹 사이트를 만드는 과정을 알아보게 되었습니다. 이번 포스팅에서는 그동안 작업한 부트스트랩으로 웹사이트 만들기 중 필요한 내용을 목록별로 쉽게 찾아볼 수 있도록 정리하여봅니다. 1. 부트스트랩 소개 및 개발환경 구축하기 https://yeoneeluv.tistory.com/282 [개인프로젝트] Garden of Books 책들의정원 1 (부트스트랩 소개 및 개발환경 구축하기) 안녕하세요. https://blog.naver.com/sysysy..

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

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div , p{ box-sizing: border-box; } #footer{ /* 작업을 위한 임시스타일*/ width: 1000px; height: 150px; } #footer>div , #footer>p{ width: 100%; } #footer_1{ height: 20%; } #footer_1 > a{ text-decoration: none; color : black; font-weight: 600; margin: 15px; /* vertical-align: middle; */ /* 수직 구조에서 가운데로 오게끔 해주는 속성 */ line-height: 29px; } #footer_2{ font-size:..

안녕하세요. #yeoneeblog 여니입니다 :) DOCTYPE html> Document div{ box-sizing: border-box; /* 지금부터 지정하는 가로세로길이는 테두리까지 포함한 길이임을 의미 */ border: 1px solid red; } /* 전체를 감싸는 div wrap */ .wrap{ width:1000px; height: 800px; margin:auto;/* 좌우로 가운데로 자동정렬 시켜줌*/ } /* 크게 3가지 영역에 스타일 부여*/ /* #header , #content , #footer*/ .wrap>div{ /* class 속성이 wrap이면서 자손태그중 div태그에만 스타일 부여하겠다 */ width: 100%; } #header, #footer{ height..