메가박스 사이트 만들기 강의번호 17 - 고객센터/SVG 완성! style.css /*고객센터*/ .service ul{overflow: hidden;} .service li{float: left; width: 50%; height: 193px; box-sizing: border-box; border: 1px solid #d7d7d7; text-align: center} .service li a{} .service li a span{display: block; width: 120px; height: 120px; margin: 20px auto 0 auto; overflow: hidden} .service li a strong{color: #666; font-size: 18px; font-weight: 5..
메가박스 사이트 만들기 강의번호 16 - 메가박스 할인카드 완성! style.css /*할인카드*/ .card{padding: 17px;} .card ul{} .card ul li{position: relative;border: 1px solid #d7d7d7; padding: 17px; margin-bottom: 17px; min-height: 102px; box-sizing: border-box;} .card ul li span{position: absolute; left: 17px; top: 17px;} .card ul li span img{width: 105px;} .card ul li strong{display: block; font-size: 18px; padding-left: 120px; c..
심미적 요소 표현 시각 인터페이스의 심미적 요소 인간은 주변의 데이터나 언어 등의 정보를 시각적 요소로 변환하여 생각하는 특징을 지니 고 있다. 따라서 정보의 시각화를 통하여 정보를 효율적이고 직관적으로 이해할 수 있도 록 구성하는 것이 중요하다. 시각화 시각화(visualization)란 언어나 수치로만 된 정보를 마음속에서 그림이나 이미지 등의 형태 로 바꾸어 사고하는 과정을 뜻한다. 특히, 정보의 시각화는 사용자가 보다 효율적으로 정 보를 찾거나 이해할 수 있도록 정보의 의미와 상호 관계를 그래프, 이미지, 일러스트레이 션, 색, 타이포그래피 등의 그래픽 요소로 나타내는 과정을 의미한다. 정보를 시각화하면 사용자가 정보를 직관적으로 이해할 수 있을 뿐만 아니라 한 번에 많 은 데이터를 보여 줄 수 ..
메가박스 사이트 만들기 강의번호 15 - 공지사항 완성! style.css /*help*/ .help {overflow: hidden;padding-bottom: 200px;} .help article {float: left; width: 32%; margin-right: 2%;} .help article > div {border: 1px solid #dbdbdb; height: 350px;} .help article.help_box3 {margin-right: 0;} .help article h3 {font-size: 30px; font-weight: 500; margin-bottom: 20px;} /*공지사항*/ .notice{padding: 17px;position: relative;} .notic..
스토리보드 작성 스토리보드 웹에서의 스토리보드는 웹 사이트 개발에 있어서 중요한 설계도이자 구체적인 작업 지침 서로, 각 화면에 대한 정의와 구성, 내용, 기능, 서비스 흐름을 상세하게 설계하고 정의한 문서이다. 와이어 프레임이 화면의 구조와 흐름을 파악하거나 전체 구조를 조감하기 위해 비교적 단순화한 작업인 반면, 스토리보드는 각 화면의 흐름이 자세히 포함된 작업이다. 스토리보드의 완성은 기획 단계의 마무리를 의미하는데, 스토리보드에 명시된 내용을 토 대로 디자이너는 시각 인터페이스를 디자인하고, 프로그래머는 프로그램을 설계하고 세부 적인 코딩을 진행하게 된다. 스토리보드 작성 스토리보드는 대개 표지와 개정 이력, 공통 요소 정의, 정보 구성도, 서비스 흐름도, 화면 설계의 순으로 작성하며, 프로젝트 ..
와이어 프레임 작성 와이어 프레임의 개념 와이어 프레임(wire frame)이란 실제로 디자인을 진행하기 전에 화면에 표시될 구성, 정보 체계, 기능, 콘텐츠에 대한 전체적 레이아웃을 간단한 선(wire)으로 단순하게 표현한 스케 치를 의미하며, 색상, 타이포그래피, 이미지 등의 정보를 최소화하여 도식(schematic), 청사 진, 프로토타입(prototype) 형식으로 보여 줄 수 있다. 와이어 프레임은 그래픽 요소나 시 각적 요소의 표현보다는 계층 요소의 구현을 중심으로 표현해야 한다 와이어 프레임 작성 와이어 프레임을 작성할 때에는 웹 브라우저, 모바일 웹 등 다양한 매체의 화면 비율을 고려하여 작성하며, 콘텐츠의 세부 내용과 디자인적 요소는 최대한 배제하고 대략적인 페 이지를 스케치한다. 이전 ..
메가박스 사이트 만들기 강의번호 14 - 새로운 영화 영역2 완성! reset.css * input style */ input {background-image: none;} input[type=button], input[type=reset], input[type=text], input[type=password], input[type=submit], input[type=search], input[type=tel], input[type=email] { -webkit-appearance: none; border-radius: 0 } input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -w..
메가박스 사이트 만들기 강의번호 13 - 새로운 영화 영역 완성! style.css /*오프닝*/ .opening{padding: 100px 0; text-align: center; color: #bb9b51;} .opening h2{} .opening h2 .grand{background-position: 0 -175px; display: inline-block; width: 330px; height: 50px; margin-bottom: 15px;} .opening .date{background-position: 0 -225px; display: inline-block; width: 260px; height: 45px;} .opening .desc{font-size: 35px; font-weight:..