GitHub Pages에서 블로그 만들기. Html로 레이아웃 만들어 보기. header, content, footer

 

 

깃허브(github)에 html, css 그리고 js파일까지 올려봤다.

프론트엔드(frontend) 기본 환경은 끝났다고 볼 수 있다.

물론 자기만의 도메인을 구매해서 연결하는 방법도 있다.

백엔드(backend)를 개발해야 할 수 있다.

데이터베이스(DB)를 사용하지 않고 파일로 블로그를 구성할 계획이다.

시작하기.

이제 첫 페이지를 만들어 보자.

기본적으로 웹사이트를 보면 왼쪽 상단엔 로고가 있다.

예쁜 배경 이미지나 색을 헤데(header) 부분에 넣고 대메뉴를 구성되어 있다.

화면 왼쪽엔 대메뉴에 따른 세부 메뉴가 나타난다.

또는 헤드 부분 대메뉴를 선택하면 팝업식으로 세부 메뉴가 나오는 구성도 있다.

본문(content)은 세부 메뉴에 대한 내용이 나타난다.

본문 상단에는 현재 어느 메뉴인지 내비게이터가 보인다.

하단은 푸터(footer)라 하고 제작 정보나 연락할 이메일 등이 있다.

 

레이아웃 구성

간단하게 어떤 구성으로 첫 화면을 꾸밀지 레이아웃을 정했다.

홈페이지 처음 만들 때 필요한 정보를 담은 홈페이지로 정했다.

레이아웃

간단하게 어떤 메뉴로 만들지 간략하게 텍스트로 넣었다.

그리고 하나씩 만들어 갈 계획이다.

물론 중간에 메뉴가 수정될 수도 있다.

 

텍스트로 구성

엉성해 보이지만 당연하다.

그냥 생각한 메뉴를 텍스트로 적었을 뿐이다.

이제 하나씩 꾸며가보자.

Header 영역 만들기.

영역 만들기 전 디렉터리를 좀 더 구성했다.

개발 환경

기존에 css와 js 디렉터리는 있었다.

추가로 추가할 화면 html을 담을 html 디렉터리를 추가했다.

각 화면마다 필요한 이미지를 담을 images 디렉터리도 추가했다.

 

header 부분

먼저 header 부분 태그를 코딩했다.

body태그 전체는 12라인에서 div로 감쌌다. 

14~18라인에서는 왼쪽 로고와 오른쪽 사이트 맵을 구성 했다.

19~29라인은 header에서 gnb인 주 메뉴를 보여주는 부분이다.

gnb는 Global Navigation Bar의 약자다.

익혀두면 실전에서 커뮤니케이션에 도움이 된다.

git 명령어

깃허브(GitHub)에 디플로에 해서 화면을 확인했다.

 

header

아직 꾸밈(CSS)과 기능(JavaScript)을 적용 안 해서 보기가 안 좋다.

괜찮다.

CSS 적용하면 더 멋지게 될 것이다.

Container 영역 만들기.

이제 가운데 부분을 만들어보자.

container

해당 부분을 32~54라인까지 container 의미인 div로 묶었다.

33라인은 class=snb라고 명칭 했다.

snb는 Sub Navigation Bar의 약자로 사이드 메뉴 또는 gnb의 하위 메뉴를 의미한다.

lnb(Local Navigation Bar)와 비슷하다.

기획 회의 때 GNB, LNB, SNB 등 용어가 나오면 메뉴 관련이라고 이해하자.

40라인부터는 메인 화면 부분이다.

실제 쓰고 싶은 내용을 기록하고 필요하면 이미지를 넣어도 된다.

41라인을 보면 location이 나오는데 현재 어느 위치에 있는지 메뉴 경로를 표현한다.

이제 화면에 어떻게 나오는지 보자.

container

아직 CSS 적용이 안 돼서 왼쪽 메뉴가 상단에 나온다.

엉성하지만 현재 메뉴 위치도 잘 나온다.

이미지도 잘 불러와졌다.

이제 마지막 단계가 남았다.

Footer 영역 만들기.

마지막 하단에 Footer를 만들 차례다.

Footer에는 보통 copyright 등 저작권 표시, 연락처, SNS 등을 넣는다.

footer code

사실 특이한 건 없다.

우선 copyright만 살짝 적어줬다.

footer

 

마무리

이렇게 heder, content, footer를 만들어 봤다.

CSS를 적용하지 않아 멋지게 꾸며지진 않았다.

하지만 처음부터 완벽하게 하려다 보면 지친다.

한 단계식 완성도를 높여 가는 것이 더 효율적이다.

모든 코딩이 그러하듯~