1. 웹 페이지 및 파일 구조 잡기 ( 거시적 )
1) PC웹과 모바일 웹 문서가 만드는 방법
최근에는 PC웹이 모바일 웹을 무시히지 못할 정도로 트래픽 량이 발생한다.
- [방법1] 반응형 웹 : '모바일 웹' 먼저 만들고 => PC웹 확장하기
- [방법2] 각자 따로 웹 : 모바일 웹 / PC 웹
- 크로스 브라우징 / 반응형 웹 등 목적에 따라 코드가 많이 달라질 수 있다.
2) 파일 구조 생성하는 순서
- 문서 구조 구상하기 ( 이미지화 )
- 문서 이름 부여하기
- 물리 구조잡기 ( 그룹화 )
- 폴더 잡기 - 구조화 시키기 ( 이름 구상하기 )
- 홈 디렉터리 생성하기
- 구조 생성하기 - index.html 생성 / 폴더(디렉터리) 생성 / 다양한 웹 문서 생성
- 코드 작성하기 - index.html / 각종 웹 문서
[ 상대경로와 절대경로 ]
절대 경로 ( / ) : 루트를 기준으로 한다.
상대 경로 ( ./ ../ ) : 현재 위치를 기준으로 한다.
- 쓸거면 하나로 몰아서 쓴다. 특별한 일이 없다면 상대경로를 사용한다. 그 이유는 절대경로는 경로가 달라지는 경우 수정하는 경우가 많아진다.
[ component ]
반복되는 것들을 component 폴더로 만들면 작업하기 쉬워진다.
2. 웹 문서 구조 잡기 ( 거시적 )
Html Structure Design
만드는 방식이 다양할 수 있기 때문에 협업하는 동료들과 사전 협의를 통해 진행해야 한다.
<html>
<head>
...
</head>
<body>
<header>
<h1>Company Name</h1>
<img src="..." alt="logo">
</header>
<section>
<nav>
<ul>
<li>Home</li>
<li>Home</li>
<li>About</li>
<li>Map</li>
</ul>
</nav>
<section class="roll-section">
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
<div><img src="dd" alt=""></div>
</section>
<section>
<ul>
<li class="our_description"><h3>AAA</h3>
<div>ASDFSADFFASDF</div>
</li>
<li class="our_description"><h3>BBB</h3>
<div>ASDFSADFFASDF</div>
</li>
<li class="our_description"><h3>CCC</h3>
<div>ASDFSADFFASDF</div>
</li>
</ul>
</section>
</section>
<footer><span>Copyright @codesquad</span></footer>
</body>
</html>작성 TIP
- ul>li*3
<ul> <li></li> <li></li> <li></li> </ul>
3. 웹 문서 작성하기 ( 미시적 )
1) [순서1] outline
outline 아웃라인
아웃라인이란? 제목 잡기(목차 작성)로 문서를 이루는 것에 대한 설명을 붙는 것이다.
에이전트(TV, 모바일) 등이 이해할 수 있게 만드는 것이 목표다.
<h3>공지사항 검색폼</h3>- 아웃라인 확인 하는 툴 : HTML5 Outliner ( heading map과 비슷한 도구다. )
2) [순서2] div 기본 구조 작성
div 묶음으로 기본 구조 만들기
사용 수가 늘어나면서 웹 문서의 기본적인 구조가 갖춰지고, 점점 W3C 권고안 식으로 작성되기 시작한다.
3) [순서3] 시맨틱 태그
Semantic한 태그는 각각 용도와 쓰임새가 정해져 있다.
( div를 시맨틱 태그로 바꿀 수 있다면 바꾸는 것이 좋다. )
- HTML4
- 필수 구조를 설명하는 태그가 없었다.
- div에 id를 부여하여 만들게 된다. ( 개발 할 때 마다 다양한 방식이 나오게 된다. )
- ps. 네이버 메인 페이지에는 현재에도 이 흔적이 남아있다. - ex) <div id="header" role="banner"> ... 2022.12.27.
- HTML5
- 사람들이 가장 많이 사용하고 가장 많이 추천하는 이름으로 표준화가 진행된다.
- 태그를 구분하고 전세계 사람들이 통일감을 주며 문서를 작성할 수 있게 된다.
[ 사이트의 전반적인 구조 ] header aside main / title aside footer<header>header</header> <div id="container"> <nav><ul> <li>home</li> <li>news</li> <li>sports</li> </ul></nav> <aside><ul> <li>로그아웃</li> <li>오늘의 날씨</li> <li>운세</li> </ul></aside> </div> <footer>footer</footer>
- header : 가장 위 메인 메뉴 부분
- nav
- main
- section
- article
- aside
- footer : 주로, 회사 정보나 저작권에 대한 내용이 기입되어 있다.
반응형
'Programming Language > HTML&CSS' 카테고리의 다른 글
| 05. CSS 개념과 역사 (0) | 2024.01.31 |
|---|---|
| 03. HTML 태그(tag) (0) | 2024.01.19 |
| 02. HTML의 역사 (0) | 2024.01.17 |
| 01. 웹 역사와 브라우저 (0) | 2024.01.16 |
