매체별 디자인 제작 및 표준화 매체별 디자인 픽셀(pixel) 픽셀(pixel)은 picture element의 약자로, 디지털 이미지를 이루는 가장 작은 단위의 사각형 점을 의미한다. picture(그림)와 element(원소)를 합성한 단어이기 때문에, 우리나라에서는 ‘화소(畫素)’라 부르기도 한다. 해상도 해상도란 그래픽 화면을 표시하는 장치의 정밀도, 즉 화면을 구성하는 픽셀(pixel) 수를 의 미한다. 예를 들어 1,024*768 크기의 이미지는 가로 1,024개, 세로 768개의 픽셀로 구성되 는 것이다. 해상도를 나타내는 단위로 PPI를 사용한다. PPI는 pixel per inch의 약자로, 모 니터 등 디스플레이 장치의 가로 세로 1인치 면적 안에 몇 개의 픽셀이 들어갔는지에 대 한 픽..
UX 구성 요소 적용 UX(user experience, 사용자 경험) UX(user experience), 즉 사용자 경험이란 사용자가 제품이나 시스템을 이용하면서 얻게 되는 느낌이나 생각 등을 포함한 모든 측면에서의 총체적 경험을 의미한다. 여기서의 경 험은 단순히 지각적 경험만을 의미하는 것이 아니라, 지각 전반에 걸쳐 사용자가 참여하 고 사용하고 관찰하며 상호 교감을 통해 누적되는 가치 있는 경험을 의미한다. 사용자 경 험은 제품·시스템에 대한 사용자의 느낌과 생각에 관한 것이기 때문에 본질적으로 주관 적 특성을 지닌다. 사용자 경험의 목표는 사용자의 요구에 부합하는 제품·시스템을 제공 함으로써 사용자에게 긍정적 경험을 만들어내는 것이다. UX 관련 영역 사용자 경험은 제품·시스템에 대한 사용자의..
메가박스 사이트 만들기 강의번호 22 - 마무리 및 Github custom.js (function($){ //배너 이미지 슬라이드 var mySwiper = new Swiper('.swiper-container', { navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, pagination: { el: '.swiper-pagination', type: 'bullets', }, autoplay: { delay: 5000, }, }); //영화차트 이미지 슬라이드 var swiper = new Swiper('.swiper-container2', { slidesPerView: 4, spaceBetween: 24, mous..
메가박스 사이트 만들기 강의번호 21 - Youtube API movie.js (function($){ /* 트레일러 영상 플레이어를 활성화 */ /* YouTube iframe API: https://developers.google.com/youtube/player_parameters */ (function handleTrailer() { // 셀렉터 캐시 var $selector = { body: $( "body" ), overlay: $( "#blackout" ), modal: $( "#trailerModal" ), showButton: $( "#showTrailer" ), hideButton: $( "#hideTrailer" ), }; // 플레이어 var player = { obj: null, ..
메가박스 사이트 만들기 강의번호 20 - 탭메뉴/스킵메뉴 style.css /*스킵 메뉴*/ #skip {position: relative;} #skip a{position: absolute; left: 0; top: -40px; width: 140px; line-height: 30px;border: 1px solid #fff; color: #fff; text-align: center; background: #333; } #skip a:active, #skip a:focus{top: 0;} index.html 최신 영화 소식 새로운 이벤트 새로운 영화
메가박스 사이트 만들기 강의번호 19 - 푸터영역 완성! style.css /*푸터영역*/ .footer_sns{position: absolute; right: 17px; top: 33px; z-index: 1;} .footer_sns li{display: inline-block; margin: 0 2px;} .footer_sns li a{display: block; width: 36px; height: 36px;} .footer_sns li.s1{background-position: 0 -375px;} .footer_sns li.s2{background-position: -36px -375px;} .footer_sns li.s3{background-position: -72px -375px;} .foot..
메가박스 사이트 만들기 강의번호 18 - 헬프영역 반응형 style.css /*미디어쿼리*/ @media (max-width: 1290px){ .container{width: 100%;} .header .nav ul li{width: 93px;} .header .nav ul li a{width: 91px; font-size: 15px; padding: 17px 10px; } .header h1 em{padding: 11px 8px 5px 0;} .header h1 strong{top: 19px;} .swiper-button-prev, .swiper-button-next{display: none;} } @media (max-width: 1024px){ #mNav{display: block;} .nav{di..
UI 제작의 원칙 인터페이스(Interface)란 두 개체가 만나는 접점에서 상호 간의 소통을 위하여 만들어진 매 개체, 즉 소통하는 통로를 의미한다. 특히 사용자와 디지털 기기·디지털 시스템이 상호작 용할 수 있도록 하는 물리적·가상적 매개체를 사용자 인터페이스(UI, User Interface)라고 하는데, 사용자가 디지털 기기·시스템을 조작할 수 있게 하는 ‘입력장치’와 사용자가 입력한 것의 결과를 표시하는 ‘출력장치’로 구성된다. 사용자 인터페이스를 제작하기 위해 고려해야 하는 원칙은 다음과 같다. 메타포(Metaphor) 메타포는 ‘은유’, ‘비유’를 뜻하는 말로, UI에서의 메타포란 휴지통이 ‘문서 삭제’, 폴더가 ‘문서보관’을 의미하는 것처럼 시스템에서 표현하고자 하는 대상을 사용자의 경 험..