SiNNaK Programming

쇼핑몰 사이트들 같은 사이트들을 보면 위쪽에 메뉴 영역이나 좌, 우측에 메뉴 영역이 스크롤을 해도 고정되어 있는 것이 있다. 간단하게 position: fixed 를 사용한 예제이다. ※기본적으로 #head에 position: fixed 속성이 해당 엘리먼트를 고정시키는 역할을 한다. ※스크롤을 내리면 컨텐츠 부분은 내려가지만 head 부분은 고정되어 따라다니는 것처럼 보인다.

네이버등의 사이트를 보면 내용물(content)들이 가운데로 정렬되 있는걸 볼수있다. (물론 사용자 화면이 작으면 꽉 찰지도..) 간단하게 css 만으로 정렬 할 수 있다. ※위 #content 에서 margin: 0 auto; 로 준 영역이 가운데 정렬시키는 방법이다. margin 속성에서 0 은 위, 아래 즉 0으로 맞춘것이고 auto는 우측, 좌측 을 자동으로 준다는 뜻이다.

현재 보여지는 화면에서(위아래 스크롤이 있어 밑에 내린다 해도) 무조건 가운데에 팝업, 모달팝업 또는 일반 div를 보이게/정렬 하는 방법이다.

JQuery UI를 이용한 달력 JQuery UI는 https://jqueryui.com/ 사이트 이며 다양한 커스텀 ui를 제공한다. 달력외에도 다양한 컴포넌트들을 제공한다. 먼저 html 에 링크할 url이다. ※위 태그들을 상단 head태그 사이에 넣어 JQuery UI css, js 의 위치를 링크한다. ※body에 input 태그로 넣어준다. ※위 #datepickerFrom, #datepickerTo 는 개발자가 원하는 id로 변경 가능하며 달력 한글화 스크립트는 초기 영문이기때문에 속성을 변경하여 한글화 시킨 작업이다. ※결과물 이다.(이미지는 무시)

JQuery를 사용한 page loading ※index.html(여기에 다른 페이지를 부를 것임) ※header.html(이페이지를 붙을거임) ※header.html(#header에 header.html를 붙이는 소스)

HTML css 및 js 불러오기 HTML head에 상대경로로 다운로드한 css js 불러오기 ※위 sinnak86.css 파일에 @import url(normalize.css); 를 하여 css 초기화를 하였다. url 링크를 사용한 css js 불러오기 ※위의 코드처럼 url로 파일을 별도로 다운받지 않고 사이트에서 제공하는 css 및 js 등 기타 파일들을 불러올수 있다