1)학습한 내용
가이드 라인 작성
[프로젝트를 통해 요구하는 화면과 기능]
-
상단 메뉴바 (메인화면) : 마우스를 올렸을 때 펼쳐지는 기능
-
회사소개화면 (소개글, 연혁, 조직도, 오시는길) , 사업현황화면 (프로젝트), 정보마당화면 (공지사항, FAQ)
=======================================================
(1) 파일명 index.html / style.css / script.js / toco_img(이미지폴더) 통일
(2) 이미지, 작업에 쓰일 리소스들의 이름은 모두 영문을 쓴다. 띄어쓰기가 필요한 경우 언더바를 쓴다.
(3) 클래스명, 아이디명 (top-nav-list... center-aaa , bottom-bbb)
-
단어를 용도에 맞게 명시하고 축약어로 쓸 것
ex)
상단 메뉴바 : nav
상단 메뉴바 하위메뉴 : nav-list -
시맨틱 태그 사용 (header, section, footer...)
(4) 글꼴, 색 지정(타이틀 어느 부분은 어떤 컬러) : 폰트는 Noto Sans Kr, sans serif 구글 기본 폰트를 사용하였고 색은 pink #ee72d8, navy #04088a 를 기본적으로 사용
root에 선언을 해두고 끌어다 쓸 것
(5) 배치 사이즈는 reset css라는 만들어진 오픈 소스를 쓴다.
- 새로운 웹페이지 만들 때 사용
==================reset css====================
/ http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/ HTML5 display-role reset for older browsers /
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
가이드라인을 잡고 잡은 css를 지금 프로젝트에 적용시키니 글자가 겹치거나 패딩을 없어져서 수정해야 되는 부분이 생겼습니다. 가이드라인을 처음부터 적용시켜야 하는데 뒤늦게 적용시켜서 나오는 부작용 인 듯 합니다. 조만간 수정을 통해 고칠 예정입니다.
2) 학습내용 중 어려웠던 점
X
3) 해결방법
X
4) 학습소감
가이드라인을 작성하고 적용하는 과정에서 가이드라인이 필요한 이유를 제대로 알게 되었습니다.
본래 홈페이지와 작성된 홈페이지의 스타일 차이로 인해 많이 다른 모습을 보여주었으며 원래 css가 적용되고 후에 가이드라인이 적용되는 것 같아 다시 적용하는 방법을 찾아야 할 것 같습니다.
