728x90
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>산업대학교</title>
<link rel="stylesheet" href="css/style.css">
<!-- CSS 연동 여부 확인 -->
</head>
<body>
<!-- HTML 구조 이해 -->
<!--
HTML은 크게 2가지 요소로 분리할 수 있다. (인라인 요소, 블록요소)
블록요소는 영역을 잡는 박스 ,인라인 요소는 글씨영역
인라인요소안에는 블록요소를 사용할 수 없다. 단, 예외로 a태그는 인라인 요소이지만 블록요소를 포함할 수 있다.
블록요소는 세로로 정렬이 된다.(정렬 시 float 필요)
인라인요소는 가로로 정렬이 된다. (세로로 정렬하려면 display성질을 변경해야한다.)
-->
<!-- 오타 주의 항상 복붙해서 사용-->
<div id="wrap">
<header id="header" class="clearfix">
<h1 class="logo">로고</h1>
<div class="nav">메뉴</div>
</header>
<!-- //header -->
<section id="banner">
<h2>이미지 슬라이드</h2>
</section>
<!-- //banner -->
<section id="contents" class="clearfix">
<div class="cont1"><h3>공지사항</h3></div>
<div class="cont2"><h3>갤러리</h3></div>
<div class="cont3"><h3>팝업</h3></div>
</section>
<!-- //contents -->
<footer id="footer" class="clearfix">
<div class="foot1"><h3>로고</h3></div>
<div class="foot2"><h3>Copyright</h3></div>
<div class="foot3"><h3>SNS</h3></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>/* reset */
* {margin: 0; padding: 0;}
.clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
/* 레이아웃 */
#wrap{width: 1200px; margin: 0 auto;}
/* 블록구조를 가운데 정렬할때는 마진을 주면된다. margin: 0 aut0는 위아래는0 좌우는 auto라는 의미 */
/* header */
#header {}
#header .logo {float: left;width:250px; height: 100px; background: #888;}
#header .nav {float: left;width: 950px; height: 100px; background: #999;}
/*블록구조는 한 영역을 차지하며, 옆에 누가 있는걸 싫어한다. 정렬시키기 위한 float 로 사용 가능하지만
상위 박스의 height값이 0으로 영역이 깨지기때문에 clearfix를 만들어 사용해야한다. */
/* banner */
#banner {height: 300px; background: #666;}
/* contents */
#contents {}
#contents > div {width: 400px; height: 200px; float: left;}
#contents > div.cont1 {background: #555;}
#contents > div.cont2 {background: #333;}
#contents > div.cont3 {background: #444;}
/*contents 부모 입장에서 자식(div)이 여러개일경우, 첫번쨰 자식만 선택하고 싶을떄 > 로 특정짓게되면 첫번째 자식에만 css를 적용시킬 수 있다.*/
/* footer */
#footer {}
#footer > div.foot1 {float: left; width: 200px;height: 100px; background: #222;}
#footer > div.foot2 {float: left; width: 800px;height: 100px;background: #333;}
#footer > div.foot3 {float: left; width: 200px;height: 100px;background: #444;}
'내마음대로만들어보자 > HTML' 카테고리의 다른 글
| HTML 가로유형 예제 (0) | 2022.02.22 |
|---|---|
| HTML 기본 레이아웃2 (0) | 2022.02.21 |
| [React] 메가박스 모바일 웹 화면 만들기 (0) | 2021.09.26 |
| 웹사이트 따라만들기 코딩일지#4 - 컨텐츠영역1 (0) | 2021.06.20 |
| 메가박스 사이트만들기 학습일지#9 - 이벤트영역 (0) | 2021.06.20 |
