#워드프레스 초보자 가이드 #가탈작 가이드
이 글을 통해 얻게 되는 정보
- 워드프레스 웹사이트의 레이아웃 구성
- 헤더, 바디, 푸터, 섹션, 컬럼, 위젯의 개념
하지만 개발자나 디자이너가 아닌 운영자의 입장에서 코딩 전문지식과 디자인 전문지식은 깊게 알 필요가 없다고 생각합니다.
글의 순서
STEP 01 - 워드프레스 웹사이트의 레이아웃
위의 웹사이트의 레이아웃은 어떻게 구성되어져 있는걸까요?
우리는 전문개발자도 아니고, 디자이너도 아닙니다. 단지 워드프레스 웹사이트를 이해하고 활용해서 수익을 창출하기를 원하는 운영자입니다. 따라서 코딩과 디자인에 대해 전문가 수준까지 깊이있게 이해할 필요는 없습니다.
다만 원활한 웹사이트 운영을 위해서 ”헤더, 바디, 푸터, 섹션, 컬럼, 위젯” 에 대한 기초적인 개념 정도는 알고 있을 필요가 있습니다.
#워드프레스 초보자 가이드 #가탈작 가이드
STEP 02 - 헤더, 바디, 푸터 이해하기
워드프레스 웹사이트는 헤더, 바디, 푸터 3개의 부분으로 구성되어 있습니다.
우리는 개발자가 아닙니다. 물론 전문 태그 용어를 알아두면 좋기야하겠지만 초보 레벨부터 전문용어 따위는 1도 필요없습니다. 그냥 ‘아, 저 부분이 헤더(Header)구나’, ‘아, 저 부분이 바디(Body) 구나’, ‘아, 저 부분이 푸터(Footer) 구나’ 정도로만 가볍게 이해하고 넘어가시면 되겠습니다.
- 헤더(Header) : 사이트 로고, 메뉴 네비게이션 등으로 구성됩니다
- 바디(Body) : 사이트의 본문 내용
- 푸터(Footer) : 주로 회사 주소, 사업자 등록번호, 통신판매업 신고번호와 같은 정보들을 푸터에 표시하게 됩니다.
헤더, 바디, 푸터같은 용어는 웹사이트 운영자의 입장에서 왜 알고 있어야 할까요?
웹사이트를 운영하다보면 코드를 삽입해야할 일이 종종 생깁니다. 예를 들어 광고 수익 창출을 위해 구글 애드센스에 가입한 다음, 광고 승인이 나게 되면 애드센스 측에서 ”이 코드를 사이트의 헤더 부분에 삽입하세요”라고 요구해옵니다.
이때 웹사이트 운영자는 코드 삽입 플러그인을 이용해서 헤더 부분에 코드를 복사 + 붙여넣기 해서 저장을 하는 간단한 절차를 밟게 됩니다.
또한 웹사이트 레이아웃을 커스터마이징 할때 헤더부분, 푸터부분이라고 용어가 나오기 때문에 웹사이트 운영자라면 적어도 헤더, 바디, 푸터가 무엇인지, 그리고 어디에 위치하는지 정도는 알고 있어야 원활하게 사이트를 운영할 수 있게 됩니다.
#워드프레스 초보자 가이드 #가탈작 가이드
STEP 03 - 섹션, 컬럼, 위젯 이해하기
워드프레스 웹사이트는 기본적으로 섹션 안에 컬럼이 있고, 컬럼안에 위젯이 들어가는 방식으로 구성되어져 있습니다. 쉽게 말해 블럭으로 테트리스를 한다고 이해하시면 편합니다.
이번 단계에서는 가장 큰 단위인 섹션부터 시작해서 컬럼, 위젯 순서로 쉽게 이해해보도록 하겠습니다. 먼저 섹션입니다.
STEP 03-1 : 섹션(Section)
먼저 섹션은 가장 큰 블럭을 의미합니다. 위의 웹사이트는 섹션1, 섹션2의 블럭 2개로 이루어져 있습니다. 여기에 컬럼을 추가해보겠습니다.
STEP 03-2 : 컬럼(column)
섹션 1에 2개의 컬럼(컬럼1, 컬럼2)을 추가하였습니다. 여기에 다시 위젯을 추가해보겠습니다.
STEP 03-3 : 위젯(Widget)
칼럼1 안에 위젯1을 추가하였습니다. 그리고 칼럼2에도 위젯2를 추가하였습니다.
위젯은 이미지, 텍스트, 버튼, 아이콘 등의 요소라고 이해하시면 되겠습니다.
STEP 03-4 : 섹션, 컬럼, 위젯 내용 정리
- 웹사이트는 블럭으로 이루어져 있습니다.
- 블럭은 섹션(가장 큰 단위), 컬럼(섹션에 포함되는 중간 단위), 위젯(이미지, 텍스트, 버튼, 아이콘 등의 요소가 들어가는 가장 작은 단위)
- 섹션으로 큰 블럭을 잡고, 컬럼으로 부분을 나누고, 나눈 부분안에 위젯(이미지, 텍스트, 버튼, 아이콘 등의 요소)를 집어넣어서 하나의 섹션을 완성합니다.
- 섹션, 컬럼, 위젯을 마치 테트리스처럼 배치해서 구성한 것이 워드프레스 웹사이트의 기본적인 레이아웃이라고 이해하시면 되겠습니다.
#워드프레스 초보자 가이드 #가탈작 가이드
STEP 04 - 레이아웃 내용 정리하기
이제 위의 웹사이트가 어떤 레이아웃으로 구성이 되어져있는지 이해할 수 있을 것입니다.
위의 웹사이트는 헤더 섹션, 바디 섹션, 푸터 섹션 3부분으로 크게 나뉘어져 있습니다.
- 헤더(Header) 섹션
- 헤더 섹션안에 2개의 컬럼을 줘서 공간을 나눈 다음, 2개의 컬럼안에 사이트 로고 위젯과 메뉴 네비게이션 위젯을 삽입해서 헤더 섹션을 구성하고 있습니다.
- 바디(Body) 섹션
- 크게 섹션 1과 섹션 2로 이루어져 있습니다.
- 섹션 1 안에 1개의 컬럼을 준 다음, 컬럼 안에 1개의 제목 위젯이 삽입되어져 있습니다.
- 섹션 2 안에 3개의 컬럼을 준 다음, 각각의 컬럼마다 이미지 위젯과 텍스트 위젯이 삽입되어져 있습니다.
- 푸터(Footer) 섹션
1개의 섹션 안에 1개의 컬럼을 준다음, 컬럼 안에 1개의 텍스트 위젯을 삽입해서 푸터 섹션을 구성하고 있습니다.
#워드프레스 초보자 가이드 #가탈작 가이드
수고하셨습니다!
이번 글의 내용을 잘 습득하셨다면 웹사이트의 레이아웃은 어떻게 구성되어져 있는지, 헤더, 바디, 푸터, 섹션, 컬럼, 위젯이 무엇인지에 대해서 알게되었을 것입니다. 그리고 그 결과 워드프레스에 대한 능력치 레벨업이 되셨을 거라고 확신합니다.
정보가 도움이 되셨나요?
가탈작 가이드 웹사이트는
자발적 정보 이용료로 운영됩니다.
인생은 GIVE & TAKE 라고 생각합니다.
물론, 이용료 지불은 당신의 자유의지 입니다.
감사합니다!