반응형 이미지 레이아웃 (2) (04.17)

[ 코딩과정 ] : 코드펜 정리

---

[ 버튼과 텍스트 넣기 ]

글씨가 들어갈 위치인 back-bg의 자식으로 text-box를 만들어준다.

이런식으로 위쪽에 텍스트를 적어주고 아래에 버튼을 만들어줄 것인데,

이것뿐만아니라 다른 디자인들을 만들어낼 때 text-box에 바로 텍스트를 적어주게 되면

나중에 버튼이나 다른 것들을 추가할 때 번거로운 일이 생기게 된다.

그리고 저런 버튼 형식은 한 웹페이지 안에서 크기나 둥글기 정도 등 약간의 디자인만 바뀌고 많이 쓰이기도 하고,

저런 형식이 필요한 또 다른 공간에 떼서 바로 붙여넣어서 쓸 수 있도록 컴포넌트를 만들어줘야한다.

ㄴ 이 코드가 다른 곳에서도 쓰이게 되는지, 독단적으로만 쓰일지를 곰곰히 생각해가면서 코딩해야한다.

 

버튼을 만들 때 크기를 너비를 생각해보면,

max로 써야 최대치에서부터 사용자의 너비가 작아질수록 그 너비 비율에 맞춰서 버튼의 너비가 달라지게 될 것이다.

---

- 레이아웃 잡기

 

그림판으로 레이아웃을 잡아보면

상단에 text, 하단에 버튼을 넣어주면 물론 absolute로 띄워도 가능은 하지만 나중에 안에 다른것들이 추가가 되면

모두 절대적인 위치를 써야하기 때문에 비효율적이다.

그래서 상단, 하단으로 나눈 후 text와 버튼을  넣어주면 나중에 다른것이 추가가 되고, 위치에 수정이 들어가게 되도

다른 박스를 추가해가면서 조정이 가능하다.

 

그래서 text-box보다 먼저 들어와야할 것은 top-box와 bottom-box가 되야한다.

---

- 상단, 하단 높이 만들기

우리가 원하는 모습은 상단과 하단이 같은 비율의 높이를 갖는 것이다.

 

목적

ㄴ 상단박스와 하단박스에 같은 비율로 높이 주기

문제점

ㄴ 상단과 하단이 요소 크기만큼 나오고 있다.

조건

ㄴ 세로에서 같은 비율이여야한다.

원인

ㄴ 모든태그는 높이가 기본값일 때 0이기 때문이다.

해결

ㄴ 1. 상단에 높이를 준다.

      - 50%와 50% 각각 주기

        가능은 하지만 유지보수가 불편하다.

        상단과 하단 사이에 특정한 레이아웃이 추가된다 가정했을 때 해결하기가 번거롭다.

        ( 나중을 위해서 지금은 사용x )

 

    2. 같은 비율을 가지게 해주는 코드를 적는다.

      - flex-grow => 형제요소가 추가되었을 때 빠르게 유지보수 할 수 있다.

        back-bg에 flex를 적용해서 flex-item으로 만들어줘야 flex-grow를 쓸 수 있다.

한줄에 같이 나오기 때문에 row에서 column으로 방향을 바꿔준다.

그리고 flex-grow를 각각 적용해주고 혹시를 대비해서 비율이 변하지 않도록 flex-basis까지 적용해준다.

---

- 안에 요소 레이아웃 잡기

위에 텍스트 아래쪽에 버튼을 만들기 위해서 일단 flex-grow를 주석처리해서 없애주고

justify-content: space-between;으로 위아래로 만들어준다.

---

- 상단 텍스트박스 위치 조정

상단에 unsplash 작성. (웬만하면 span태그나 a태그로 감싸는 것이 좋다)

글씨가 잘 안보이기 때문에 white로 컬러를 바꿔준다.

 

피그마에 있는 그대로 padding값을 작성해준다.

---

- 상단 텍스트 폰트

폰트를 나눔명조로 바꿔준다.

구글폰트에서 나눔명조 폰트를 찾고 bold까지 가져와서 copy code를 눌러준다.

html에 코드 붙여넣기 해주고 css에서 font-family 부분만 가져온다.

body에 font-family를 적용하게 되면 전체 모든 폰트가 나눔명조로 되고,

img-box에 적용하면 img-box안에 들어오는 모든 텍스트가 나눔명조가 되기 때문에

우리가 원하는 부분인 back-bg부분에 font-family를 적용해준다.

같은 class이긴 하지만 background-image처럼 코드가 겹치면 보기 힘들기 때문에 

유지보수를 위해서 폰트나, background-image 등은 일반코드와는 그룹을 다르게 나눠서 써주는 것이 좋다. 

이런식으로 속성별로 묶어서 정리하는 사람들도 있다. (중요한 순대로)

---

- 텍스트 위치 조정

왼쪽에 있는 텍스트를 오른쪽으로 이동시킬건데

굳이 flex를 사용할 필요없이 text-align: right로 간단하게 해결한다.

---

- 텍스트 크기, 자간 설정

---

- 하단 버튼 만들기

하단 bottom-box에 바로 만들면 안되고 버튼박스를 만든 후에 넣어줘야한다.

btn-box를 만들어준다.

 

우리는 레이아웃을 상단과 하단으로 나눠주기 위해서 top-box와 bottom-box로 만들어준건데

그 bottom-box에 btn-box를 추가한다는 것 자체가 말이 안된다.

이렇게 쓰게되면 겹겹으로 나오는 형태가 된다.

 

그래서 bttm-box가 btn-box로 되야하고 그 btn-box안에 버튼 형태를 넣어줘야 헷갈리지 않게 만들어낼 수 있다.

bttm-box의 이름을 btn-box로 바꿔주게 되면 코드가 잘 안나온다.

이 때 당황하지말고 css에 있는 bttm-box의 선택자를 btn-box로 잘 수정해준다.

그리고 이 상태에서 btn-box가 2개이기 때문에 수정해줘야한다.

btn-box 안에 실질적인 btn이 들어가고, 그 btn안에 텍스트가 들어가는 형태이다.

.btn 자체는 어디서나 쓰일 태그이다.

여기서만 쓸게 아니라 다른 섹션으로도 가져다 쓸 태그이기 때문에 라이브러리를 만들어줘야한다.

 

상단에 btn을 선택자로 라이브러리를 만들어준다.

---

- 하단 버튼 너비

버튼을 이 섹션에서만 사용하는게 아니라 다른 섹션에서도 사용한다고 할 때,

저 위의 btn자체는 같지만 너비만 다르게 사용하게 될 것이다.

 

디자인만 똑같고 너비를 다르게 사용할 때 -> 컴포넌트

사용할 버튼들의 너비중에서 가장 큰 버튼의 너비를 400px로 가정했을 때,

우리는 btn의 너비를 max-width로 사용하고 가장 큰 최대치인 400으로 잡아야한다.

---

- 하단버튼 padding

예제처럼 top, bottom에 8px의 padding값을 준다.

---

- 버튼 텍스트 위치 조정

flex를 써줄 필요없이 text-align으로 텍스트 위치를 옮겨준다.

---

- 버튼 커스텀

텍스트 컬러, 폰트사이즈, 둥글기 정도를 커스텀해준다.

---

- 컴포넌트 이름 수정

다른 버튼들이랑 섞이지 않도록 이름을 잘 지어주는 것도 중요하다.

white버튼이니까 wh-btn으로 수정해준다.

---

- 여백 코드가 들어갈 위치

예제처럼 양쪽에 여백값을 줘야한다.

하지만 이건 버튼마다 다르기 때문에 코드의 위치를 컴포넌트로 적어주면 안된다.

한곳에서만 쓰일지, 여러곳에서 쓰일지 잘 생각하고 컴포넌트로 넣어줄지 생각해야한다.

btn-box에 padding값을 잘 넣어준다.

 

---

- 가운데에 박스 끼우기

가운데에 텍스트를 넣어줄 박스를 하나 더 만들어준다.

---

- 텍스트 조정

텍스트 중앙으로 옮기고 화이트 컬러로 바꿔준다.

---

마지막으로 적용했던 선을 모두 빼준다.

---

- 각 레이아웃 높이 수정

container의 높이를 예제처럼 453px로 수정해서 조금 더 넓게 설정해준다.

container의 높이만 수정해도 모든 레이아웃이 알맞게 변한다.

padding이라서 알아서 늘어나고, 안쪽에서 상속받는 형태이기 때문에

container의 높이만 변경해줘도 모든 레이아웃이 알아서 알맞게 수정된다.

이런걸 생각하지 않고 코드를 짜게 되면 높이를 수정할 수도 없게 되고 알아서 맞게 움직여지지 않기 때문에 불가능하다.

---

- 코드 복사하기

복사해서 붙여넣어줄 코드들을 내림아이콘 눌러서 잘 닫아준다.

복사한 후 이미지5까지 img-box의 div에 자식으로 붙여넣기 해준다.

---

- 잠궈놨던 코드 풀어주기

back-bg에 넣어놨던 opacity를 풀어주고,

주석처리 했던 hover도 풀어준다.

그러면 이런상태였다가 마우스를 올리면 텍스트들이 나오는 모습으로 완성이 된다.