IT 배움터

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

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

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

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

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

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

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

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

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

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

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

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

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

본격적으로 HTML을 사용하여 홈페이지를 제작하는데 있어 필요한 단계를 배우고 연습해보기로 했다.

아래의 사이트는 별도의 회원가입 없이 무료로 풀린 홈페이지 템플릿의 소스를 받아 직접 배치해볼 수 있었다.

테마 웨건(theme wagon) 사이트 바로가기 : https://themewagon.com/

   1. 박싱처리 (블록요소 미리 나누기)   

   먼처 큰 섹션을 나눠서 구분하고 그 안에 배치될 요소가 가질 태그와 속성을 고려해 나눠본다.

개발자마다 다를 순 있겠지만 크게 세로로 쌓아갈지, 가로로 쌓아갈지를 정한다고 한다.

   2. 돔트리 작성   

드로우아이오(draw.io) : https://app.diagrams.net/   

   본격적으로 HTML을 작성하기 전, 나눠둔 섹션을 따라 돔트리(DOM)라는 밑그림 작업을 시작한다.

처음에는 그냥 화면만 보고 따라서 배치하면 되는 것 같았지만 막상 들어가니 생각대로 안되는 경우가 많아 기초가 튼튼해야 한다는 말이 무엇인지 경험으로 알게되었다(...) 특히 이번 돔트리에는 클래스 명과 아이디를 그렇게 세세하게 지정하진 않았는데 엔간하면 각자 지정해 주는 편이 뒤에가서 손이 덜 가는 것 같다.

   3. HTML 작성   

폰트 어썸(font awesome) : https://fontawesome.com/

   이제 돔트리를 바탕으로 HTML을 작성해주면 되는데 여기서 폰트 어썸 이라는 사이트를 통해 사이트에 필요한 아이콘들의 코드를 가져와 문서에 붙여넣을 수 있다. 회원가입을 하면 스크립트 코드가 주어지는데 복사하여 문서 내 헤드 부분에 삽입을 해주면 쉽게 페이지를 꾸밀 수 있다. (단, 이 방법은 사이트가 다운되었을 시 제대로 작동하지 않는다는 단점이 있다)

   4. CSS 작성   

돔트리를 기반으로 HTML작성이 끝났다면 홈페이지의 외관을 작성해줘야 한다. 헤드에 스타일을 넣어 바로 꾸며줄 수도 있지만 홈페이지와 같이 양이 늘어나다 보면 CSS의 내용도 HTML 못지 않은 길이가 되기 때문에 CSS파일을 따로 작성해 서로 연결시켜주는 작업이 필요하다.

<link rel="stylesheet" href="스타일 시트(CSS) 경로 지정">