2015-12-05 22:52:40 나머지 예제는 생략합니다. Intro. 지금까지 CSS, Bootstrap을 알아보았습니다. 여태까지는 각각의 요소를 알아보는 시간이었다면, 이제는 직접 실습을 진행해보겠습니다. 지금부터는 개인을 위한 포트폴리오 페이지를 만들어 보도록 하겠습니다. 1. 프로젝트 이해 이 프로젝트는 간단한 개인용 포트폴리오 웹 페이지 입니다. 2. 프로젝트 생성하기 - File -> New -> Project -> Web Project를 선택하여, default Project를 선택합니다. - 프로젝트 명은 Mini-proj 으로 지정합니다. - 이전 챕터에서 다운받아논 bootstrap 파일들을 프로젝트에 Drag & Drop 해서 옮겨둡니다. - 다음 프로젝트 오른쪽 클릭하여 New from template -> HTML -> Blank File 선택한 뒤, mini-proj.html로 지정합니다. 1) 기본 틀 잡기 - 생성된 HTML 파일에 아래와 같은 틀을 잡기 위한 코드를 입력합니다.
- 다음으로 이 문서에서 jQuery와 bootstrap을 사용할 수 있도록 링크를 추가하는 작업을 해야 합니다. - <head> 태그 안에 link와 script를 통해 추가해주세요.
2) 네비게이션 메뉴 - 부트스트랩을 이용해서 상단의 메뉴 바를 설정해 보도록 하겠습니다. - Body 태그안에 아래 코드를 추가합니다.
Line 4: data-toggle="collapse" 속성으로 화면이 작을 때는 메뉴를 자동으로 접도록 만듭니다. data-target 속성으로 어떤 메뉴를 자동으로 접을지 정하게 됩니다. Line 5~7: 접힌 상태에서 표시되는 메뉴 아이콘을 정의합니다. Line 10: a 태그의 brand 클래스로 메뉴 바의 타이틀을 정해줍니다. Line 11~18: 메뉴 바 안에 메뉴를 설정하는 부분입니다. <div> 태그에 nav-collapse 속성과 id를 지정해서 접히는 메뉴라고 지정한 뒤에 <ul> 태그 안에 <li> 태그 각각이 하나의 메뉴가 됩니다. 3) 메인 페이지 시작 & 이름 및 추가도구 - 컨텐츠가 들어갈 부분을 작성할 차례입니다. - 상단에는 네비게이션 바를 작성했고, 하단을 통째로 감싸 줄 레이아웃을 만듭니다. - 위에서 작성한 <div> 태그안에 작성합니다.
Line 4: span을 나눌 컨테이너를 지정합니다. 영역은 9:3의 비율로 나누기 위해 아래 span9과 span3을 이용합니다. Line 7: Logo 문구를 만들기 위해 상위에서 logo 클래스를 적용하고 <h2> 태그를 적용했습니다. Line 9~14: span3 영역에 Print 와 Download가 가능하게 아이콘을 추가하였습니다. 4) 주소, 스킬, 퀵 컨택트 폼 - 포트폴리오의 메인을 다룰 차례입니다. - 하단 레이아웃은 레이아웃 상에서 결국 하나의 'row'를 형성합니다. 따라서 하단을 통으로 커버할 'row' <div>를 작성합니다. - 그리고 4:8 비율을 유지하기 위해 'span4' 그리드를 그 안에 작성합니다. - 두 번째 컨테이너 다음 <hr/> 태그를 넣은 후 아래 코드를 작성하세요.
- 이 안에 프로파일 사진과 간단한 주소를 넣겠습니다.
- 다음으로 자신이 보유한 스킬을 리스트 형식으로 나타내고, 각각의 스킬 레벨을 프로그레스 바를 활용하여 나타내겠습니다. - 먼저, 스킬 항목의 타이틀을 'nav-list'를 이용해서 그려보겠습니다. - 'nav-list'는 <ul>태그에 클래스 명을 'nav nav-list'로 작성하여 사용합니다. (address 태그 끝나는 부분아래 작성합니다)
- 다음으로 보유한 스킬을 나타낼 차례입니다. - 보유한 스킬명은 라벨로 표시하고 보유한 스킬의 레벨은 프로그레스 바를 이용해서 나타낼 것 입니다. - 상위에 작성한 코드 밑에 작성합니다.
- 마지막으로 컨택트 폼을 작성하도록 하겠습니다.
- 기본 틀을 생성했으니, 내용 구성을 위해 코드를 작성합니다.
- 마지막으로 컨택트 폼의 전송 버튼만 생성해 주시면 됩니다.
5) 메인 컨텐츠 & 테이블 - 'span8' 그리드를 하나 추가합니다.(span4 그리드의 닫힘 태그 다음에 작성합니다)
- 그리드를 추가했으니, 컨텐츠를 넣을 차례입니다. - 먼저 추가할 카테고리는 'Education' 입니다. - 위 코드의 span8 div 태그 안에 작성하세요. - 다음은 Work Experience 부분입니다. - <div class="span8"> 닫히는 부분 아래에 작성합니다. - 다음으로는 Interest 부분입니다. - span8 태그가 닫히는 부분에 작성합니다.
- 메인 하단의 마지막 부분인 Portfolio 입니다. - 위 방식처럼 닫힌 태그 바로 아래 작성합니다. - 포트폴리오 이미지는 임시적으로 썸네일을 가져와서 적용시켰습니다.
6) footer 넣기 - footer는 웹 페이지를 마무리 짓는 부분입니다. - footer는 일반적으로 로고, 주소, 저작권 표시, 저작권자 등을 담고 있습니다. - body 태그가 끝나는 지점에 <footer> 태그를 추가합니다.
7) 네비게이션 이동 연결하기 - 지금 상태로는 상단의 네비게이션이 동작하지 않습니다. - 'href' 프로퍼티를 이용하여 네비게이션 메뉴와 페이지 내 카테고리와 연결시키겠습니다. - 각각의 카테고리에 id 프로퍼티를 지정한 적이 있습니다. - 상단 바 네비게이션을 아래와 같이 수정하여 각 카테고리로 이동하는 코드로 수정하겠습니다.
자 이렇게 해서 개인용 포트폴리오 제작 프로젝트가 완성이 되었습니다. * 본 포스팅은 이재근 등 4명 저 "Fast Web Service Build up: 웹 서비스를 쉽고 빠르게 구축하는 기술" 저서를 참고하여 작성하였습니다 |