워프 워드프레스 :: WP홈페이지 제작

WP홈페이지 제작 - 회사소개 내용 입력

워드프레스/중급 홈페이지 제작 2014. 5. 6. 09:42

회사소개 부분의 두 개의 서브메뉴(페이지)에 각 페이지 성격에 맞는 내용을 생각해서 작성합니다.

일반적인 글쓰기로 넣어도 상관은 없지만 부트스트랩의 몇가지 기능을 사용하면 더 좋습니다. 이와 관련된 내용들은 부트스트랩 2.3.2 사이트에 가면 포스팅을 위해 사용할 만한 CSS, Componets, JavaScript 등이 예제로 잘 나와 있습니다.

http://getbootstrap.com/2.3.2/

인사말 부분은 "비주얼" 모드에서 아래의 내용을 넣었습니다. 생각대로 나오지는 않을 것입니다만 그냥 입력하고 이후 수정합니다.

사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. “냐옹(NyaOng)” 홈페이지를 방문해주셔서 감사합니다.

“냐옹”은 2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.

“냐옹”은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.

“냐옹”의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.

항상 집사님의 건강, 애묘의 건강을 위해 노력하는 “냐옹”이 되겠습니다. 감사합니다.

냐옹 대표 아무개

<브라우저>

<p>사랑스러운 나의 고양이를 위한 만족스러운 제품을 제공하는 회사. "냐옹(NyaOng)" 홈페이지를 방문해주셔서 감사합니다.<⁄p>
<p><blockquote>"냐옹"은  2012년 설립 이래로 애묘인을 위한 제품에 대한 끊임없는 고민을 통해 가장 좋은 제품을 합리적이고 경제적인 가격으로 제공하는 것만을 생각하고 있으며, 다양한 제품들을 테스트하고 엄선하여 판매하고 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"은 각종 인터넷 쇼핑몰, 오픈마켓 등을 통해 제품을 판매하고 있으며 아래의 링크를 통해 판매처로 이동하실 수 있습니다.<⁄blockquote><⁄p>
<p><blockquote>"냐옹"의 공식 홈페이지에서는 취급하는 상품 및 상품에 대한 정보 그리고 각종 지원을 통해 고객과 가까이 하고자 합니다.<⁄blockquote><⁄p>
<p>항상 집사님의 건강, 애묘의 건강을 위해 노력하는 "냐옹"이 되겠습니다. 감사합니다.<⁄p>
<p>냐옹 대표 아무개<⁄p>

blockquote 들여쓰기 부분이 위에 처럼 세로선으로 표시되는 것은 부트스트랩 스타일 때문입니다. 주의할 점은 "비주얼" 상태에서 blockquote 를 넣게 되면 세 부분으로 나뉘어 나오지 않고, 하나로 묶여 나오기 때문에 내용을 입력한 후 '텍스트' 모드로 들어가서 소스를 수정해 줘야 한다는 것입니다.
비주얼 모드와 텍스트 모드에서 서로 차이가 발생하는 것은 워드프레스 포스팅에서 자주 일어나는 일이기때문에 포스팅할 때는 항상 생각대로 출력되는지 확인을 꼭 해보는 습관이 필요합니다.

연혁 페이지의 내용들은 "탭(tab)" 방식으로 넣을 것입니다. 부트스트랩에서 기본적으로 제공하고 있으며 보다 쉬운 포스팅을 위한 "부트스트랩 쇼트코드 플러그인"들도 많지만 우선은 기본적인 하드코딩 방식으로 넣을 것입니다.

부트스트랩 홈페이지에서 Component 부분에 보면 Navs 라는 항목이 있습니다. 그곳에서 아래쪽으로 좀 더 스크롤하면
"Tabbable nav"라는 항목이 있습니다. 이 부분의 소스를 복사합니다.

연혁 페이지로 돌아와서 "텍스트"모드에서 복사한 소스를 [ctrl+v]로 붙여넣습니다. 그 후 내용을 수정합니다.

소스를 잘 보면 위쪽에 제목, 아래쪽에 내용이 들어가는 것을 알 수 있습니다. 그래서 위쪽에 년도, 아래쪽에 사업 활동내용을 넣었습니다. 2012년 입력을 위해 요소를 하나씩 더 추가한 것도 보입니다.

사실상 이것만으로는 매우 썰렁한 페이지입니다만 페이지 타이틀과 내용 사이에 대표이미지를 넣거나 하는 방법을 통해 좀 더 보기 좋은 페이지로 업그레이드 할 수도 있을 것입니다.

저작자표시 비영리 변경금지

'워드프레스 > 중급 홈페이지 제작' 카테고리의 다른 글

WP홈페이지 제작 - 페이지번호 추가 (2)	2014.05.06
WP홈페이지 제작 - 구글지도 넣기 (0)	2014.05.06
WP홈페이지 제작 - 코멘트(댓글) 부분 수정 (0)	2014.05.03
WP홈페이지 제작 - 카테고리 레이아웃 수정 (0)	2014.05.02
WP홈페이지 제작 - Contact 폼 수정 (0)	2014.04.28