2024-07-31 :: 008 HTML의 구조 분석 연습 ③

https://themewagon.com/themes/free-bootstrap-4-html5-restaurant-website-template-feane/

Feane - Free Bootstrap 4 HTML5 Restaurant Template

 

---

 

HTML문서로 옮길 때 블럭 요소를 예상해서 박싱처리를 해주었다.

nav부분이 background-image와 한 몸처럼 이루어져 있으니 두 요소를 함께 묶어서 해야하지 싶다…

그 외에는 크게 장식이 있는 게 아니라서 nav 부분이라도 완벽하게 재현하는데 힘써보자.

 

 

 

블럭 요소로 묶어낸 것 위주로 태그를 작성하고 스타일을 적용할 때 필요한 ID와 Class를 미리 써두었다.

(사실 먼저 작성한 트리는 실제 적용하면서 많이 달라져서 다시 작성했다, 다음에는 이런 일이 없어야 할텐데)

기능 부분은 아직 배우지 않아서 최대한 사이트의 외관 부분을 비슷하게 작성하는데 집중했다.

 

 

완성본

 

블로그에 이미지를 삽입하다보니 작아져서 잘 티가 안나지만 최대한 비슷... 한 사이트 완성.

처음에 작성했던 문서는 왕창 망했는데 그 부분을 써보면서 정리해보려고 한다.

 

실패본

 

같은 위치 값을 줬는데 맞지 않았던 건...

• 텍스트 부분을 따로 움직이고 싶어 relative 값을 입력했던 건 좋았으나 문서 자체 내의 위치 값과 무언가 어긋났던 모양이다. 수 차례 시도를 해도 미묘한 차이를 줄일 수 없어 어디서부터 손대면 좋을지 막막한 상태에 이르렀기에 다시 작성하기로 했다.
• HTML과 CSS를 한 곳에서 작성하다보니 혼란이 일어난 것 같아 파일을 분리해서 작성했다. background-image는 전체 화면에 나타나야 하니 이미지만 제외한 나머지 속성들에게 같은 클래스 값을 부여한 뒤 margin: 0 auto; 값과 최대 너비 값을 따로 지정하여 사이트 중앙에 배치 될 수 있도록 조절했다.
• 이후 다시 메인 텍스트 부분(div)만 relative 값을 주고 top 위치를 조절했더니 완성본과 같은 상태가 되었다.

 

매우 번거로운 꼼수란...

• 주먹구구식으로 공백 특수문자를 사용하여 억지로 위치를 조절했다. 그러면 안되는 걸 알지만 정렬에 관한 속성이 하나도 먹히지 않아서 flex 값을 줬다 뺏다 많은 일이 있었다.
• 한 객체의 값에 최대 너비를 지정하며 보더와 패딩 값을 이용해 적절한 위치를 맞추었다. nav 메뉴들에 속성 값이 듣지 않았던 건 <a>태그만을 이용해 구성했었는데 아마 인라인으로 작성됐기에 너비를 지정할 수 없었기 때문이었던 것 같아 <ul>과 <li>를 이용하여 블럭요소를 준 뒤에 조절하니 손쉽게 되었다.