4) 일단 마무리.
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>MSI학생정보시스템</title>
<link rel="stylesheet" href="mainstyle.css">
</head>
<body>
<header id="header">
<div id="headerFlexWrapper">
<h1><a href="main_page.html" target="_self">MSI학생정보시스템</a></h1>
<nav id="headerMenu">
<div>HOME</div>
<div>홈페이지</div>
<div>Office365</div>
<div>증명서</div>
<div>도서관</div>
<div>IDISK</div>
<div>E-class</div>
<div>LMS</div>
<div>U-check</div>
<div>MyICAP</div>
</nav>
</div>
</header>
<section id="layout">
<aside id="sideBar">
<h2>학부시스템</h2>
<ul>
<li>학적/장학</li>
<li>교과/수강</li>
<li>강의평가</li>
<li>성적/졸업</li>
<li>등록</li>
<li>학생활동</li>
<li>생활관</li>
<li>전산신청</li>
<li>보건소</li>
<li><a href="fake_test_page.html" target="_self">가짜 테스트 링크</a></li>
</ul>
</aside>
<section class="page-content" id="mainPageContent">
<article>
<h4>개인정보</h4>
<p>
11111111111
</p>
</article>
<article>
<h4>학생공지사항</h4>
<p>
22222222222
</p>
</article>
<article>
<h4>시간표</h4>
<p>
3333333333333333
</p>
</article>
<article>
<h4>학사일정</h4>
<p>
44444444444444444444444
</p>
</article>
</section>
</section>
</body>
</html>
<!--
+ 헤더를 포지션 스티키로 바꾸고
#grid를 딱 사이즈에 맞춰보자... 근데 일단 vh로 하긴했는데 완벽하게 맞질않음 .. ㅠㅠ
아니다 잘못생각한듯 캡쳐한거 보니까 사이즈는 최대사이즈로 정해두고 스크롤 위치를 제한한듯. 자바스크립트 배우고 다시해보기.
++++++ 아니 여기까진 뭐 그렇다 쳐 근데 매 페이지마다 header 요소와 sidebar 요소를 다시 써야하는건 너무 코드 낭비인것 같아 찾아보니 html include라는 스킬이라고 한다. 흠... 자바스크립트나 AJAX 사용해야한다니 일단은 .. 보류 !
+ 폰트는 설정 못했음 폰트도 바꿔보기
+ 헤더 내의 메뉴들을 flex 컨테이너로 만들어볼까 ?
아마 캡쳐화면처럼 잘 될듯 함
>> 실제로 개발자 툴로 확인해보니 flex 컨테이너가 맞았음 오예
+ css는 조건문이 없나 ?
+ 헤더를 flexbox 로 변경하여 여러 버튼 추가하기
!!!!! 표기법에 대한 정리 따로 블로그에 하기 !! .. 아이디 : 카멜, 클래스 : 케밥
+ 지금은 그냥 태그랑 아이디 막 쓰는데 나중에 시멘틱 고려해서 다시 수정하기 (수정중)
!! 그리드의 auto 는 자식 요소의 높이만큼 이라는 뜻
!! 그리드 속성들연습해봤음
!! 내가 지정해놓은 그리드 사이즈를 벗어난 크기가 더 추가가되면 알아서 auto 크기로 붙음
!! 헤더의 플렉스박스를 사실 position absolute로 만들고 헤더를 position relative로 설정하여 플렉스의 위치를 정해주는 것이 맞아보이지만 그냥 대충 패딩값으로 맞춰주었다.
!! 레이아웃 모바일우선, 데스크톱 우선
!! button 태그와 a 태그의 차이점
!! scss sass css 차이점
확실히 내가 css를 조금이나마 작성하면서 느낀 불편한 점들을 많이 보완해주고있다. 왜 언어가 계속 발전하는지 이해되는 기분... 근데 이 발전을 느끼려면 그 전 언어에서 불편함을 느껴야 한다는 점도 다시금 깨달았다.
!! wrapper와 container의 차이점에 대한 글
!! 여러개의 css 파일을 적용할 때 가장 마지막으로 불러온 파일을 적용한다.
------------------------------------------------------------------------------
++ 어차피 레이아웃을 만들어 놨기에 메뉴를 눌렀을 때 뜨는 창을 전부 만들 필요는 없을 것 같다. 그때마다 새로운 아이디 값을 만들고 레이아웃에 넣어주기만 하면 되므로.
이번 프로젝트는 버튼만들기, 버튼 눌렀을 때의 페이지 만들기, 플렉스박스로 헤더래핑하기, 중앙 컨텐츠 넣기 그리고 깃헙 올리기 까지만 하고 마무리하자.
더 하려면 할 수 있지만 새로운 프로젝트로 공부하는 것이 더 현명해보인다. 자바스크립트를 배우고 난 후에 다시 꼭 수정해봤으면 좋겠다. ++
++++++++++++++++++ 다음 프로젝트로 생각해놓은 것은... 음... 오픈소스로 공개되어있는 미니 프로젝트(라고하기에도 뭐하지만)를 완성본을 보고 카피해보고(1), 완성 코드와 비교해보고(2), 차이점을 정리해보고(3), 왜 다른지 이해하며 정리해보자(4)
-->css
#header {
background-image: url(header_bg.jpg);
height: 130px;
}
#headerFlexWrapper {
display: flex;
background-color: ;
padding-top: 30px;
justify-content: space-between;
align-items: flex-end;
}
#header h1 a {
color: white
}
#headerMenu {
display: inline-flex;
padding: 5px;
background-color: green;
}
#headerMenu div {
background-color: #fff;
border-color: black;
border-width: 3px;
padding: 3px;
margin: 3px;
}
aside {
background-color: #fff;
background-image: url(icon_left_menu_bg.png);
background-repeat: no-repeat;
background-position: left top;
height: 1000px;
}
aside h2 {
text-align: center;
color: blue;
}
aside a {
text-decoration: none;
color:black;
}
aside a:hover {
color: blue;
}
.page-content {
display: grid;
grid-template-columns: 1fr;
/* grid-auto-rows: ; */
background-color: rgba(142, 142, 142, 0.253);
padding: 20px;
row-gap: 20px;
}
.page-content article {
background-color: #fff;
border-radius: 20px;
margin: 20px;
}
@media (max-width:768px) { /* 작으면~ */
#sideBar {
display: none;
}
#header #headerMenu {
display: none;
}
#header #headerFlexWrapper {
justify-content: center;
}
}
@media (min-width: 769px) { /* 크면~ */
#layout {
/* border: solid 5px black; */
display: grid;
grid-template-columns: 250px 1fr;
height: 80vh;
}
#mainPageContent {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 2fr;
background-color: rgba(142, 142, 142, 0.253);
padding: 30px;
column-gap: 8px;
row-gap: 8px;
}
}한 것 , 배운 것
- 헤더의 메뉴들을 flex 로 바꿔 포장해보기
- 그리드 auto 크기의 의미
- 그리드 속성들 연습
- 그리드 사이즈 및 개수를 넘길 때 auto 사이즈로 붙는 것을 확인
- position absolute 등 포지션 이해해보기
- 레이아웃의 모바일우선, 데스크톱우선 방법
- button 태그와 a 태그의 차이점
- scss, sass, css 차이점
- 이걸 깨닫는 과정이 매우 중요한 과정이라고 생각한다
- wrapper와 container 혼용에 대한 글
- 여러개의 css 파일 적용 시 일어나는 일
- 구글에서 나오는 블로그 글들로만 만족하지 않기. stackoverflow 와 같은 해외 큰 커뮤니티에도 키워드 검색 해보기. 구글에서 한글로 해당 키워드를 확인한 후 다시 해외커뮤니티에 검색해보자
이래도 되나 ?
- 레이아웃이 이 꼬라지여도 괜찮나...? 핳하..
고치고 싶은 점 , 어떻게 하는거지 ?
- 게시판의 메뉴들을 클릭하면 서브 메뉴가 아래로 뜨게 하고 클릭하면 옆에 해당 창이 뜨는 것이 목표이지만 이는 자바스크립트를 배우고 바꿔보자. 대신 지금은 누르면 새로운 창이 뜨도록 바꿔보자.
그리드 추가 연습fixed position 활용해보기- #grid를 딱 사이즈에 맞게 설정해보기
- 일단 vh로 대충 비슷하게 하긴 했는데 완벽하게 맞질 않는다 ...
화면 캡쳐한것 보니까 사이즈는 최대가능 사이즈로 미리 설정해두고 스크롤 가능 범위를 제한한걸까 ? 어떻게하는거지 ??
- 일단 vh로 대충 비슷하게 하긴 했는데 완벽하게 맞질 않는다 ...
- 매 페이지마다 header 요소와 sidebar 요소를 다시 써야하는 건 너무 코드 낭비인것 같다...
- 대충 찾아보니 html include 라는 키워드를 확인했는데 나중에 더 알아보자
- 디자인 더 좋게 바꿔보기
- 버튼도 바꾸고 폰트도 바꿔보자
css는 조건문이 없나 ? 조건문을 사용 못하나 ? 찾아보니 SASS 라는데 이건 뭐지 ?헤더 flex 구조로 바꾸기- 시맨틱 태그 더 활용하고 적재적소에 사용하기
- 이번 .page-content처럼 특정 상황에 바뀌는 아티클을 보여주게 하려면 어떻게 하는게 좋은 방법일까 ?
한 html 파일에 여러 css 외부스타일 시트를 걸어놓고 사용하나 ?만약 이렇게 한다면 장점과 단점에는 뭐가 있을까 ?
음... 학습 능률이 조금 떨어지는 것을 느꼈다.
자바스크립트 공부를 시작하거나
다른 새로운 사이트를 빠르게 만드는 연습을 해보자. 아마 후자일듯함!
의식적인 연습 : 단순히 행위를 반복하는 것은 연습이 되지 않으며 실력이 늘지 않습니다. 노하우가 쌓일 뿐이죠. 자신의 약점을 고치려고 의식적으로 노력해야 합니다
not yet