HTML 기초 4 + CSS [레이아웃]

1. 페이지 전체 레이아웃

<header class="top">
<div class="topmenu">
</div>
</header>

<nav class="menu">	
</nav>

<main class="container">
<aside class="flow">
</aside>

.top{/* 또는 .안쓴 header 둘다 한번만쓰는 태그니깐 */
	width:100%;	/* 설정안하면 100%로 설정됨 */
	height: 100px;
	background-color: yellow;
}
.topmenu{
	width:1200px;
	height: 100px; /* 또는 inherit */
	background-color: gray;
	margin:0 auto;
}
.menu{
	height: 80px;
	background-color: green;
}
.container{
	position:relative;
	height: auto;
	background-color: pink;
}
.flow{
	position: absolute;
	width: 80px;
	height: 250px;
	background-color: black;
    	left: 50%;
	margin-left: 600px;
}

• header : 로그인, 회원가입, 장바구니, 내 정보, 광고배너 
• nav : 대메뉴, 중메뉴, 소메뉴 만들때 주로 사용 // 여러번 사용 가능 메뉴가 여러가지일수있으니까
• main : 웹페이지 메인콘텐츠 출력
• aside : 플로우배너는 main안에 aside로 독립적 컨텐츠로 만듦
  • 플로우배너 = 사이드배너 = 날개배너

<section class="banner">
</section>
<section class="md">
</section>
<section class="board">
<aside class="aside_board">

.banner{
	height: 300px;
	background-color: skyblue;
}
.md{
	height: 800px;
	background-color: purple;
}
.board{
	height: 500px;
	background-color: yellowgreen;
}
.aside_board{
	height: inherit;
	width:1200px;
	background-color: orange;
	margin:0 auto;
}

• section : 컨텐츠별 레이아웃 //여러번 사용가능 무슨기능할지몰라 마크업
• aside : 컨텐츠의 보조적인 section

<article class="notice"></article>
<article class="event"></article>
</aside>
</section>
<section class="review">
</section>
</main>
<footer class="copyright">
</footer>
</body>
</html>

.notice{
	width:600px;
	height: inherit;
	background-color: hotpink;
	float:left;
}
.event{
	width:600px;
	height: inherit;
	background-color: #aa0055;
	float:left;
}
.review{
	height: 400px;
	background-color: white;
}
.copyright{
	height: 200px;
	background-color: black;
}

• article : 각 그룹별로 독립적인 컨텐츠를 가지고 있을 경우 사용
• footer : copyright //한번만 사용
  
  

---

주저리주저리

메모리 버퍼 늘리는법
콘솔 퍼포먼스 워닝 알림
가장 위쪽 윈도우 메뉴>프리퍼런스 > 런/디버그>콘솔>콘솔버퍼사이즈를 8만에서 10만으로 바꾸기 100만으로바꿔도됨

 

4중 div로 짜면 닫는거 까먹었을때 찾을수가없음
잘짠코드라면
div안 span안 div안 label 요런느낌 다다르게 하면 좋음
나중에 코드 뜯어볼때 편안하다 

옆구리에 달린배너
디자이너는 날개배너
퍼블리셔는 사이드배너
개발자는 플로우배너 라고 부른다

상단 헬프 > 어바웃스프링버전 > 빌드버전을 알고 사용하기
헬프>인스톨뉴소프트웨어>맞는버전 선택 웹,xml어쩌고 고르고 밑에 컨텍트 올업데이트 해제하고 설치
이거 해야 오타율 줄고 코드 즉완 가능

업데이트하다가 이클립스 오류나면 녹강클라우드에서 plugin.zip, configuaration.zip 다운
할때 이클립스 끄고하기

id및 패스워드를 틀렸습니다 라고 하는것이 보안에 좋음
패스워드가 틀렸습니다 라고 하면 아이디는 맞았다는 뜻이니 보안에 취약 but 고객 편의는 떨어짐