IT Dev Log

부트스트랩 hobbyX 사이트 - part 4. 미션 만들기 - 미션 섹션 과 타이틀 만들기 style.css : mission 텍스트가 어두워서 잘 보이지 않는다. 텍스트를 밝은색, 중앙에 배치하도록 변경 타이틀과 내용 사이에 구분선을 추가한다. .undreline 을 통해서 구현한다. 각각의 미션에 대해서 작성한다. 세개의 컬럼을 이용해서 창의성, 품질, 경험 에 대한 내용을 작성한다. 첫번째 항목 : 창의성, 두번째, 세번째 미션도 복사해서 내용을 수정한다. 다음은 상품 이미지에 대한 설명과 애니메이션 추가 - 필요한 영역을 먼저 설정한다. 이미지와 내용을 다음과 같이 채운다. 현재 small 사이즈 화면에서 위의 내용을 확인하면 다음과 같이 보인다. 이를 좀더 보기 좋게 개선해보자. 텍스트 디자인..

부트스트랩 hobbyX 사이트 - part 3. navbar 만들기 - navbar 만들기 style.css style.css 에 nav-menu 추가 설정 - 메뉴가 collapse 되었을때 X버튼 모양으로 변경 X 버튼 모양 만들기 script.js : 버튼이 클릭될때마다 .change 속성을 넣고 빼준다. 자바스크립트에서 스크롤 이벤트를 사용해서 custom-navbar 를 적용할 예정이다. 적절한 포지션을 찾기위해서 console.log() 로 포지션 값을 찾아본다. 크롬에서 debug 모드로 들어가 console 값을 확인한다. 여기서 찾은 값을 사용해서 custom-navbar 적용한다. 메뉴에서 현재 오픈되어 있는 페이지에 nav-active 디자인 추가 끝.

부트스트랩 hobbyX 사이트 - part 2. 배너 만들기 제일 먼저 헤더를 생성하고 헤더에는 네비게이션 메뉴(navbar) 와 배너(banner)를 넣는다. 헤더에 대한 스타일을 변경한다. ( style.css ) 배너 만들기 배너 디자인 변경을 위해서 banner, banner-heading, banner-par 를 추가한다. style.css 에서 banner 에 대한 디자인을 변경한다. 처음 화면이 로딩될때, 글자의 움직임이 약같 어색해서 다음 옵션을 추가. Responsive View : 다음은 반응형뷰 디자인 md 이상의 스크린에서는 우측정렬, sm 이하의 경우는 center 로 정렬한다. 끝.

부트스트랩 hobbyX 사이트 - part 1. 개발 준비 부트스트랩을 사용해서 Hobby관련 사이트를 만들 예정이다. 먼저 개발에 필요한 라이브러리 설치한다. - 프로젝트 폴더 생성하고 index.html, script.js, style.css 파일을 생성 script.js , style.css 라이브러리 추가 - 부트스트랩 공식 페이지에서 starter template 을 복사해서 index.html 생성 - 타이틀 및 타이틀 아이콘 변경 - Fontawesome / google font 라이브러리 추가 구글 폰트를 본문(body) 에 적용 - JQuery 에 대한 라이브러리 변경 ( 안하면 일부 애니메이션 효과가 안될수 있음. ) jQuery CDN 에서 jQuery 3.0 uncompress 를 ..

Admin Dashboard 만들기 part 11. 푸터 만들기 ( footer ) Footer 생성을 위한 섹션 만들기 첫번째 컬럼 만들기 두번째 컬럼 : 저작권 표시 ( 카피라이트 ) 푸터 디자인 하기 끝.

Admin Dashboard 만들기 part 10. 글 남기기 ( quick posting ) 글쓰기를 위한 섹션 만들기 : 이전 "활동 기록" 섹션을 분할하여 진행한다. 게시물 입력을 위한 form 작성 Responsive View 끝.

Admin Dashboard 만들기 part 9. 최근 로그 남기기(bootstrap accordion) 최근 활동 기록 모듈을 위한 section 지정하기 부트스트랩의 카드 모듈을 이용해서 사용자 활동 기록을 남긴다. collapse 모듈을 이용해서 상세 내용을 추가한다. 활동 타이틀을 클릭하면 상세 내용이 펼쳐진다. 한번더 클릭하면 collapse 상태로 되돌아간다. 동일한 방식으로 여러개의 리스트를 추가한다. 부트스트랩 아코디언 모듈 사용하기 bootstrap accordian 이란? 여러개의 게시물은 접었다/폈다 해야 하는 경우, 하나의 게시물이 열리면 다른 게시물이 자동으로 닫히는 기능이다. 화면에서 하나의 글만 열어서 확인할수 있어서 화면이 깔끔해진다. card 전체를 id="accordion..

Admin Dashboard 만들기 part 8. 태스크 만들기(bootstrap tasks) 태스크를 위한 섹션 만들기 태스크는 이전에 만든 막대진행바 섹션에 구현하도록 한다. xl 화면에서 막대진행바와 태스크가 함께 보여주고, 그보다 작은 화면에서는 새로운 줄에 표시하도록 설정한다. 두 그래프가 세로로 표시될때, 사이에 간격(margin)을 추가한다. Javascript 만들기 javascript를 이용해서 간단하게 텍스트를 변경하는 기능을 추가할 수 있다. 하지만 여기서는 기본 화면에 대한 처리만 한다. 자세한 기능 구현은 javascript 쪽을 검색해서 구현. 태스크 디자인 변경하기 - edit 아이콘 디자인 변경 - delete 아이콘 추가 태스크 아이템 디자인 먼저 body 의 배경색을 변경..

Admin Dashboard 만들기 part 7. 막대 진행바 만들기( Progress bar ) 막대 진행바를 위한 섹션 만들기 : xl 스크린의 경우 화면의 절반(6 grid)만 사용하고, 다른 사이즈의 화면의 경우 full(12) grid 를 사용한다. 첫번째 아이템 만들기 다른 아이템 추가하기 디자인 변경 : 위 화면을 보면 다음 아이템과의 간격이 없이 붙어서 표시된다. 그래서 각각의 아이템에 bottom margin(mb-4) 을 추가한다. 끝.

Admin Dashboard 만들기 part 6. 테이블만들기2 ( bootstrap table) - 테이블 헤더 만들기 - 테이블 바디 만들기 : 아이템 상태 표시에서 기존의 button 을 사용하지 않고 badge 사용함. - 뱃지(badge) 스타일 변경 새 아이템 추가 : 첫번째 아이템을 복사해서 새로운 아이템을 추가한다. 테이블 디자인 - table-dark : 어두운 색의 테마 사용 - table-hover : 마우스 커서를 테이블 위로 올리면 해당 아이템이 표시된다. 페지네이션 만들기 Responsive View 만들기 : 화면 사이즈가 xl 에서 col-6 를 사용해서 두개의 테이블을 한줄에 표시한다. 끝.