html css를 배우는 모두가 하는 '게시판 만들기'를 하기로 했다.
대학교의 온라인 학생 서비스를 최대한 따라 만들어보자 (외형만)
1) 위치만 잡아보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>MSI학생정보시스템</title>
<style>
header h1 {
border-bottom: solid 10px blue;
}
/* #leftMenu {
border-right: solid 3px grey;
} */
#centerArticle div {
border: solid 1px black;
}
#leftMenu h2 {
text-align: center;
}
#grid {
border: solid 5px red;
display: grid;
grid-template-columns: 250px 1fr;
}
#centerArticle {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
</style>
</head>
<body>
<div id="topMenu">
<header>
<h1>MSI학생정보시스템</h1>
</header>
</div>
<div id="grid">
<div>
<nav id="leftMenu">
<h2>학부시스템</h2>
<ul>
<li>학적/장학</li>
<li>교과/수강</li>
<li>강의평가</li>
<li>성적/졸업</li>
<li>등록</li>
<li>학생활동</li>
<li>생활관</li>
<li>전산신청</li>
<li>보건소</li>
</ul>
</nav>
</div>
<div id="centerArticle">
<div>
<h4>개인정보</h4>
<p>
11111111111
</p>
</div>
<div>
<h4>학생공지사항</h4>
<p>
22222222222
</p>
</div>
<div>
<h4>시간표</h4>
<p>
3333333333333333
</p>
</div>
<div>
<h4>학사일정</h4>
<p>
44444444444444444444444
</p>
</div>
</div>
</div>
</body>
</html>한 것
- #id 를 활용해 그리드를 연습
- 하지만 너무 안이쁘고 ... 위치를 원하는 곳에 넣는 것이 조금 힘들었다. 박스모델의 패딩 마진 보더가 아직 많이 헷갈린다.
이래도 되나 ?
- 게시판 목록들을 리스트로 만들어도 되나 ?
- 아이디 값은 언제 사용하는거고 클래스는 언제 사용하는거지 ? 그리드는 아이디 혹은 클래스 둘 다로 만들어도 되는건가 ?
고치고 싶은 점 , 어떻게 하는거지 ?
- 창의 사이즈가 작아지면 그리드 2x2 에서 1열로 나열되게 만들기
- 게시판의 메뉴들을 클릭하면 서브 메뉴가 아래로 뜨게 하고 클릭하면 옆에 해당 창이 뜨는 것이 목표이지만 이는 자바스크립트를 배우고 바꿔보자. 대신 지금은 누르면 새로운 창이 뜨도록 바꿔보자.
- nav 태그는 언제 사용하는거지 ?
- div 떡칠은 어떻게 줄이는걸까 ?
의식적인 연습 : 단순히 행위를 반복하는 것은 연습이 되지 않으며 실력이 늘지 않습니다. 노하우가 쌓일 뿐이죠. 자신의 약점을 고치려고 의식적으로 노력해야 합니다
not yet