3) 레이아웃 다시 짜기
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">
<h1><a href="main_page.html" target="_self">MSI학생정보시스템</a></h1>
</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로 하긴했는데 완벽하게 맞질않음 .. ㅠㅠ
아니다 잘못생각한듯 캡쳐한거 보니까 사이즈는 최대사이즈로 정해두고 스크롤 위치를 제한한듯. 자바스크립트 배우고 다시해보기.
!! 근데 이러면 Lorem도 쓸데없이 그리드 처리 되는것 같은데 ?? 어떻게 해결하지 ?
레이아웃 변경으로 수정완료
++++++ 아니 여기까진 뭐 그렇다 쳐 근데 매 페이지마다 header 요소와 sidebar 요소를 다시 써야하는건 너무 코드 낭비인것 같아 찾아보니 html include라는 스킬이라고 한다. 흠... 자바스크립트나 AJAX 사용해야한다니 일단은 .. 보류 !
!! 폰트 컬러도 조금씩 만져볼까? hover도 써보자
!! 링크 밑줄이랑 폰트 초기화하기 내 입맛대로 바꿔보자
+ 폰트는 설정 못했음 폰트도 바꿔보기
!! 배경도 바꿔야함 박스 모델의 배경을 학교홈피와비슷하게 해보자.
+ 헤더 내의 메뉴들을 flex 컨테이너로 만들어볼까 ?
아마 캡쳐화면처럼 잘 될듯 함
>> 실제로 개발자 툴로 확인해보니 flex 컨테이너가 맞았음 오예
+ css는 조건문이 없나 ?
+ 헤더를 flexbox 로 변경하여 여러 버튼 추가하기
!! 레이아웃을 다시짜기
!! 개별 페이지는 인라인스타일로 짤까 ?
짜도 되나? 인라인 스타일은 언제 짜는거지 ??
보니 메인화면 컨텐츠를 제외한 것들은 1column grid로 되어있음 그러므로 메인화면만 인라인스타일로 적고 나머지는 css파일에 .page-content로 적으면 될듯 아니면 id="mainPage" 만들어서 적어도 괜찮을듯
!!!!! 표기법에 대한 정리 따로 블로그에 하기 !! .. 아이디 : 카멜, 클래스 : 케밥
+ 지금은 그냥 태그랑 아이디 막 쓰는데 나중에 시멘틱 고려해서 다시 수정하기 (수정중)
!! 시멘틱 태그 공부
!! article 태그에 대한 생각.
!! 명시성 때문에 골치아팠음.
+ 명시성에 대한 공부가 더 필요함 이번 중앙 아티클이 바뀌듯 특정 상황에 바뀌게 하려면 어떻게 하는게 좋은 방법인지 ?
!! 미디어쿼리는 일단 기본 페이지에서 특정상황일 때 '바뀌는'것만 정해주면 된다. 즉 기본 상황을 미리 만들어 놓은 뒤 특정상황일 때의 변화점들만 추가해주면 되지 애초부터 상황을 두가지로 만들어서 기본템플릿을 만들 필요는 없었다.
!! 박스에 이미지 파일 넣기
!! z-index 속성
!! text-decoration-color 과 color 의 차이점 !
text-decoration은 텍스트 꾸미는 것을 바꾸는 속성임
!! 홈페이지에서 배경 다운받아서 배경을 고쳐봤음 크기는 나중에 flex 박스 다 완성하고 난 뒤 고치자
++ 어차피 레이아웃을 만들어 놨기에 메뉴를 눌렀을 때 뜨는 창을 전부 만들 필요는 없을 것 같다. 그때마다 새로운 아이디 값을 만들고 레이아웃에 넣어주기만 하면 되므로.
이번 프로젝트는 버튼만들기, 버튼 눌렀을 때의 페이지 만들기, 플렉스박스로 헤더래핑하기, 중앙 컨텐츠 넣기 그리고 깃헙 올리기 까지만 하고 마무리하자.
더 하려면 할 수 있지만 새로운 프로젝트로 공부하는 것이 더 현명해보인다. 자바스크립트를 배우고 난 후에 다시 꼭 수정해봤으면 좋겠다. ++
++++++++++++++++++ 다음 프로젝트로 생각해놓은 것은... 음... 오픈소스로 공개되어있는 미니 프로젝트(라고하기에도 뭐하지만)를 완성본을 보고 카피해보고(1), 완성 코드와 비교해보고(2), 차이점을 정리해보고(3), 왜 다른지 이해하며 정리해보자(4)
-->css
/* body {
background-color:antiquewhite;
margin: 0;
} */
#header {
background-image: url(header_bg.jpg);
height: 130px;
}
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;
}
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: 10px;
margin: 10px;
}
@media (max-width:768px) { /* 작으면~ */
#sideBar {
display: none;
}
}
@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;
}
}한 것 , 배운 것
- 시맨틱 태그들을 최대한 활용 해보려고 노력했다. div 로만 구획을 하다보니 층 찾기가 너무 힘들어서 내린 결정이었다. 아직 미숙하고 제대로 활용을 못한 것 같지만 이전보다 더 읽기도 좋았다
- 따로 글로 정리해보자. 또 활용 예시들도 더 알아보자
- 앵커 태그와 속성들 공부
- 레이아웃 갈아엎기
- font-decoration-color와 color 차이점 이해
- hover 사용
- 링크 밑줄과 색상 변경
- 박스 모델에 배경 넣기
- background-image와 다른 속성들(반복, 위치)도 알아봤음
- html, css 표기법 확인하기. ( 따로 글 작성 해야함 )
- 미디어 쿼리에 쓸데 없는 것 빼기. 미디어쿼리는 바뀌는 것만 정해주기. 시작부터 기본 템플릿을 두 상황에 나눠 만드려고 하니 머리아팠음. 기본 페이지를 만든 후 특정상황일 때 변화하는 포인트만 다시 적어주기
- z-index 라는 속성
- 명시성에 대해 고민해보기
- 인라인스타일과 id, class 등에 대해 고민해보고 자료 찾아보기
- 인라인-블록에 대해 알아보기
- article 태그의 특징 알아보기
이래도 되나 ?
지금처럼 class="page-content"로 뭉뚱그려 놔도 되나 ?? 쓸데없이 그리드 처리가 되는 것 같은데
-> 안될 것 같아서 레이아웃 변경하고 그리드 다시 구획함
고치고 싶은 점 , 어떻게 하는거지 ?
- 게시판의 메뉴들을 클릭하면 서브 메뉴가 아래로 뜨게 하고 클릭하면 옆에 해당 창이 뜨는 것이 목표이지만 이는 자바스크립트를 배우고 바꿔보자. 대신 지금은 누르면 새로운 창이 뜨도록 바꿔보자.
div 떡칠은 어떻게 줄이는걸까 ?
-> 시맨틱 태그 활용- 그리드 추가 연습
- fixed position 활용해보기
- 헤더 position sticky로 바꿔보기
앵커 태그로 리스트 누르면 화면 전환하기앵커 태그와 속성 공부
- #grid를 딱 사이즈에 맞게 설정해보기
- 일단 vh로 대충 비슷하게 하긴 했는데 완벽하게 맞질 않는다 ...
화면 캡쳐한것 보니까 사이즈는 최대가능 사이즈로 미리 설정해두고 스크롤 가능 범위를 제한한걸까 ? 어떻게하는거지 ??
- 일단 vh로 대충 비슷하게 하긴 했는데 완벽하게 맞질 않는다 ...
만약 창을 띄우면 사이드바와 헤더는 안바뀌는데 center_article은 바뀌어야하네... 그런데 id="center-article" 에서 class="page-content"로 바꾸면 쓸데없이 Lorem 컨텐츠도 그리드처리 되네.. 맞나 ???
-> 레이아웃 변경, 그리드 범위 명확하게 이해함- 매 페이지마다 header 요소와 sidebar 요소를 다시 써야하는 건 너무 코드 낭비인것 같다...
- 대충 찾아보니 html include 라는 키워드를 확인했는데 나중에 더 알아보자
- 디자인 더 좋게 바꿔보기
폰트컬러, 링크밑줄, 배경 등 조금씩 만져보기- 버튼도 바꾸고 폰트도 바꿔보자
hover 사용해보기- css는 조건문이 없나 ? 조건문을 사용 못하나 ? 찾아보니 SASS 라는데 이건 뭐지 ?
- 헤더 flex 구조로 바꾸기
- 여러 버튼도 추가하기
- 시맨틱 태그 더 활용하고 적재적소에 사용하기
- 이번 .page-content처럼 특정 상황에 바뀌는 아티클을 보여주게 하려면 어떻게 하는게 좋은 방법일까 ?
- 한 html 파일에 여러 css 외부스타일 시트를 걸어놓고 사용하나 ?
- 만약 이렇게 한다면 장점과 단점에는 뭐가 있을까 ?
의식적인 연습 : 단순히 행위를 반복하는 것은 연습이 되지 않으며 실력이 늘지 않습니다. 노하우가 쌓일 뿐이죠. 자신의 약점을 고치려고 의식적으로 노력해야 합니다
not yet