Project : 박스 레이아웃 만들기
2022.08.18.
- <비전공자를 위한 첫 코딩 챌린지> - DAY 13
: 14 Project : 박스 레이아웃 만들기
Review
- <비전공자를 위한 첫 코딩 챌린지> - DAY 13
: 오늘은 그동안 배운 내용이 많으니 확인하고 개념을 다지는 시간을 가졌다.
문제를 풀어보았는데 아직 어렵고 감이 안 잡히는 개념들이 좀 있었다.
우선 문제를 적어놓고 풀이를 기록하려 한다.
<문제>
1. index.html body 태그에 header, main, footer 태그를 만들어보세요.
2. main 태그 자식으로 nav와 article 태그를 만들어주세요. (5장)
3. display와 justify-content, align-items를 이용해 도형을 가운데로 위치시켜주세요. (10장)
<HTML 레이아웃 구성하기>
: 코드를 처음 치려면 텅 빈 index.html 파일을 볼 수 있다.
초보자인 나는 기본구조가 잘 떠오르지 않는다. 이럴 때 에디터 프로그램이 빛을 발휘한다.
VSCode가 제공하는 HTML 자동 완성을 이용해보자.
1. index.html 파일 첫 줄에 느낌표를 치고 enter를 누른다.
그러면 이렇게 HTML5 기본 구조가 자동으로 완성된다.
2. en 대신 ko를 입력해 언어를 한글로 바꿔준다.
이제 body 태그 안쪽에서 본격적인 코딩을 시작하면 된다.
<head 태그 완성하기>
1. head에 title을 지정하고 CSS 파일을 연결한다. HTML 파일을 다음과 같이 수정한다.
우선 title 태그에 '박스 레이아웃 만들기 예제' 라고 적어주고, 밑에 CSS 파일을 연결해주는
코드를 작성한다.
2. 파일을 저장한다.
<HTML 작성하기>
: 코드를 작성하기 전에 그림을 그리기 전 스케치를 하듯이 먼저 큰 틀(구조)을 생각해야한다.
우선 그림이 화면 정중앙에 위치하도록 해야 하니 전체 박스를 감싸는 태그가 필요하다.
요소를 3등분해서 코드 구조를 만들면 header, main, footer로 태그를 정하고
main 태그의 자식으로 nav, article 태그를 지정한다.
모든 태그를 div로 만들고 class 이름을 작성해도 되지만, 이 그림은 HTML 레이아웃을 본 떠
만든 것이다. 따라서 header, footer 등 각 태그가 의미하는 바를 생각해서 작성하면 좋을 것이다.
HTML 파일에 부모 박스와 자식 박스를 다음과 같이 작성하고, 파일을 저장한다.
전체를 감싸는 div 태그, header 태그, main 태그, footer 태그를 작성한다.
* 클래스 이름을 container로 짓는 이유?
: contain이 '담다' 라는 의미를 가지고 있다. 따라서 박스를 담는 공간이라 생각하여 container
라고 지었다. 각자 이해하기 쉬운 이름으로 선언해도 되지만 통상적으로 쓰이는 이름을 사용
하면 다른 개발자가 내 코드를 쉽게 이해할 수 있다.
<스타일링 지정하기>
: HTML로 레이아웃을 만들었으니, CSS로 스타일을 지정해줄 차례이다.
일단 아무것도 보이지 않으니 각 태그에 너비, 높이, 배경색, 간격 등의 스타일을 지정하여 사각형을
만들어주겠다.
style.css 파일에서 각 태그의 너비, 높이, 배경색, 테두리 속성을 지정한다.
파일을 저장하고 실행한다.
* header 태그와 footer 태그의 너비가 310px인 이유?
: 최종 결과물을 보면 각 태그마다 간격이 존재한다. 나는 이 간격을 10px로 생각했기 때문에
nav 태그와 article 태그 사이가 10px이면 전체 너비는 310px이 된다.
<main 태그 위치 정하기>
: 우선 main 태그에 있는 nav와 article 태그가 한 줄에 오도록 만들 것이다.
main 태그의 display 속성을 block에서 flex로 바꿔주면 된다.
main 태그의 display는 block이 기본값이다.
이 display 속성을 inline이 아닌 flex로 지정하는 이유는 flex가 가진 정렬 속성을 이용할 것이기
때문이다.
style.css 파일에 main 태그 display 속성을 flex로 지정한다.
파일을 저장하고 실행하면 위와 같이 나타난다.
<박스 간격 조정하기>
: 박스 간격을 조정하려면 margin 태그를 사용하면 된다.
위, 아래 등 특정 위치에만 간격을 지정할 것이기 때문에 margin-right, margin-bottom 등으로
속성을 지정한다.
style.css 파일에서 간격이 필요한 부분에 margin 값을 지정하면 된다.
바로 이전 코드에서 변경하지 않은 그대로인데, 나는 header 태그 아래에 간격을 10px로 지정했다.
nav 태그에 오른쪽 간격을 10px로 지정한다.
그러고 나서 footer 태그에 위 간격을 10px로 지정한다.
파일을 저장하고 실행하면 위와 동일하게 나타난다.
<화면 중앙으로 위치시키기>
: 만든 레이아웃 박스 전체를 페이지 가운데로 위치시켜볼 것이다.
1. body 태그에 flex 속성 적용하기
: 방법은 main 태그에 적용했던 원리와 비슷하다.
요소의 위치를 가운데로 적용하려면 display 속성을 flex로 지정한 후, justify-content와
align-items의 속성값을 center로 지정하면 된다.
여기서 주의해야 할 점은 display: flex, justify-content, align-items는 적용 대상의 부모에
사용해야 한다는 것이다.
이것이 내가 main이라는 부모 태그를 만들어준 이유이자 container 라는 부모 div 태그를
만들어준 이유이다.
body 태그에 flex 속성을 적용한 후, display 값을 지정한다.
그런 다음 justify-content 값을 지정하고, align-items 값을 지정한다.
파일을 저장하고 실행하면 박스가 화면 중앙으로 이동된 것을 볼 수 있다.
2. height 값 지정하기
: 여기서 한 가미 의문점이 있다.
분명 교차축(여기선 세로)을 기준으로 가운데에 위치시키는 align-items를 center로 맞춰줬는데,
박스들은 모두 위에 붙어서 움직일 생각을 하지 않는다.
그 이유는 html과 body의 높이가 정해지지 않아서 그렇다.
컴퓨터는 우리가 만든 페이지의 높이가 얼마인지 모르기 때문에, 가장 큰 요소의 길이만큼
높이를 설정한다.
style.css 파일에 html과 body의 높이를 지정한다.
height 값을 100%로 지정하는 것은 부모의 높이를 기준으로 자식의 높이를 100%로 지정하겠다는
의미이다.
파일을 저장하고 실행하면 위와 같이 나타난다.
* height와 100%의 관계
: 브라우저 창의 높이를 설정할 때 pixels, (r)em, percentages를 이용한다면 이들은 상대 단위이기
때문에 높이가 상위 요소(부모)의 높이에 따라 달라진다.
따라서 상위 요소(부모)의 height 값이 지정되어야 비로소 align-items: center가 적용된다.
즉, container의 부모인 body와 body의 부모인 html이 모두 height 값을 100%로 가져야 한다는
뜻이다.
참고로 height 값을 지정하지 않으면 기본적으로 auto의 성질을 갖게 된다.
*이미지 출처
Instagram : @postershop.kr