IU

블로그 스타일 웹페이지 만들기

블로그 스타일의 웹페이지를 간단한 박스와 텍스트 위젯을 사용하여 만들어 보겠습니다.

우측의 버튼을 클릭하여 필요한 이미지 리소스를 다운받은 후, 아래 순서대로 따라해 보세요.

 

 

2015/03/12 

사용위젯 : 박스 / 텍스트 / 이미지

예상 소요시간 : 40분

File > New Project 를 실행하여, 빈 페이지 Empty Page 를 선택한 후 윈도우 하단의 Choose 버튼 을 클릭합니다.

STEP 01

View > Resource 메뉴를 실행하여 Resource Panel 을 열고 아래 Import Resource 버튼 을 클릭하여 다운로드한 Image Resource 파일들을 불러옵니다.

STEP 02

Structure 메뉴로 돌아가서 header 요소를 선택한 후, 높이를 직접 320px을 입력하여 준 다음 Style 탭으로 이동합니다.

배경 이미지 Background ImageSTEP 02 에서 불러왔던 bg_main.jpg 를 선택하여 줍니다. 배경 사이즈 Background Size 옵션은 가로맞춤 (2 번째 옵션) 으로 변경하여 줍니다. (선택된 위젯의 가로 크기에 맞춰 이미지 크기가 조절됩니다.)

STEP 03

박스 Box 위젯 을 클릭하여 활성화 시킨 후, 배경이미지 위에 클릭+드래그 하여 그려줍니다. 생성된 박스 위젯의 크기를 140 / 140 px 로 입력한 후, 배경컬러를 설정하여 줍니다. Style 탭에서 Border 크기 값을 Stepper 를 사용하여 10 px 로 설정, 색상을 조정합니다.

그 다음 Radius 값을 80 px (Border 값을 포함한 위젯 크기의 절반) 로 입력하여 주면, 둥근 원 형태로 변하는 것을 볼 수 있습니다.

마지막으로 가로 중앙정렬 옵션을 활성화시켜, 화면의 중앙으로 고정시킵니다.

STEP 04

텍스트 Text 위젯 을 클릭하여 활성화 시킨 후, 방금 추가한 박스위젯 안에 클릭+드래그 하여 그려줍니다. 생성된 위젯을 더블클릭하여 원하는 텍스트를 입력해 준 다음, 상단의 Text 탭을 선택하여 폰트의 종류, 크기, 컬러, 정렬 등을 변경하여 준 후, 마지막으로 위젯의 크기를 조정하여 위치를 중앙으로 잡아 줍니다.

STEP 05

작업한 박스 위젯을 헤더의 하단으로 옮겨줍니다. 헤더의 영역을 벗어나는 부분은 가려져서 보이지 않는 것을 확인할 수 있습니다. 영역을 벗어난

부분도 보여주려면, 현재 선택한 위젯의 상위요소, 즉 센터박스 CenterBox헤더 Headeroverflow 속성을 visible 로 설정하여 줍니다.

STEP 06

또한 기존에 컨텐츠 영역에 추가되어 있던 텍스트 위젯을 원하는 폰트, 컬러, 크기, 굵기, 내용 으로 수정할 수 있습니다.

수정이 완료되었으면, 원하는 위치로 맞추어 줍니다.

STEP 07

Section1높이를 200px 로 조절한 다음, Structure 메뉴 중 섹션 추가하기 Add new section 버튼을 클릭하여 새로운 섹션을 추가합니다. 새로운 섹션 안에, 박스와 텍스트 위젯을 사용하여 아래처럼 이미지 박스 화면을 구성합니다.

STEP 08

이번에는 Image 위젯 을 선택하여 박스위젯 안쪽에 클릭+드래그 하여줍니다. 추가된 이미지 위젯의 Property 탭 에서 라이브러리에 있는 이미지 중 하나를 선택하고, 원본사이즈 맞춤 버튼을 눌러줍니다. 변형된 위젯의 크기와 위치를 박스 크기에 맞게 조정해 줍니다.

STEP 09

방금 제작한 이미지 박스를 선택한 상태로 alt (option) 키 를 누른 상태로 클릭+드래그 하여 박스를 복사합니다.
복사한 박스의 이미지 위젯을 다른 이미지로 변경하여 줍니다.

STEP 10

마지막으로 Footer 의 배경컬러와 텍스트를 각각 원하는 대로 변경하여 줍니다.

이제, 좌측 상단에 있는 Build 버튼을 클릭하면 브라우저에서 지금까지 작업한 내용을 확인할 수 있습니다. (Build 버튼은 스테이지에 있는 내용을 그대로 HTML 파일로 생성하여 줍니다.)

STEP 11

이제, 또 하나의 페이지 Page 를 만들고 페이지 링크 Page Link 를 걸어보도록 하겠습니다.

우측 하단의 페이지 Pages 메뉴의 첫 번째 아이콘인 새 페이지 만들기 Add new page  버튼을 클릭하여 새로운 페이지를 추가합니다.

인덱스 페이지에서 만들었던 헤더푸터는 다른 페이지에서도 동일하게 보여집니다.

STEP 12

새로 만든 페이지에는, Index 페이지에서 이미지 박스의 타이틀을 클릭했을 때 보여지는 내용을 넣어주겠습니다.

Index 페이지에서 사용했던 텍스트이미지 등 을 복사해서 새로 만든 페이지에 붙여넣고 위치크기를 조정하여 줍니다.

추가한 컨텐츠들에 각각 가로 중앙정렬 옵션을 활성화 시켜줍니다.

STEP 13

액션 Action 탭 메뉴로 이동하여, 인덱스 페이지의 이미지 박스 타이틀에는 Page1 로의 링크를, 헤더부분의 박스에는 Index 로의 링크를 각각 걸어줍니다.

STEP 14

수고하셨습니다! 이제 빌드를 실행하면, 브라우져에서 동작하는 것을 보실 수 있습니다. 

STEP 15