오늘은 무엇을 할 것인가? 저번에 하고자 했던 웹페이지 디자인을 마무리 지을 것이다. 이번 글에서는 박스모델과 그리드에 대해서 배우는 것이 핵심이지만, 이것을 이해하고 활용하기 위해서는 다른 여러가지 개념도 같이 배워야 한다. 다행스럽게도 크게 어려운 내용은 없으니, 하나하나 배워보자.
목차
1. 블록 요소와 인라인 요소
2. 블록 요소의 구성
3. 그리드
1. 블록 요소와 인라인 요소
먼저 저번에 한 것을 돌이켜보자. 저번에는 class와 id를 활용하는 방법을 배웠고, 이 방법을 활용해서 원하는 부분의 글자색을 바꾸고, 하이퍼텍스트의 밑줄까지 조절했다. 그리고 이번에는 배치에 관한 것을 수정할 차례이다. 사각형 상자 형태로 내용을 나누어서, 위쪽은 Web이라고 써진 부분을, 왼쪽은 리스트 부분을, 오른쪽은 본문을 배치 해야한다. 그리고 글자크기와 글자정렬도 바꾼다.
먼저 Web이라고 써진 곳의 글자크기와 글자정렬을 수정해주자. 태그 선택자를 이용해 h1을 선택하고 font-size와 text-align속성을 활용해서 글자크기와 글자정렬을 해주자. 이 과정은 크게 어렵지 않을 것이다.
다음 할 일은 상자를 만드는 것이다. 우리가 CSS를 이용해서 웹페이지의 스타일을 바꿀 때 가장 먼저 어떤 일을 했을까? 그렇다. 가장 먼저 선택자를 이용해서 내가 원하는 어떤 태그(혹은 class와 id)를 선택했다. 근데 이런 문제가 발생할 수 있다. 내가 바꾸길 원하는 부분이 어떤 한 태그에 속하는 내용이 아니라, 여러가지 태그를 포함하거나 혹은 한 태그 안에서도 일부분일 때가 있다.
정말 말그대로 내가 원하는 부분만을 따로 묶는 방법이 없을까? 다행히 있다. 그래서 사용하는 것이 <div>와 <span>태그이다. 각각의 태그의 공통된 목적은 디자인을 위해 내용을 묶는 것이다. 다만 어떤 디자인을 위한 것인가에 대해 차이점이 있는데 이것에 대해 알 필요가 있다.
보는 것처럼 <div>태그는 <span>과 다르게 줄 바꿈을 한 번 한다. 왜 그럴까? 각각의 태그에 배경색을 넣어보겠다.
차이가 명확하다. div태그는 상자형태를 만들 때 한 줄을 그대로 잡아먹고, span태그는 줄 안에서 내가 지정한 내용만 상자형태가 씌워진다.
웹페이지의 화면은 블록요소와 인라인요소로 구성되어있다. 블록요소는 말 그대로 한 줄을 다 잡아먹으며 블록형태로 나타나는 것이고, 인라인요소는 말 그대로 줄 안에 나타내는 요소이다. 지금까지 <h1>태그 같은 것은 줄 바꿈이 자동으로 일어난 것을 볼 수 있었을텐데 그것은 <h1>태그가 기본적으로 블록요소로 설정되어있기 때문이다.
즉 웹페이지 화면에서 블록요소(Block level element)를 디자인하기 위해서 내용을 묶는 것이냐, 아니면 인라인요소(Inline level element)를 디자인하기 위해서 내용을 묶는 것이냐에 따라서 태그를 div나 span을 사용하는 것이다.
우리는 블록요소를 만들어야 하기 때문에, 리스트 부분과 본문 부분을 div태그로 나누고 그리고 각 태그에 class를 붙여주자. 그리고 선택자까지 써놓자. Web이라고 써진 부분은 어차피 h1태그 선택자를 활용하면 되기 때문에 그냥 둔다.
이제는 세부적으로 디자인을 해볼 시간이다. 우리는 일단 블록레벨로 해당 내용을 볼 것이라는 것을 명시하기 위해서 display: block으로 속성을 정의해준다. 블록레벨 요소는 이런 식으로 구성되어 있다.
2. 블록요소의 구성
뭐 처음 보는 말들이 좀 많다. 그런데 말 뜻을 생각하면 이해하기 쉬운 말 들이다. content, padding, border, margin, width, height... 이러한 것들은 영어사전에 정의된 의미로 충분히 유추 할 수 있다. content는 내용, padding은 겨울에 입는 패딩, border는 경계선, margin은 여백, width와 height는 각각 너비와 높이를 떠올린다면 이해에 충분하다. 본격적으로 써보자. 저 h1태그에 적용을 해보자.
- padding: 패딩, 패딩의 크기를 설정할 수 있다..
- border: 경계선, 굵기, 경계선 타입, 경계선의 색을 설정할 수 있다.
- margin: 여백, border너머의 여백의 크기를 설정할 수 있다.
잘 설정했는지 알고 싶다면 크롬 개발자 도구를 활용하면 편하다. 소스코드에 마우스를 가져다 대고 클릭하면 내가 설정한 값은 얼마인지, 블록 요소가 어떻게 적용되고 있는지 편하게 볼 수 있다.
나머지 list와 article클래스도 속성을 지정해주자. 그럼 위의 그림처럼 나타날 것이다. 뭔가 예쁘게 블록이 만들어졌다. 이제 하나만 해결해주면 된다. list와 article부분이 가로로 나란하게 나타나야 하는데, 지금은 세로로 나타나고 있다. 이것을 어떻게 해결 해야할까?
3. 그리드
그리드(Grid)라는 것을 활용한다. 그리드를 사용하는 자세한 방법은 링크를 참고하길 바란다. 여기서는 목표한 웹페이지를 만들 정도의 간단한 수준으로만 다룬다.
- https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/Basic_concepts_of_grid_layout
- https://studiomeal.com/archives/533
- https://webactually.com/2019/06/05/%EA%B7%B8%EB%A6%AC%EB%93%9C-%EC%99%84%EB%B2%BD-%EA%B0%80%EC%9D%B4%EB%93%9C/
그리드는 격자 무늬의 디자인을 의미한다. 쉽게 생각하면 바둑판의 모습이 전형적인 그리드라고 할 수 있다. 우린 그리드를 만들어서 리스트 부분과 본문 부분이 격자형태로 나란히 배치되도록 만들고 싶다. 그리드를 활용하기 위해서는 먼저 어떤 부분을 그리드로 만들 것인지 설정해주어야 한다. 그래서 <div>태그로 내용을 묶고 grid라는 이름으로 태그에 id를 부여했다.
그리고 선택자를 이용해 grid를 선택하고 display: grid속성을 부여하자. 그럼 이제 grid형식으로 볼 것이라고 명시한 셈이다. 여기까지 쓰면 아무 변화도 일어나지 않는다.
우리가 세부적으로 뭘 어떻게 볼 것인지 정해주어야 한다. grid-template-columns: 200px 1fr;이라고 속성을 써주고 새로고침해보자. 그럼 이제 원하는 모습이 나타난다. 리스트는 200px의 폭을 그대로 갖게되고, 남은 공간은 자유롭게 변화하게 된다.
fr단위를 처음 볼텐데 화면에서 차지하는 비율을 표현하는 단위이다. 만약 1fr,2fr이런식으로 쓰면 화면의 1/3은 리스트가, 2/3는 본문이 가져가게 된다. 응용해서 만약 grid가 3개의 div태그로 구성되어있고 1fr 2fr 2fr로 설정하면 각각 1/5, 2/5, 2/5씩 화면을 차지하게 된다.
마침내 원하는 모양으로 웹페이지를 만들었다. 자신감이 좀 생기지 않는가? 속성들을 조금만 더 공부하면 정말로 자신만의 웹페이지를 예쁘게 만들 수 있다는 희망이 생긴다. 여기서 한 걸음 더 나아가면 고려해야 할 것이 있다. 흔히 반응형 웹 디자인(Responsive Web Design)이라고 말하는 것이다. 우리가 웹페이지를 보는 기계는 제각각이다. 대부분 스마트폰, 태블릿, PC를 통해서 웹페이지를 볼텐데, 또 그 속에서도 화면의 사이즈가 제각각이다. 이런 제각각인 화면에서 화면을 어떻게 구성할 것인가에 대해서 따로 설정을 해줄 필요가 있다. 다음 글에서는 이러한 설정을 하는 방법을 간단한 수준에서 다룬다.
*생활코딩 학습일기 카테고리의 글들은 모두 2021년, 제 이전 블로그에서 작성한 글입니다.
*정확한 정보를 전달하기 위해서 일부 내용은 수정하였습니다.
'생활코딩 학습일기(Web 기초)' 카테고리의 다른 글
| 10) javascript에 들어가며... (0) | 2022.08.13 |
|---|---|
| 9) 간단한 반응형 웹 디자인: 미디어 쿼리 (0) | 2022.08.12 |
| 7) CSS의 class와 id (0) | 2022.08.12 |
| 6) 입문자가 알아야 할 CSS의 기본 특징 (0) | 2022.08.12 |
| 5) 웹페이지 탐방하기 (0) | 2022.08.11 |
