💡 웹개발 진행 시에 Width
헤더와 푸터를 1920으로 width를 잡고,
main 쪽을 width 100%로 잡는다.
header {
margin: auto;
width: 1920px;
display: flex;
align-items: center;
position: relative;
}
/* nav */
header > nav {
width: 100%;
height: 45px;
position: absolute;
bottom: 0;
}
main {
width : 100%;
min-height: 700px;
}
레이아웃 container 로 잡고 그 안에 헤더, 푸터 등 container를 하나씩 쌓기.
👩💻 반응형 웹 제작 시 중요한 포인트
1) 보이는 큼직한 layout 잡기 (div태그로 박스 잡기)
2) 큼직한 박스 안에 있는 요소들의 width는 대부분 calc()나 퍼센트나 auto로 처리
3) window 줄어들 때 이 이상 줄어들지 마라 하는 최소 넓이, 높이 지정해주기! (min-width 속성)
window 늘어날 때 이 이상 늘어나지 마라 하는 최대 넓이, 높이 지정해주기! (max-width 속성)
4) display: flex 이용
5) 비율유지하면서 줄어들게 할 때는 padding-bottom 값 이용!
💡 CSS
- 클래스명을 지정하는 css(스타일 바인딩)는 이후 바뀔 수 있으니까 지양하는 것이 좋다.
- 마이너스 마진값 : 레이아웃 유지보수 할 때 문제가 생길 수 있다.
- inline을 주는 것 역시 지양
- 이미지 경로 (src)는 vue 에서는 publice > Asset > images 폴더 내에 저장을 한다.
- index.css는 안쓰는게 좋고, 그 중 아래의 코드는
import reportWebVitals from './reportWebVitals';
reportWebVitals();렌더링이 두번 된 것 같이 되어서 지우고 사용하는 것이 좋다.
- Router의 경우에
<Route path="/" element=<Start />근래 이렇게 작성하는 경우는 드물고, page 폴더를 따로 만들어서두는 것이 좋다.
- css style는 코드 내 아래에, 기능들은 위 쪽에 배치하는 것이 좋다.
- 아이디, 클래스명 네이밍 시에 시작의 이름은 영문 소문자를 사용하되 두 번째 단어부터 첫 번째 문자를 대문자로 처리하는 기법(카멜 케이스)을 사용한다. (ex. errorMessage)
- 무분별한 Div 사용은 좋지않다. 웹접근성을 위하여 article, news 등으로 작성해주는 것이 좋다.
- Div 1,2,3 이렇게 이름을 지정하는 것은 좋지않다.
- 한 파일 내에서 긴 코드를 작성하는 것은 유지보수에 좋지않기때문에 컴포넌트 단위로 잘라주는 것이 좋다.
- element
input , button 이런 요소들- component
작은 단위들을 나눔. section, article 별로.- page
라우팅 경로로 Login, Main, QR페이지 등
- app.vue 든 app.js든 거의 사용하지않고, vue의 경우에 pages 에 있는 index.js에 넣어서 <~~~.vue / > 하여 import 해서 사용한다.
- vue 에서 asset 폴더에 css, font, images 등을 넣어둔다.
(단, 홈페이지 아이콘만 public에 둔다. 배포됐을 때 경로 등의 이유때문에)
