🖥️Google Header 만들기
우리는 우선 Google 웹사이트의 상단 부분을 먼저 작업해볼 예정입니다.
HTML로 문서의 구조틀 잡기
Google 웹사이트 상단의 Gmail, Images, Sign in 등은 사용자가 클릭하고 다른 페이지로 이동할 수 있는 기능을 해야 하기 때문에, a
태그를 활용해 작업해보도록 하겠습니다. (바둑판 모양의 아이콘에 대한 작업은 편의상 생략하겠습니다.)
가장 먼저 아래와 같이 초기 코드를 작성해 볼 수 있을것 같습니다.
들여쓰기 (인덴팅)
위에 작성된 코드를 보면, 여는 태그와 닫는 태그가 수직선 상에서 같은 칸에 위치해 있는 것을 확인할 수 있고, 하위 자식 태그는 부모 태그의 아랫줄에서 시작하고 우측으로 두 칸 이동이 되어서 내용이 채워져 있음을 확인할 수 있습니다.
이와 같은 규칙을 들여쓰기(인덴팅)이라고 합니다.
HTML을 작성할때, 자식 태그는 대부분의 경우 부모 태그보다 아랫줄에 작성하고 두 칸 들여쓰기를 하여 작성하곤 합니다. 네 칸 들여쓰기를 하는 사람들도 아주 가끔 있지만, 보통 일반적으로 두 칸 들여쓰기를 따르는 편입니다.
두 칸이냐, 네 칸이냐는 중요치 않지만, 항상 일관되게 적용하는 것은 매우 중요합니다.
화면을 확인해보니, 텍스트 내용은 표기되었지만 우리가 원하는 결과물과는 매우 다른 생김새를 지니고 있습니다. 조금 서글프네요. 😥
우선, 화면의 우측에 배치되도록 해야 하고 텍스트 사이의 간격도 조절할 필요가 있어 보입니다. 그 외에도 많은 부분들이 실제 Google 웹사이트와는 차이가 있어 보이네요.
우리는 문서의 내용을 작성한 상태이며 웹사이트의 구조를 잡아놓기는 했지만, 우리가 원하는 모양으로 화면에 표기되고 있지는 않습니다.
이럴때 우리에게 필요한 것은 꺾이지 않는.. 아니, CSS 입니다. ✨
Last updated