GitHub Clone Design Coding

HTML과 CSS에 익숙해지기 위해 github(https://heropcode.github.io/GitHub-Responsive/)페이지 디자인을 클론 해본다.

페이지의 상단 Header(빨간 박스) 부분 부터 디자인 한다. 헤더는 가운데 정렬이 되어있고 그 안에 파란색 박스(컨테이너) 부분은 오른쪽, 왼쪽 두개로 나뉘어져 있다.

헤더 부분의 컨테이너만 따로 보자면 왼쪽 컨테이너는 로고와 메뉴로 또 나뉘어져 있다.

html

 <div class="header">
        <div class="container">
            <div class="container-left">
                <div class="logo">
                    <img src="https://heropcode.github.io/GitHub-Responsive/img/logo.svg" alt="GitHub Logo">
                </div>
                <div class="menu">
                    <div class="menu-item">Persnoal</div>
                    <div class="menu-item">Open Source</div>
                    <div class="menu-item">Business</div>
                    <div class="menu-item">Explore</div>
                </div>
            </div>
        </div>
    </div>

헤더 부분의 html을 작성하고 나면 아래 그림과 같은 페이지가 나온다.

이제 부터 원본 깃헙 페이지와 동일하게 css 스타일을 적용한다.

css는 가장 먼저 body를 reset 해준다. 브라우저 마다 body 디폴트 속성이 적용 되어있기 때문이다.
css reset하는 방법은 여러가지가 있으나 이것은 차후에 하도록하고 margin과 padding을 0으로 초기화 시켜준다.

body {
    margin: 0;
    padding: 0;
}

.header {
    background: yellogreen;
}

헤더 부분을 확인하기위해 배경 색상을 설정한 페이지이다.
헤더 안의 컨테이너를 확인하기 위해 컨테이너에 사이즈와 배경색을 설정해준다.

.container {
    width: 980px;
    background: tomato;
}

헤더 안의 컨테이너 영역이 구분되어 졌다. 로고와 메뉴를 보면 순서대로 수직으로 정렬되어 있다. div 태그는 보는것과 같이 순서대로 아래로 스택 되어진다.
먼저 메뉴 부터 수평으로 맞추고 메누와 로고를 수평으로 맞춰준다.

.logo {
    float: left;
    margin-right: 20px;
}
.menu {
    float: left;
}
.menu-item {
    float: left;
    padding: 8px 10px;
}

float: left는 수직으로 정렬된 요소들을 수평으로 정렬시켜준다.

이제 컨테이너를 가운데로 정렬을 시켜주면 원래의 깃헙 사이트의 헤더부분과 어느정도 비슷해진다.

컨테이너의 가운데 정렬은 margin을 사용하는데 margin의 값을 auto로 설정해주면 왼쪽 오른쪽을 균등하게 여백을 남겨주게 되므로 요소가 가운데에 위치하게 되는 효과가 있다.

.container {
    width: 980px;
    margin: auto;
    background: tomato;
}

마지막으로 헤더와 컨테이너를 구분하기 위해 설정해줬던 배경색을 흰색으로 바꿔주면 완성이다.

.header {
    background: white;
    border-bottom: 1px solid lightgrey;
}

.container {
    width: 980px;
    margin: auto;
}