신기한 연구소

Git&GitHub Pages에서 레파지토리를 구성하고 소스 관리까지 했다.

기본 콘텐츠와 html을 구성했다.

html로만 만드니 왼쪽에 다 붙어있다.

이제 레이아웃을 꾸며야겠다.

HTML 소스.

6번 라인에 css 링크를 넣고 css 디렉터리에 main.css를 만들었다.

CSS로 배경색 작성.

먼저 페이지 전체 배경색을 지정하자.

3~5번 라인을 보면 body 태그에 background-color로 색을 지정했다.

어떻게 변했을까?

초록색 계열로 변했다.

하지만 기본 뒷배경을 이 색으로 하고 실제 홈페이지는 흰색으로 하고 싶다.

그래서 추가했다.

7~11 라인을 추가했다.

너비 width는 800px, margin 은 0 auto 그리고 배경색은 white로 했다.

결과는 다음과 같다.

잘 적용되었다.

HEADER 영역 만들기.

지금 왼쪽으로 항목들이 쭉 늘어서있다.

header 먼저 배치해 보자.

우선 16라인의 상단 네비와 20라인의 메인 네비는 코드상에서만 보면 된다.

그래서 화면에 나오면 안 된다.

숨겨야 해서 hide class를 만들었다.

이 구성은 단순히 글자만 숨기는 것이 아니다.

글자를 숨기고 그 자리는 보존하는 css 코드다.

9번 라인은 클릭 등 이벤트를 방지하는 코드다.

10번 라인은 글자를 투명하게 하고 11번 라인은 드래그를 방지한다.

그 결과 다음과 같이 나온다.

위 이미지를 보면 왼쪽의 상단 네비와 메인 네비라는 글자가 오른쪽을 보면 사라졌다.

그리고 그 위치에 공간은 그대로 유지되었다.

사이트맵 조정.

이제 사이트맵을 우측으로 보내고 우리의 로고로 변경할 것이다.

먼저 sitemap을 우측으로 옮기자.

16번 라인은 상단 네비 글자를 숨기기 위해 hide class로 설정했었다.

17번 라인 사이트맵은 왼쪽에 붙어 있었는데 우측 상단 적절한 곳으로 이동하자.

위 html 소스에서 13번 라인과 15번 라인을 보자.

15번 라인의 class="headernavi"가 13번 라인 id="header"에 포함된 자식 요소다.

그래서 사이트맵은 header에 자식 요소에 포함되어 있다는 의미다.

그래서 css 소스에서 25번 라인을 보자.

position:absolute로 설정했다.

부모인 header에서 position:relative로 설정했다면 absolute는 부모를 기준으로 움직인다.

실제로 header에서 position값을 설정하지 않으면 자식 요소는 브라우저 끝에 붙는다.

브라우저 크기를 조절할 때마다 우측 30px, 상단 20px의 위치에 고정돼서 따라 움직이게 된다.

즉, 우리가 만든 header 공간을 벗어나기도 한다는 의미다.

그래서 header:relative로 설정해야 header 범위에서 자식 요소가 고정된다.

이렇게 말이다.

왼쪽 상단에 logo도 이미지로 바뀌었다.

로고 조정.

html 먼저 확인해 보자.

14번째 라인을 보면 로고가 있다.

logoimg class로 설정되어 있다.

이제 css를 설정하자.

우선 31번째 라인을 보면 display를 block로 지정했다.

<a> 태그가 인라인이라 width, height 설정이 안 된다.

height:80px; 를 적용시키려면 블록으로 지정해야 하니 display:block;로 설정했다.

33번째 라인은 이미지 경로를 넣고 배경으로 반복되지 않도록 no-repeat로 설정했다.

34번째 라인 overflow는 사이즈를 벗어나는 이미지는 hidden 하라는 뜻이다.

35번째 라인에서 들여 쓰기인 text-indext:100%;를 사용해 오른쪽으로 이동한다.

34번째 라인의 overflow:hidden; 덕에 범위를 벗어나게 돼서 글자는 안 보이게 된다.

36번째 라인의 white-space:nowrap; 는 혹시 글자가 길어 줄 바꿈이 되는 걸 막는다.

이제 로고가 제대로 나오는지 확인해 보자.

로고 이미지가 잘 나왔다.

이미지는 좀 다듬어야겠다.

마무리

HTML과 CSS를 공부하다 보니 모르는 게 정말 많았다는 것을 알았다.

열심히 공부하자!

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

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

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

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

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

시작하기.

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

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

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

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

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

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

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

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

레이아웃 구성

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

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

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

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

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

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

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

이제 하나씩 꾸며가보자.

Header 영역 만들기.

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

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

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

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

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

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

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

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

gnb는 Global Navigation Bar의 약자다.

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

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

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

괜찮다.

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

Container 영역 만들기.

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

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

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

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

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

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

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

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

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

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

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

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

이미지도 잘 불러와졌다.

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

Footer 영역 만들기.

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

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

사실 특이한 건 없다.

우선 copyright만 살짝 적어줬다.

마무리

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

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

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

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

모든 코딩이 그러하듯~