2) 페이지 정리하기
html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>MSI학생정보시스템</title>
<link rel="stylesheet" href="mainstyle.css">
</head>
<body>
<div id="header">
<h1><a href="main_page.html" target="_self">MSI학생정보시스템</a></h1>
</div>
<div id="grid">
<nav id="side-bar">
<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>
</nav>
<div class="page-content">
<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>
<!--
!! 그리드연습해보기. 칼럼갭, 로우갭
!! border-radius 곡률 설정하기.
!! nav 태그란. 의미 확실히 하기.
!! fixed position. 왼쪽 사이드바 픽스해서 설정하기.
근데 더 어려워져서 일단 그리드속의 그리드 형식으로 지정함
!! 외부 스타일 시트 적용. 너무 길어서 적용
!! css possition 속성
!! div 요소를 전체화면으로 설정하기!!
두가지 방법 다 알기
!! 뷰포트란?
!! 1024px때 게시판사라지고 메인화면만 남음 768px때 그리드가 1열로 바뀜
+ 이제 앵커로 리스트 누르면 화면 나오게 해야함
!! 앵커 태그와 속성 공부
!! 주소 복사를 하다 보니 절대주소와 상대주소가 궁금해졌다.
+ 헤더를 포지션 스티키로 바꾸고
#grid를 딱 사이즈에 맞춰보자... 근데 일단 vh로 하긴했는데 완벽하게 맞질않음 .. ㅠㅠ
아니다 잘못생각한듯 캡쳐한거 보니까 사이즈는 최대사이즈로 정해두고 스크롤 위치를 제한한듯. 자바스크립트 배우고 다시해보기.
!! 만약 다른 창을 띄우면 사이드바와 헤더는 안바뀌는데 센터아티클은 바뀌어야하네...
그러면 css를 항상 수정해야하니까 id 값에서 class로 바꿔야할듯 id="center-article" -> class="page-content"
+ 근데 이러면 Lorem도 쓸데없이 그리드 처리 되는것 같은데 ?? 어떻게 해결하지 ?
++++++아니 여기까진 뭐 그렇다 쳐 근데 매 페이지마다 header 요소와 sidebar 요소를 다시 써야하는건 너무 코드 낭비인것 같아 찾아보니 html include라는 스킬이라고 한다. 흠...
+ 폰트 컬러도 조금씩 만져볼까? hover도 써보자
+ 링크 밑줄이랑 폰트 초기화하기 내 입맛대로 바꿔보자
+ 배경도 바꿔야함 박스 모델의 배경을 학교홈피와비슷하게 해보자.
!! 재밌던점 : <style> </style> 태그 내에서 ctrl+/ 했을 때 각주 표현이 html 각주가 아닌 css 각주로 나왔음
-->css
body {
background-color:antiquewhite;
}
#header {
background-color: lightblue;
border-bottom: solid 1px blue;
height: 100px;
}
nav {
background-color: lightgreen;
border-right: solid 2px black;
}
.page-content div {
background-color: lightgrey;
border-radius: 10px
}
#side-bar h2 {
text-align: center;
}
@media (max-width:768px) {
#side-bar {
display: none;
}
.page-content{
display:grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
background-color: grey;
padding: 30px;
row-gap: 30px;
}
}
@media (min-width: 769px) {
#grid {
border: solid 5px black;
display: grid;
grid-template-columns: 250px 1fr;
height: 80vh;
}
/* #side-bar {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 800px;
margin-right: 220px;
이렇게 하니 지금은 더 복잡해서 일단 폐기.
} */
.page-content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
background-color: grey;
padding: 30px;
column-gap: 30px;
row-gap: 30px;
}
}한 것 , 배운 것
- 그리드 column gap, row gap 사용해보기
- 미디어쿼리 반응형 디자인 해보기
- border-radius 곡률 설정해보기, 예문 만들어보기
- nav 태그 확실하게 의미 이해하기
- fixed position 예문 만들어보기, 적용해보기. 하지만 더 복잡하고 어려워져서 일단 그리드 중첩 형식으로 활용함
- div 요소 크기를 화면 전체로 설정해보기
- 뷰포트란 ?
- 주소 복사를 하다보니 궁금해져서 절대주소와 상대주소 알아보기
- css 길이가 너무 길어져서 외부 스타일시트 적용.
- id, class 활용해보기
- 재밌었던 점 : style 태그 내에서 각주(ctrl+/)을 하니 각주 표현이 css 각주로 나왔음
- display 속성
이래도 되나 ?
게시판 목록들을 리스트로 만들어도 되나 ?
-> ul li a 로 구성하는것이 일반적이다아이디 값은 언제 사용하는거고 클래스는 언제 사용하는거지 ? 그리드는 아이디 혹은 클래스 둘 다로 만들어도 되는건가 ?
-> 아이디는 전체에서 단 한번만 사용, 클래스는 여러 요소에 중복 사용. 반복적으로 사용되는 스타일에는 class로 정의하고 그 내부에 세부 스타일을 정의할 때 id를 사용하면 효과적이라고 한다. 우선순위도 다름. id>class- 지금처럼 class="page-content"로 뭉뚱그려 놔도 되나 ?? 쓸데없이 그리드 처리가 되는 것 같은데
고치고 싶은 점 , 어떻게 하는거지 ?
창의 사이즈가 작아지면 그리드 2x2 에서 1열로 나열되게 만들기- 게시판의 메뉴들을 클릭하면 서브 메뉴가 아래로 뜨게 하고 클릭하면 옆에 해당 창이 뜨는 것이 목표이지만 이는 자바스크립트를 배우고 바꿔보자. 대신 지금은 누르면 새로운 창이 뜨도록 바꿔보자.
nav 태그는 언제 사용하는거지 ?
-> 네비게이션 링크들의 집합을 정의할 때 사용!! 지금처럼 안에 ul il a 태그로 구성하는 것이 일반적이다- div 떡칠은 어떻게 줄이는걸까 ?
- 그리드 추가 연습
- fixed position 활용해보기
- 헤더 position sticky로 바꿔보기
- 앵커 태그로 리스트 누르면 화면 전환하기
- 앵커 태그와 속성 공부
- #grid를 딱 사이즈에 맞게 설정해보기
- 일단 vh로 대충 비슷하게 하긴 했는데 완벽하게 맞질 않는다 ...
화면 캡쳐한것 보니까 사이즈는 최대가능 사이즈로 미리 설정해두고 스크롤 가능 범위를 제한한걸까 ? 어떻게하는거지 ??
- 일단 vh로 대충 비슷하게 하긴 했는데 완벽하게 맞질 않는다 ...
- 만약 창을 띄우면 사이드바와 헤더는 안바뀌는데 center_article은 바뀌어야하네... 그런데 id="center-article" 에서 class="page-content"로 바꾸면 쓸데없이 Lorem 컨텐츠도 그리드처리 되네.. 맞나 ???
- 매 페이지마다 header 요소와 sidebar 요소를 다시 써야하는 건 너무 코드 낭비인것 같다...
- 대충 찾아보니 html include 라는 키워드를 확인했는데 나중에 더 알아보자
- 디자인 더 좋게 바꿔보기
- 폰트컬러, 링크밑줄, 배경 등 조금씩 만져보기
- hover 사용해보기
의식적인 연습 : 단순히 행위를 반복하는 것은 연습이 되지 않으며 실력이 늘지 않습니다. 노하우가 쌓일 뿐이죠. 자신의 약점을 고치려고 의식적으로 노력해야 합니다
not yet