🖥️Google Header 꾸미기 2
이제 Google 웹사이트의 텍스트 요소들 사이의 여백을 우선 조정해보도록 하겠습니다.
현재 우리의 Gmail, Images, Sign in 링크는 a
태그를 활용해 구현되어 있는데요.
Padding, Border, Margin
CSS에는 요소 간 여백 공간을 조정하기 위해 패딩(Padding), 경계선(Border), 마진(Margin)이라는 속성이 있습니다.
매우 기본적인 속성이고 자주 사용되는 부분이니, 반드시 잘 숙지해놓으실 필요가 있는 속성입니다. ✨
대부분의 요소들은 아래와 같이 컨텐츠 영역, Padding 영역, Border, Margin 영역을 갖고 있습니다.
Padding과 Margin의 차이점
Padding 영역과 Margin 영역은 모두 외부 요소들과의 여백을 조정해준다는 측면에서는 동일하지만, 한 가지 큰 차이가 있습니다. Padding은 요소의 내부 공간으로 표기되고, Margin은 요소의 외부 공간으로 표기된다는 것인데요.
내부와 외부의 의미는 무엇일까요?
아래 코드펜에서 "Run"을 클릭하고, 핑크색 영역에 마우스를 올려보세요. 😎
배경색의 변화가 일어나는 곳은 해당 태그의 공간이고, 배경색의 변화가 발생하지 않는 곳은 해당 태그 외부 공간입니다. HTML과 CSS로 화면을 구성하고 사용자에게 컨텐츠의 구조를 시각적으로 표시하기 위해 유용하게 사용됩니다.
Margin 적용해보기
다음과 같이 우리의 구글 웹사이트 코드에 CSS를 추가해보세요.
a
태그를 지정하여, a
태그에게 Margin을 10 픽셀의 크기만큼 부여하는 코드입니다.
픽셀(화소)이란?
Picture Element라는 의미로서, 디스플레이 화면을 구성하는 최소 단위를 의미합니다. 실생활에서 cm, mm 등의 단위가 있듯이, 디스플레이 화면에서는 픽셀이라는 단위가 최소 단위로 사용됩니다.
우리가 작업한 구글 웹사이트를 브라우저에서 확인하면 다음과 같이 변신한 것을 확인해보실 수 있습니다.
Gmail, Images, Sign in 링크 사이의 여백이 조금 늘어난 것을 알아채셨나요?
픽셀 숫자의 크기를 여러분이 원하는 만큼 조정해보세요. 여백의 크기가 달라지는 것을 확인할 수 있을겁니다. 🙂
Sign in 버튼 배경색 입히기
이번에는 Sign in 링크에 배경색을 한번 입혀볼텐데요.
다음과 같이 a
태그의 CSS 코드를 수정해보세요.
#1a73e8은 무엇인가요?
CSS에서는 색상을 표기하는 방법이 다양합니다. 여러분이 많이 알고 계실만한 RGB로도 표현이 가능하고, 위에서 보신 #1a73e8
처럼 헥스 코드(Hex Code)라는 방식으로도 색상을 지정할 수 있습니다.
특정 색상의 Hex Code를 외울 필요는 전혀 없습니다. 원하는 색상의 값을 필요할때마다 찾아서 사용하도록 하세요. 구글에서 hex code color와 같은 키워드로 검색하시면, RGB값을 Hex Code로 변경해주거나, 원하는 색상의 Hex Code 값을 찾아주는 웹사이트가 많이 있습니다.
기대하는 마음을 갖고 화면을 한번 확인해볼까요?
미국인들은 이런 상황을 OMG! 라고 말합니다. 코딩을 하다보면 항상 마주하는 상황이죠.
문제가 발생한다면 문제의 원인을 파악하고 해결책을 강구하면 됩니다.
침착함을 유지하고, 무엇이 문제인지 우선 살펴봅시다. 💁🏻♂️
CSS 선택자
우선, 방금 우리가 추가한 코드가 무엇인지 혹은 어떤 의미인지 신중히 잘 돌이켜보고, 그 코드가 어떤 영향을 미쳤는지 조사해보아야 합니다. 우리가 작성한 CSS는 다음과 같은 내용이었습니다.
컴퓨터는 거짓말을 하지 않기에 우리 스스로를 잘 돌아봐야 합니다. 우리가 작성한 코드는 컴퓨터에게 정확히 어떤 의미로 전달되었을까요?
"a
태그를 선택해서, Margin을 10픽셀 부여하고, 배경색을 #1a73e8
으로 설정해줘"라는 의미입니다.
이 구문에서 중요한 부분은, a
태그를 선택해서 라는 부분입니다.
우리 코드에는 Sign in 링크 외에도 a
태그가 많이 있는 상황이고, 우리가 배경색을 입히고 싶은 링크는 Sign in 뿐인데 현재 우리가 작성한 코드는 Sign in 링크에 대해 명시하지 않고 조금 더 광범위하게 a
태그라고만 지칭하고 있습니다.
조금 더 구체적으로 우리가 CSS를 적용하고 싶은 요소를 선택해서 지정해줄 필요가 있다는 의미겠죠? 🥸
이런 경우에 우리는 CSS 선택자 문법을 활용해 우리가 원하는 요소를 구체적으로 명시할 수 있습니다.
Sign in 링크에 식별 가능한 이름 붙이기
우선 구체적으로 Sign in 링크를 선택하기 위해서는 Sign in 링크를 구별할 수 있는 이름과 같은 개념이 필요합니다.
이런 경우 HTML에서는 보통 class라는 속성을 추가하여 구분 가능한 식별자를 만들어주곤 하죠.
다음과 같이 코드를 한번 수정해볼까요?
Sign in 링크에 class라는 속성을 추가해주고, 우리가 원하는 class 값을 자유롭게 설정해주었습니다.
우리가 이름 붙힌 class 이름을 활용해 우리는 이제 Sign in 링크를 지목하여 선택할 수 있습니다.
CSS 클래스 선택자
기존에 위와 같던 우리의 CSS 코드를 아래와 같이 수정하도록 하겠습니다.
기존에 적용했던 Margin은 모든 a
태그에게 여전히 적용해야 하기에 그대로 유지하고, 새로운 구문을 추가했습니다.
.sign-in
이라는 선택자는 sign-in
이라는 class를 가진 요소를 선택하는 CSS 선택자 문법입니다. 선택을 원하는 class 이름 앞에 .
을 붙여서 작성할 수 있습니다.
우리는 .sign-in
요소를 선택하여 이 조건을 충족하는 요소에게 배경색과 함께 텍스트의 색상을 지정해주었습니다. 해당 class를 갖지 않은 요소들에게는 적용되지 않겠죠?
어느 정도 우리가 원하는 모습이 나오고 있네요. 😌
약간의 여백과 텍스트 폰트의 크기도 조절해보겠습니다.
폰트 크기는 모든 a
태그에게 적용하고 싶기에 윗 부분에 추가하였고, Sign in 링크에는 Padding 여백과 경계선의 각도를 조금 조정해주었습니다.
참고로, Padding과 Margin은 1개의 값을 명시할 수도 있지만, 2개, 3개, 4개를 나열하는 방식으로도 설정할 수 있습니다.
작성방식 | 적용결과 |
---|---|
10px; | 위, 아래, 우측, 좌측 모두 10px |
10px 12px; | 위 & 아래 = 10px, 우측 & 좌측 = 12px. |
10px 12px 14px; | 위 = 10px, 우측 & 좌측 = 12px, 아래 = 14px |
10px 12px 14px 16px; | 위 = 10px, 우측 = 12px, 아래 = 14px, 좌측 = 16px |
결과물을 또 한번 확인해볼까요?
나름대로 조금 더 나아지긴 했는데, 우리 욕심보다는 아직 한참 미치지 못하네요. 😠
우선 링크가 화면 위에 붙어있어서 조금 답답하게 느껴집니다. 계산하려고 줄 섰는데 뒷 사람이 바짝 붙어있는 느낌이랄까요?
기술적으로 어떻게 여백을 줄건지는 개발자가 결정해야 하는 사항입니다만, 저는 위에 나열되어 있는 링크들 모두에게 동일한 여백을 적용하고 싶습니다. 방법은 다양하지만, 아래와 같이 한번 해보겠습니다.
모든 a
태그들을 header
라는 태그로 감싸주고, header
태그에게 위쪽 Margin을 주었습니다.
여백이 적절히 잘 들어가서 아주 보기 좋아졌네요. 하지만 좋아하지 마세요. 코드가 원하는 대로 동작하지 않을때 슬퍼하거나 당황하지 않는 것처럼, 코드가 잘 동작한다고 특별히 좋아하지도 않습니다. 늘 평정심을 유지합니다. 😬
Last updated