본문 바로가기

Skills/Web

[Sample] 퍼블리싱&디자인 소스 (HTML + CSS) 위 이미지는 디자인 소스입니다. 아래 첨부파일로 HTML 파일 및 CSS, 이미지 파일 공개합니다. 아래 이미지는 HTML&CSS로 작업 완료한 상태입니다. 넓이는 모두 1200px이며, 아래는 크롬 브라우저 기준입니다. 더보기
반응형 웹사이트 만들기 (부트스크랩 프레임 워크 2 - CSS) 부트스크랩에는 폼이나 버튼, 이미지, 표 등 웹 문서 안에서 사용하는 여러 요소들에 이용할 수 있는 스타일이 미리 만들어져 있어서 스타일을 만들고 수정하는 번거로움 없이 그대로 가져다 사용할 수 있습니다. 회원 가입 양식이나 게시판 양식 등 사용자가 입력할 부분에 사용하는 폼 요소들은 화면에 보기 좋게 나열하기 위해 css를 이용해야 합니다. 물론 한 번에 끝나지 않고 여러 번 화면으로 확인해 가며 수정해야 하는데요, 부트스크랩을 이용하면 폼 요소들도 간단히 만들 수 있습니다. 그래서 사이트를 만들 때 다른 툴을 이용하더라도 폼 부분만큼은 부트스트랩의 css를 가져다 로그인 폼이나 회원 가입 폼을 만들기도 합니다. .form-inline 클래스 사용자명비밀번호 기억하기 .sr-only 클래스 사용자명비밀.. 더보기
반응형 웹사이트 만들기 (부트스크랩 프레임 워크 1 - 미디어 쿼리와 그리드 시스템) 부트스크랩에서는 반응형 웹을 구현하기 위해 12칼럼 가변 그리드를 사용합니다. 미리 css가 정의되어 있기 때문에 클래스 스타일만 제대로 이해하면 데스크톱과 태블릿, 모바일 기기에 맞는 반응형 웹 레이아웃을 손쉽게 만들 수 있습니다. 부트스크랩의 미디어 쿼리대부분의 반응형 웹 디자인이 그렇듯이 부트스크랩 css에서도 모바일 기기를 먼저 고려해 css를 작성합니다. 모바일 기기에서는 콘텐츠 요소를 세로로 배치하기 때문에 미리 모바일 레이아웃을 만들어놓으면 그 위에 다른 요소를 추가로 배치해 태블릿 기기나 데스크톱 기기의 레이아웃을 쉽게 만들 수 있습니다. 부트스크랩의 미디어 쿼리는 스마트폰과 태블릿, 데스크톱, 큰 데스크톱 등 네 가지 기기로 구분하며, bootstrap.css 안에 미리 포함되어 있습니다.. 더보기
반응형 웹사이트 만들기 (부트스크랩 프레임 워크 0) 부트스크랩(bootstrap)은 누구나 쉽게 웹사이트를 만들 수 있게 해주는 프레임워크로, 반응형 웹 사이트를 만들 때 필요한 HTML과 CSS를 그대로 가져다 문서를 만들 수 있고, 그 외 필요한 기능들은 자바스크립트 플러그인으로 제공하고 있습니다. 부트스크랩에 관련된 정보나 도움말은 부트스크랩 공식 홈페이지(www.getbootstrap.com)를 통해 얻을 수 있습니다. 이 사이트에는 부트스크랩의 기본 템플릿을 비롯해 자주 사용하는 형태의 웹 문서도 소개되어 있는데 이 문서들의 소스를 복사해 사용하면 순식간에 기본 문서를 만들 수 있습니다. 부트스크랩에서 제공하는 CSS는 웹 문서를 보기 좋게 꾸밀 수 있는 다양한 스타일을 제공하는데 자주 사용하는 버튼을 비롯해 여러 가지 요소에 미리 만들어놓은 클.. 더보기
반응형 웹사이트 만들기 (플랫 디자인&카드 UI - 1) 플랫 디자인 프레임 워크플랫 UI 프레임워크는 주로 포토샵 파일인 PSD 형태나 HTML 형태로 소스를 제공합니다.HTML파일과 CSS파일을 제공하는 프레임워크라면 포토샵에서 PSD 파일을 편집하지 않고도 제공하는 여러 요소(아이콘, 이미지 등)을 이용해 플랫한 사이트를 제작할 수 있습니다. 검색 엔진에서 'flat ui kit'으로 검색하면 유/무료 키트들이 많이 검색됩니다. 플랫 UI 키트는 이름부터 결과물까지 크게 다르지 않고 공개된 키트도 많습니다. 그중에서 많이 사용하는 몇가지만 소개합니다. Flat UI (무료) http://designmodo.github.io/Flat-UI/ 밝은 색상으로 구성되어 있고 버튼과 아이콘, 색상 스위치, 메뉴 항목 등 수백 개의 다양한 요소들이 포함되어 있습니다.. 더보기
반응형 웹사이트 만들기 (플랫 디자인&카드 UI - 0) 최근 몇 년 사이 가장 두드러지는 웹 디자인 경향 중 하나인 플랫 디자인(flat design)은 어느 날 갑자기 생겨난 것이 아닙니다. 과거에 유행했던 웹 디자인 기법들에서 발견한 단점을 극복하고, 새로 생겨난 환경 요인들을 받아들여서 새로운 트렌드로 떠오른 디자인 기법이죠. 플랫 디자인이란?플랫 디자인은 플랫(flat)이라는 명칭에서 느낄 수 있듯 '평평' 하고 '납작'한 디자인을 말합니다. '납작하다'는 것은 디자인에서 깊이(depth)를 제거해 입체감을 없앴다는 의미인데요. 여기에서 말한느 깊이란 그림자와 경사, 그러데이션 등 웹 요소을 입체적으로 보이기 위해 사용하는 여러 가지 추가 효과를 통틀어 말합니다. 즉, 플랫 디자인이란 웹 요소에서 입체감을 주는 효과들을 제거하고 단순하게 표현하는 기법.. 더보기
반응형 웹사이트 만들기 (기본 구성 요소 3 - 가변 이미지와 가변 동영상) 가변 이미지란?가변 이미지란 화면 너비에 따라 이미지의 너비와 높이가 바뀌는 이미지를 말합니다.이미지 같은 멀티미디어 요소들은 웹 문서에 삽입할 때 너비와 높이 값을 지정하게 되어 있고, 값을 지정하지 않을 경우 원래 크기대로 삽입됩니다. 이때 화면 너빗값에 따라 이미지의 너비가 조절되도록 하기 위해 CSS를 이용해 이미지 너빗값을 100%로 지정하는데, 원래 크기 이상으로 늘리게 되면 화질이 깨집니다. 따라서 max-width 속성을 사용해 최대 너빗값 이상으로는 확대되지 않도록 하는것이 가장 기본적인 가변 이미지 지정 방법입니다. img { max-width: 100%;} 다음 소스는 너비가 400px인 이미지를 웹 문서에 삽입한 예제입니다. .pic1 스타일에는 width:100%; 규칙을 지정하고.. 더보기
반응형 웹사이트 만들기 (기본 구성 요소 2 - 미디어 쿼리) 미디어 쿼리란?미디어 쿼리(Media Queries)는 css3 모듈 중 하나로, 사이트에 접속하는 기기별로 적용할 css 파일을 다르게 지정해 주는 기술입니다. 예를 들어, 데스크톱일 경우에는 pc.css를 적용 하고, 스마트폰일 경우에는 phone.css를 적용하도록 해서 각 기기마다 서로 다른 레이아웃을 표시할 수 있습니다. 특히, 미디어 쿼리는 다른 반응형 웹 기술과 달리 자바스크립트 라이브러리를 추가하면 인터넷 익스플로러 8 이하 버전을 비롯한 여러 브라우저에서 사용할 수 있다는 장점이 있습니다. 국립현대미술관(http://www.mmca.go.kr/) 즉, 모바일용 사이트를 따로 제작하지 않고도 하나의 사이트로 모든 기기에 대응할 수 있는 것입니다. 이 사이트에서 사용한 미디어 쿼리를 보겠습니.. 더보기
반응형 웹사이트 만들기 (기본 구성 요소 1 - 가변 그리드) 고정 그리드와 가변 그리드의 차이 '그리드(Grid)'란 '격자', '바둑판' 이라고 할 수 있는데요. 화면을 바둑판처럼 여러 개의 기본 요소로 나눈 후 몇 개씩 합쳐 내용을 배치하는 것을 그리드 시스템이라고 합니다. 이때 화면을 나누는 기본 요소를 칼럼(Column)이라고 부릅니다. 그리드 시스템에서는 화면 너비를 몇 px로 하는가에 따라 '960 그리드 시스템'이나 '1200 그리드 시스템'으로 나누기도 하고, 화면을 몇 개의 칼럼으로 나누는가에 따라 '12 칼럼 그리드', '16 칼럼 그리드'로 나누기도 합니다. 보통 960px의 12 칼럼 그리드를 사용합니다. 앞에서 설명했듯이 그리드 시스템은 화면 너비를 고정해 놓고 그 너비 안에서 칼럼을 12개나 16개로 나누어 요소들을 배치하는 방법입니다. .. 더보기
반응형 웹사이트 만들기 (반응형 웹 이란? - 0) 반응형 웹사이트란 말 그대로 PC, TV, 네비게이션, 스마트 기기 등 다양한 기기에 반응하는 웹 사이트로, 사용자가 접속하는 기기 또는 환경에 맞춰 화면의 크기가 자동으로 조절되어 최적환된 화면 레이아웃을 보여주는 사이트입니다. (http://www.palantir.net) 이렇게 반응형 웹을 이용하면 사용자가 웹사이트 내용을 제대로 보기 위해 스크롤 막대를 옮기거나 화면을 확대하는 수고를 최대한 줄일 수 있고, 그만큼 사용자에게 편리한 웹사이트를 제공할 수 있습니다. 반응형 웹의 장점1. 기기의 화면 크기나 해상도에 구애받지 않습니다. - 반응형 웹 기술을 이용하면 데스크톱 PC나 스마트폰뿐 아니라 스마트 TV, 게임 콘솔 등 웹 브라우저가 포함된 기기라면 어떤 기기에서나 화면 크기와 해상도에 상관없.. 더보기

티스토리툴바