CSS14 Bootstrap | 강의 | 04 - 부트스트랩으로 이미지를 다루어 보자. / caption을 달아보자. 1. 부트스트랩으로 이미지를 다루어 보자 - 초보 개발자들에게는 어렵게 CSS와 HTML 조합으로 홈페이지 디자인을 만들어도 이미지 다루기 어려웠던 기억이 있을 것입니다. - 부트스트랩은 이 이미지 마저 쉽게 다룰수 있도록 각종 방법을 만들어 놓았습니다. - 이번 시간에는 가볍게 이미지를 다뤄 보겠습니다. 2. 우선 이미지를 노출 시켜보자 1. 이미지를 아래처럼 추가시켜 보자 - 위치는 게시판에 맨위다. - div 안에 img 태그로 이미지를 첨부해보자. - 이미지는 이걸 다운 (무료이미지) ▼ 위치는 게시판에 맨위다. 이름 나이 주소 지브이 26 상수동 하이리 26 태릉입구 래부기 26 망원동 글쓰기 1 2 3 ▼이런 웹에서 확인해보니 엉망이다. 반응형 웹에서 이미지만 반응하지 않고 있습니다.멋진 이미.. 2017. 7. 9. CSS - 엑셀 다운로드 출력시 셀서식 지정 엑셀 다운로드 출력시 셀서식 지정 안녕하세요 고코더 입니다. HTML을 작성하고 이를 엑셀로 다운로드 받을 수 있습니다.프로그램 개발시 만들어야 하는 대표적 기본 기능 입니다. 자주 마주치는 문제는 셀서식에 "01" 데이터를 숫자로 넣으면 "1"로 표현하여 노출 됩니다. ▼엑셀에서도 설서식 설정 없이 "01"을 입력하면 "1"로 기록 됩니다.그래서 그런지 HTML로 엑셀 다운로드 기능으로 언어에서 엑셀을 다운받으면01를 1로 노출 됩니다. 이럴땐 HTML에 style에 서식을 설정하면 해결 가능합니다. ▼대표적으로 실무에서 많이 쓰는형식만 우선 예제로 만들어 봤다.숫자형식 문자형식 소수점 형식날짜형식 아까처럼 "01"이 정상적으로 보일려면 문자형식으로 지정하면 해결 됩니다. 이외에 다양한 형식은 ->ht.. 2017. 7. 5. Bootstrap | 강의 | 03 - 버튼을 달고 전체 폭을 조종 / Button / container 1. 이번 시간에는 - 게시판이 생겼으니 "글쓰기"와 같은 버튼이 필요하겠죠? - 그리고 좌우로 가득찬 게시판도 좋지만 보통은 좌우에 적당한 폭이 있어 - 한눈에 보기 편한 모양으로 만들어 볼것입니다. - 역시나 이번에도 부트스트랩 매력에 푹 빠져봅시다.! 2. 버튼을 다뤄보자 2.1 버튼을 만들어 보자 ▼ 아래처럼 코딩해보겠습니다. 버튼 버튼 ▼ 화면에 띄워보니 기본 버튼, 부트스트랩 버튼이 보입니다. 딱 봐도 부트스트랩 버튼은 디자인 들어갈 준비가 되어 있네요.이제 디자인을 입혀 봅시다. ▼ 아래 코드를 입력하고 웹으로 봐볼까요? Basic Default Primary Success Info Warning Danger Link Large Medium Small XSmall ▼ 디자인을 보는 직관적인 .. 2017. 7. 2. Bootstrap | 강의 | 02 - 게시판 모양을 만들어 보자! / 테이블 / 페이징 1. 깔끔한 게시판 모양을 한방에! 부트스트랩 매력 느껴보자! - 홈페이지를 꾸미려다가 CSS와 HTML을 작성하다. 포기해버린 경험들이 있으실 겁니다. (저부터..) - 기본 뼈대는 나와도 디자인 입힐려면 디자이너 퍼블리셔가 아닌 이상 고역일거고 정작 프로그램 공부가 뒷전 입니다. - 이전 강의에서도 말했듯이 부트스트랩은 아주 훌륭한 디자이너와 퍼블리셔가 제공한 CSS입니다. - 이번 강의에서 부트스트랩 매력에 푹 빠져 보시죠!!! 2. 테이블을 만들어 보자! 2.1 Table 이란 - 실무에서 혹은 좋은 강의를 제공하는 곳에서 선행 되신분들은 보단 태그가 많이 활용되는걸 알고 있을 겁니다. - 데이터를 FM으로 나타내는 요소는 이므로 두번째 시간이니 부트 스트랩으로 이쁜 을 만들어 보는 시간을 가지겠.. 2017. 7. 2. Bootstrap | 강의 | 01 - 부트스트랩 이란? / 설치 / 다운로드 1. 부트스트랩이란 1.1 제작사 http://getbootstrap.com/ (한글 번역 개인사이트 http://bootstrapk.com/) - 부트 스트랩은 트위터에서 개발한 UI 라이브러리 입니다. - 마크 오토(Mark Otto)와 제이콥 손튼(Jacob Thornton)이 개발하였습니다. (둘이 안사귐 게이아님) 1.2 목적 - 모바일 환경에 적합한 반응형 웹을 개발하기 위한 라이브러리 - 디자인으로 인한 개발시간을 단축하기 위한 개발도구 2. 부트스트랩 설치 2.1 설치설명 - 부트스트랩 설치는 압축을 풀기만 하면 됩니다. - 프로젝트 할때 디자인과 퍼블리셔가 css,js 폴더를 만들어주고 나서 개발을 시작할텐데 바로 그 CSS 폴더를 제공해주는 것 입니다. - 웹스톰 같은 IDE를 프로젝트.. 2017. 7. 1. 이전 1 2 다음
