웹프로그래밍
웹사이트의 구성과 구조
joymundo
2024. 6. 11. 07:37
Header
<header>
<h1>
<a href="#">
<img>
</a>
</h1>
<nav>
<ul>
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
</ul>
</nav>
</header>
</body>
보통 헤더를 작성할 때는 네이버나 다음처럼 h1 쓰고 이미지도 넣어준다.
그다음엔 상단의 네비 태그를 이용해서 내비게이션 메뉴를 만들어준다.
Main
- main 태그 사용시 익스플로러에서는 이 태그를 인식하지 못하기 때문에 role="main"이라고 코딩함으로써 이 태그의 역할이 main이다라는 것을 알려줘야 한다.
Section
- 웹 페이지 내에서 Service, Portfolio 이런 식으로 영역을 구분해 놓을 때 section을 쓰고 페이지에서 타이틀(Service)을 볼 수 있듯이 이러한 타이틀은 h2 태그를 사용해서 만들어준다.
<main role="main">
<section>
<h2>Service</h2>
</section>
<section>
<h2>Portfolio</h2>
</section>
<article></article>
</main>
</body>
article
실제 정보가 들어가는 공간 자체
aside
본문 정보와 관계성이 떨어지는 내용을 넣는 곳
main 바깥쪽에 작성한다.
footer
사이트 가장 하단에 입력하는 정보를 작성
div
설계 도면에 표기하기엔 애매한 임의의 작은 공간을 만들 때 쓴다.
아마 우리가 가장 많이 쓸 태그 같다.
동일한 성격을 가진 태그들을 한데 묶어주는 역할을 한다.
Inline과 Block의 차이점
- Inline 요소는 공간을 만들지 못하는 반면 Block은 공간을 만들 수 있다.
<style>
tr, td, th {
border: solid 1px #000000;
}
span {
width: 300px;
height: 300px;
background-color: yellow;
margin-top: 100px;
}
h1 {
width: 300px;
height: 300px;
background-color: yellow;
}
</style>
</head>
먼저 디자인 코드를 써주고 차이점을 보자.
- Block 요소는 상하 배치가 가능하다. inline은 상하 배치 작업이 불가하다.
- inline은 x축으로 확장, block은 y축으로 줄 바꿈 현상이 일어난다.
<!-- Inline(한줄로 출력) / Block(줄바꿈) 차이점 -->
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<h1>Block</h1>
<h1>Block</h1>
<h1>Block</h1>
</body>
