8. CSS 예제 (HTML 예제에 이어서~)

 

완성본: https://heropcode.github.io/GitHub-Responsive/

GitHub: Where the world builds software

 

HTML 예제: https://yeongwoo-cho.tistory.com/200

5. HTML 예제

 

우리는 여기서 header을 만들어 볼 것이다.

 

 

 

 

---

 

 

 

 

 

사실 각 브라우저는 body tag에 대하여 default margin, padding 값을 갖고 있다. ( 8px or 10px )

그래서 초기화 하는 작업이 필요하다.

 

 

 

이런 식으로 초기화를 거치게 된다.

후에는 reset.css라는 파일로 css의 전체적인 초기화 과정을 거친 후에 작업을 시작하는 방법을 배울 것이다.

 

 

 

---

 

 

 

그런데 여기서 의문점이 생긴다.

우리는 header에 대해 width, height를 지정하지 않았는데 실제 header size 처럼 지정되어 있는 것이다.

이는 기본 값(default value)에 의해 결정 된 것이다.

( Font-size: 16px, 기본 body margin, padding 값 등등 )

 

우리가 이러한 default value를 사용하려면 auto 라는 값을 지정하면 된다.

header을 클래스로 지정한 div tag의 경우 아래와 같이 지정되어 있다.

( width: 100%, height: 안의 요소에 따라 0애서 부터 증가 )

 

지정을 할 때에는 다음과 같이 사용하자. 없어도 자동으로 지정되어 있다.

 

정확히 설명하면 header 의 경우 div tag이고 이는 block element이다.

그래서 width는 100%이고, height는 첨부된 요소만큼 수직으로 증가해서 위와 같이 나타난 것이다.

 

 

 

---

 

 

 

 

container의 요소 색을 변경하니 header영역을 전부 사용하고 있다.

 

 

Container 영역의 width를 줄이고 margin을 기본값으로 설정한다. margin은 바깥 여백을 의미한다.

상하좌우의 margin을 auto로 지정해서 중앙으로 옮긴 것이다. 다시 셋팅한다는 개념이다.

 

---

 

github의 경우 요소들이 수평으로 존재한다.

하지만, div와 같이 대부분의 레이아웃을 구성하는 요소들을 통해서 화면의 구조를 잡으면 이 구조들은 항상 위에서 부터 아래로, 수직으로 쌓이게 된다. 그렇다면 우리는 어떤 속성으로 이를 수평으로 잡을 수 있을까?

 

float의 경우 수평을 만드는 속성은 아니다. 하지만 수평으로 만들어 낼 수 있다.

 

 

 

 

수평을 만들었다. 하지만 menu item들이 배경색상으로 채워지지 않고 있다. 그래서 float를 해제하는 방법을 아래에 제시했다.

 

 

 

해결했다. float라는 속성은 요소를 띄우는 형식인데, 요소를 띄워서 수평으로 바꾸는 특성을 가진다.

이렇게 띄어진다는 점이 배경에 포함되지 않는 문제점이 발생한다. 이를 해결해 주는 것이 clearfix이다.

 

 

 

---

 

 

 

이제 logo와 menu를 수평으로 놓을것이다.

 

 

 

Float left의 경우 clearfix를 통해 해제라는 것을 해야한다. 그래서 색이 날아갔다.

왜? float로 띄운 애들이 기존에 있던 container, header가 float가 포함된 요소들을 감싸지 못해서다.

clearfix를 이용해서 해지하자.

 

 

 

 

 

---

 

 

 

 

이제 디테일 조정 들어가자!

 

로고 옆에 margin-right를 5px로 조정

 

로고 아래에 여백이 많다.

—> img tag를 사용할때 발생하는 현상이다. 레이아웃을 잡을 때 상당히 불편한 요소이다. 올바른 방법은 이미지 태그를 css로 제어할때 다시 살펴보자.

Img tag selector을 사용할 것인데, img tag로 사용하면 모든 이미지에 적용되고 클래서로 지정하면 모든 img tag는 개별 클래스를 갖게 된다. 그래서 logo안에 있는 img를 의미하기 위해 다음과 같이 사용한다.

--> 의미는 logo클래스 하위에 존재하는 모든 후손들중 img tag 인것을 지칭한다.

 

 

display를 block으로 선언해서 logo 아래에 있던 여백을 수정했다.

inline element 인 img tag를 display block을 통해 block element로 변경했고 레이아웃을 잡기 편해졌다.

 

 

 

 

---

 

 

 

 

Header을 살펴보면 logo와 menu item들이 height center에 존재하는 것을 확인할 수 있다. 

 

 

수평 중앙 정렬의 경우 margin: auto; 를 통해서 간단하게 가능했다.

하지만 수직 중앙 정렬의 경우 속성이 존재하지 않는다. 

그래서 이를 해결하는 방법으로 padding을 이용한다.

 

 

1번의 내부 여백을 지정해서 2번이 수직 중앙에 위치하도록 지정하는 것이다.

 

 

 

 

 

현재 personal의 경우 요소를 가득 채우고 있다.

이때 padding 값을 늘리면 요소의 크기가 커지며 수직 중앙에 위치하도록 만들 수 있다.

 

 

 

---

 

 

 

 

현재 logo height때문에 header과 container모두 height가 맞게 지정된 것이다.

 

 

 

 

Menu-item의 크기가 더 커져서 header과 container이 이의 height를 따라간 것을 확인할 수 있다.

그리고 padding 값의 위 아래로 주어 수직 중앙에 위치함을 확인할 수 있다.

 

container에 padding 20px 0을 넣으서 좀더 height를 늘리자.

 

 

 

 

---

 

 

 

 

사실 header 밑에는 얇은 실선이 들어간다. 

1px 얇은 실선을 밝은 회색으로 지정했다.

 

 

 

---

 

 

코드 정리

 

container에 존재하는 Padding를 container-left로 옮겼다.

수정하려는 요소에 가장 가깝게 존재하는 곳에 넣는 것이 최적화, 유지보수 및 관리에 용이하다.