17일차 - 웹페이지 내 하이라이트 섹션 만들기, box-sizing 속성

오늘은 16일차에 이어 해당 웹페이지의 메인 하단부분 섹션을 만들어보는 시간을 가졌다.

 

이 섹션에는 Highlights라는 제목으로 세 곳의 멋진 이미지들을 나열해놓았다. 웹페이지의 목적에 맞게 사용자의 이목을 끄는 이미지들을 나열해보니, 이목을 끄는 문구나 이미지를 웹사이트의 잘 보이는 곳에 게시하는 것도 웹개발에 중요한 부분이라는 생각이 들었다.

 

아래 이미지는 오늘 만든 부분을 나타낸 것이다.

오늘의 작업 섹션

이처럼 큰 배경화면의 하단에 하이라이트 부분을 만들어놓았다.

 

HTML 및 CSS 코드 분석

HTML 코드

우선 하이라이트 부분이 들어갈 곳은 main_bottom으로 섹션을 만들어 그 안에 콘텐츠들을 집어넣었다. 

 

그리고 해당 이미지의 국가부분의 글자를 굵게 만들어서 눈에 잘 띄도록 했다.

global css 코드

css부분에서는 우선 지난 시간에 설정해 놓았던 global 부분의 ul 코드의 영향으로 이번 섹션의 ul 부분들이 정렬되었다. 새로 추가된 h2 부분을 가운데로 옮기는 코드만 추가했다.

해당 웹페이지에만 적용된 css 코드

그 다음으로 콘텐츠를 담고 있는 highlights 박스의 너비를 90%로 설정해주고 아래쪽에 40px의 여백을 줘서 앞으로 만들어질 footer부분과 적정한 거리를 유지하도록 했다. 모든 텍스트는 대문자로 바꿨고, 요소를 가운데정렬하여 깔끔하게 만들었다.

 

세 개의 이미지들은 처음에 서로 붙어있어서 거리를 늘려놓기 위해 justify-content 속성에 space-between 값을 주었다. 해당 이미지에는 높이 200px만 설정했는데, 서로 간에 떨어진 거리에 비해 이미지가 작아보여 너비를 500px로 추가 설정해주었다.

 

각 이미지에는 좌우 2px 상하 4px에 8px의 블러를 주어 깔끔해보이게 만들었다. 또한, 이미지에 왜곡이 생겨서 object-fit 속성에 cover 값을 적용했다.

💡 object-fit 속성: 특정 요소가 그 요소를 감싸고 있는 컨테이너에 어떻게 더해지고 보여져야 하는지 결정할 때 사용한다. 기본값은 fill인데, 현재 만들고 있는 웹페이지를 예로 들어 설명하면 이 값은 이미지를 주어진 치수에 맞게 조절하게 된다. 이는 필요에 따라 이미지들이 원본과 다르게 왜곡될 수도 있다는 것을 의미한다.

그래서 contain 값을 주로 사용하는데, 이는 이미지의 종횡비가 그대로 남아서 이미지가 컨테이너의 안으로 왜곡되면서 밀어넣어지지 않도록 하는 값이다.

그런데 이 값을 썼을 때는 왜곡을 피하기 위해 컨테이너에 빈 공간이 생길 수가 있다.
그럴 때 cover 값을 사용하며, 이미지의 종횡비가 그대로 유지되면서도 컨테이너를 채워주는 값이다.

box-sizing 속성

 

box-sizing 속성은 요소의 전체 너비와 높이를 계산하는 방법을 설정하는 속성이다.

 

예를 들어 특정 요소에 너비를 100% 줬는데, 아래 이미지처럼 큰 틀의 밖으로까지 요소가 커질 수가 있다.

옆으로 삐죽 튀어나온 박스

이런 상황에서 다른 속성을 조절하지 않고 깔끔하게 정리하는 방법이 box-sizing 속성을 사용하는 것이다.

 

속성값으로 content-box 값은 이 속성의 기본값이며, 위 이미지처럼 요소의 너비에 추가된 값만큼 큰 틀의 너비에 추가된다. 다시 말해 위 이미지에서 각기 다른 세개의 색상을 가진 박스를 담고 있는 큰 박스의 너비가 100%가 되니 그 박스가 있는 body의 너비에도 이 박스를 100% 담기 위해 너비가 추가된 것이다.

 

이런 상황에서 속성값으로 border-box 값을 많이 사용한다. 

border-box 값의 사용

이 값을 사용하면 위 이미지처럼 깔끔하게 body의 테두리를 따라 너비가 알맞게 조정된다.