[1] 강의
웹 프로그래밍(풀스택)
2. HTML - FE
3) HTML 구조 설계
[2] 개념 정리
HTML 구조 설계
구조화 설계는 마치 문서를 쓴다고 생각하면 쉽습니다.
현업에서는 Presentation 문서형태의 기획서나 디자인 파일을 받아서 그것을 기반으로 HTML개발을 시작합니다.
즉 어떠한 화면을 보면서 그대로 구현하는 것이죠.
그 화면을 보면서 구조를 분석해야 합니다.
먼저 영역을 나눠서 상단/본문/네비게이션 이런 식으로 큰 부분부터 분리합니다.
그 뒤에 각 영역 안에 내용의 구조를 잡는 것이 일반적입니다.
각 영역 안의 내용 역시 여러 가지 형태일 겁니다.
목록을 나타내거나, 이미지를 나타내거나, 문단을 나타낼 수 있습니다.
이때마다 적절한 태그를 쓰면 됩니다.
그러면서 영역 안에 또 다른 영역이 있다면 점점 안으로 좁혀가면서 HTML tag를 사용하면서 완성해나가는 겁니다.
이때 CSS코드를 같이 구현하지 않고 HTML로 먼저 문서의 구조를 잡아나가는 것이 개발 단계에서 유리합니다.
그래야 전체 뼈대가 튼튼하게 되는 것이죠.
[3] 강의 정리
이번 시간에 HTML 구조와 설계에 대해서 알아보도록 하겠다. 구조와 설계 굉장히 어려운 얘기 같다. HTML 스트럭처 디자인 이렇게 표현할 수 있다. 어떤 강의를 찍을 때 구글 이미지를 많이 쓴다. 시각화된 정보를 잘 표현해주기 때문에 어떤 것인지 한번 찾아본다. html structure design 이렇게 한번 해본다. 어떤 것들이 나오는지 한번 보자. 클릭을 해보겠다. 웹에 좋은 자료가 많기 때문에 우리는 이런 것들을 참조하면 좋을 것 같다. 이런 웹사이트를 만든다고 친다. 그러면 로고나 header 영역 다음에 logical navigation. 확대를 하겠다. logical navigation, navigation 해주는 영역이 보인다. 또 search 하고 banner 이런 것들이 존재하는 부분이 있다. 이 안에 Main content columnl이 있고 또 오른쪽에 옵션으로 해당하는 게 있고 하단에 footer라는 게 이렇게 있다.
이처럼 웹사이트를 큰 덩어리 header, navigation, search, 본문 이렇게 계속 나오다 보면 그 하위에 또 목돌들을 나누고 그런 식으로 웹 사이트를 만들 수 있다. 그래서 아래 깔려진 큰 바디라는 어떤 바탕이 되는 레이아웃이 있고 그 위에 각각의 어떤 그 다음 레벨에 해당하는 큰 덩어리들의 어떤 UI가 있고 그 위에 상세적인 것들을 또 표현할 수 있다. 좀 더 살펴보자. 레이아웃 전체는 우리가 section이라던가 여러분들 article, nav, aside 이런 걸로 표현할수 있다. 그 하위에 보면 어떤 내용들을 조금 더 자세히 쓰기 위해서 하위에 이런 식으로 표현을 해야 한다. footer가 있고 article이 있고 article에 어떤 다른 게 있고, 좀 계층적인 구조를 가지면서 html을 하나씩 구성을 해야 한다. 여기 이 사이트를 보면 어떤 CSS 클래스 id를 이 값을 줬다. 이렇게 계속 네모난 상자들이 중첩되어 있다. 혹시 이제 프로토타입 툴이나 이런 것들을 써보면 웹사이트를 만들 때 이런 모습이 나올 수도 있다.
간단한 예제를 통해서 한번 알아보도록 하겠다. 이런 사이트가 있다고 치겠다. 어떤 웹에 있는 심플한 템플릿이다. HTML로 간단하게 이런 모양을 만들겠다. 상단 영역을 header로 이렇게 표현을 해보고 그 다음에 콘텐츠를 표현을 이만큼을 하고 하단에 footer를 우선 만들어 보겠다. 우선 세개만 있으면 된다. 상단에 header를 만들고 그 다음에 제가 section이라고 본문 영역을 만들겠다. footer를 만들겠다. 이렇게 해서 제가 크게 3가지를 만들었고 먼저 그 다음에 header 안에 보면 어떤 타이틀에 해당하는 정보가 크게 있기 때문에, Company name 이렇게만 썼다. 하위에 또 로고가 있을 수도 있다. 그래서 어떤 이미지다. 로고 이미지 이렇게 표현을 했다. header 영역이 이렇게 있고 그 다음에 section 영역이 있다. section 영역은 보니까 Home, Home, Home, Home 이 글자가 있고 search 바도 있다. 그 다음에 롤링이 되는 누르면 스와이핑 된다고 한다. 그 내용이 있다. 하단에는 어떤 description이 있다. 그래서 세 가지 부류로 나누려고 한번 해본다.
section이 있으니 우선 navigation 영역을 해주는 영역이 하나 있고 그 다음에 div라고 부르거나 section이라고 한다. section이라고 부르는 이 페이지가 좌우로 롤링이 되는 영역이다. 하단에 또 section이 하나 있어서 About us, What we do, Contact us 이런 것들이 표현되는 영역이 있다. footer에는 특별한 게 없기 때문에 간단한 글자에 어떤 스타일을 입힐 때는 span을 쓰기 때문에 Copyright @ 이런 식으로, Copyright에 해당하는 태그도 있다. 일단은 이렇게 해두겠다. 이렇게 표현을 할 수 있고 그 다음에 navigation 보면 Home, Home, Home, Home 이렇게만 되어 있다. 저런 것도 리스트이기 때문에 div, div로 표현할 수도 있다. 저런 것도 ul, li로 표현을 할 수가 있다. Home, Home, About, Map 이렇게 표현을 해둔다. 이렇게 되면은 navigation에 해당하는 그 태그들은 정리가 끝났고
그 다음에 두 번째 section, 롤링이 된다. 롤링이 만약 3가지 그림을 보여준다고 하면 그림을 바로 접근하기보다 div로 감싸주는 게 여러가지로 편리하다. 세 가지 이미지를 읽고 img 태그를 하나 넣는다. 또 img 태그를 넣어서 롤링이 되도록 하고 이 부분이 여기 해당하는 것이다. 여기 해당하는 부분 이 만큼을 우리가 표현을 하고 있다. section 했고 그 다음 section은 이제 About us랑 What we do, Contact us 이런 것들이 표현되는 영역이다. 역시 저런 것도 다 하나의 목록이다. ul, li를 굉장히 많이 쓴다. 리스트 태그이기 때문이다. 여기서 AboutUs 이런 것들을 써주게 된다. 물론 이 하위에 사실은 하위 번호 어떤 또 다른 제목이 있고 하위에 내용이 있다.
description을 할 수 있는데 여러 가지 방법을 있다. 우선은 이거를 우리가 h3, what we do, 이게 어떤 태그를 쓰느냐가 완전히 정답이 없는 경우가 있다. 그런 것들을 적절히 잘 판단을 해서 쓰면 좋다. 실제로 할 때 동료들과 잘 협의하는 것도 좋다. 그렇지 않으면 이 div를 너무 많이 남용을 해서 div를 너무 많이 쓰게 된다. division 테이블을 Lorem 이런 것들이 쭉 있다. 이런 식으로 표현을 할 수가 있다. 이런 식으로 이 하위에 있는 녀석들을 이렇게 표현을 할 수가 있다. CSS가 없으니까 보기에는 사납지만 웹 사이트를 만들 때 이렇게 구성을 할 수가 있다. img 태그에도 이떤 것들이 있다. 이미지도 사실은 지금은 주소가 없기 때문에 안 나오긴 하지만 이 이미지가 여기 해당하는 롤링이 되는 것들이다. 그리고 보니까 버튼이 하나 있다. 왼쪽에 화살표 버튼, 오른쪽에 버튼 이런 것들이 있다. 우리가 이제 클래스랑 id를 여기에다가 부여를 할 수 있다. 그거는 짧게 다른 챕터에서 알아보도록 하겠다.
[4] 실습 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<header>
<h1>Company Name</h1>
<img src="..." alt="logo">
</header>
<div> <!-- section태그를 사용했었지만, 별 의미없는 container에는 section태그가 적절하지 않아서 수정합니다 -->
<nav><ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul></nav>
<div>
<button></button>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<button></button>
</div>
<div>
<ul>
<li>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
<li>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique accusamus, corporis, dolorum fugiat tenetur porro. Aspernatur commodi, ea suscipit non? Molestiae nulla explicabo debitis provident nostrum dolorem minima reiciendis suscipit?</div>
</li>
<li>
<h3>What we do</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing</div>
</li>
</ul>
</div>
</div>
<footer>
<span>Copyright @codesquad</span>
</footer>
</body>
</html>
'강의 > 웹 프로그래밍(풀스택)' 카테고리의 다른 글
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 3-1 강의 정리 (0) | 2022.03.24 |
|---|---|
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-4 강의 정리 (0) | 2022.03.23 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-2 강의 정리 (0) | 2022.03.22 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 2-1 강의 정리 (0) | 2022.03.21 |
| 부스트코스 웹 프로그래밍(풀스택) - 1. 웹 프로그래밍 기초 - 7 강의 정리 (0) | 2022.03.21 |
