본문 바로가기
반응형

Design

 (98)
css 반응형 em,rem,vw,vh,calc로 코드 작성하는 법 기본적으로 아무것도 세팅하지 않았을 때 브라우저는 100%비율 기준 font-size를 16px으로 보여주게 되는데,  이를 반응형이면서 정수로 떨어지기 위해 편한 계산방법으로 설정하기 위해 세팅하는 방법이다. 폰트로만 사용하는게 아니라 마진,패딩 다 사용가능하다. 1. html font 사이즈는 기본으로 16px 이다.대부분 폰트사이즈는 아무것도 설정하지 않았을 시에 html에 100%로 맞추어져 있다. 이렇게 그냥 기본사이즈에 코드를 만들어나가면 화면에 16px로 나온다. 이는 곧 1em이라고 정의할 수 있다. (px은 해상도 설정을 위해 수치상으로 기록하는 것 뿐 명확한 명칭은 em이 맞다)기본으로 설정된 값 font-size:100%; = 1em; = 16px; 똑같은 말이다. p도 16px로 출..
홈페이지 제작의 기초 홈페이지를 제작하기 위한 기초적인 내용을 담았습니다. 비전공자가 전공자가 되기 위해 배워야 하는 이론적 내용들을 웹디자이너 관점으로 이해하기 쉽게 풀어낸 포스팅들로 홈페이지를 만들어야 하는 때와 검색등록에 관련한 포스팅입니다. 1. 홈페이지의 유형홈페이지는 소비자에게 알리기 위한 용도로 사용되며 성격에 따른 레이아웃과 구성을 각기 달리해야 합니다. 그에 따른 분류에 대한 포스팅입니다. 다양한 홈페이지의 제작 유형을 크게 3종류로 분류한다면?다양하게 제작된 홈페이지들의 유형을 대분류로 나누어 쉽게 기록하고 짚어가도록 하겠습니다. 홈페이지는 인터넷을 토대로 온라인상에서 다양한 소비자 및 고객과 소통하는 창구로서, 정말blue-seal.tistory.com  2. 홈페이지를 구성하기위한 조건홈페이지를 보여주기..
JS유틸 모음 CSS로 웹페이지와 홈페이지에 대한 디자인을 만족시킨 후 움직이는 다양한 스크립트 소스로 화려한 동작을 부여하는 단계로 만들어진 웹페이지에 임팩트를 줄 수 있습니다. 또한 JS로 제작할 수 있는 기능적인 부분은 개발자에게 부탁하지 않고도 퍼블리싱 쪽에서 간단하게 처리될 수 있는 부분 또한 있어서 다양한 유틸리티를 숙지하고 있는 것도 중요합니다.(즐겨찾기) ■ MOBISCROLL : 별도의 개발 없이 달력을 지원하는 기능달력의 기능조차도 사실은 개발자가 만들어야 하는 기술 중에 하나입니다. (동작으로 작동해야 하기 때문에 퍼블리싱도 한계가 있을 수 있습니다) 그 작업을 유틸리티로 적용해 사용할 수 있는 기능이며, 달력뿐만이 아닌 다양한 유틸리티를 지원합니다. 무, 유료의 사용에 따라 지원하는 범위도 다르고..
CSS 핵심 명령어 및 유틸리티 모음 홈페이지의 뼈대로 불리는 html로 골격을 만든 후에는 아름답고 이쁘게 만드는 미적 작업을 진행해야 하는데 그 작업은 모두 css공간에서 이루어집니다. css의 정의부터 간단하게 움직이는 애니메이션까지 다양한 강의 포스팅을 담았습니다.CSS소개와 사용방법-css란 무엇인가? / css 사용방법홈페이지와 웹의 컨텐츠를 이쁘게 꾸미는 CSS에 대해 알아봅니다.홈페이지 컬러 값 조절하기- RGBA / 16진수 hex값웹상에서 사용하는 대표적 컬러 RGBA의 뜻과 16진수의 사용방법을 알아봅니다.홈페이지 배경이미지 제어하기- background웹상에서 배경 효과를 제어하는 다양한 방법을 알아봅니다.홈페이지 선을 제어하는 방법- border (width,style,color)선을 둥글게 만들거나 두껍게 하거나 아..
HTML 핵심 명령어 및 유틸리티 모음 우리가 PC, 모바일 화면에서 자주 만날 수 있는 다양한 홈페이지를 만들기 위한 첫 번째 과정으로 웹 환경 제작에 있어 뼈대가 되는 HTML코드에 대한 강의 목록을 담고 있습니다. 미적으로 훌륭하게 만드는 작업 전에 초기환경을 세팅하는 내용이 주로 담겼으며 정보 저장과 필수적인 유틸리티에 대한 연결을 시작으로 코드를 사용하는 기초적인 방법부터 반응형 홈페이지를 만들기 위해 (하나의 홈페이지 제작으로 여러 해상도에서 보일 때) 대응해야 하는 레이아웃의 방법까지를 담았습니다.DOCTYPE, META TAG(홈페이지 정보 담기)홈페이지 제작 을 위해서는 홈페이지의 정보를 담고있는 DOCTYPE(독타입)과 홈페이지의 성격을 담고있는 META TAG(메타태그)를 선언해 주는것 으로 제작이 시작됩니다.LINK sc..
포토샵 사진 컬러 쉽게 보정하는 3가지 방법 포토샵에서 사진이나 그림등을 보정하는 간단한 방법 3가지를 소개해 드립니다. 단축키까지 큼지막하게 표기해 놓았으니 보시고서 맞는 효과를 찾아 적용하시면 됩니다. 대부분의 기능들은 레이어를 기반으로 하고 있으니 효과들을 적용하기 전에 복사본을 만들어놓고 이용하시면 좋아요. 레이어를 겹치는 효과 주기레이어에는 두 가지 레이어를 겹쳐서 효과를 내는 기능이 있습니다. 위의 레이어 자체의 캔버스 스타일을 투명한 셀로판지처럼 만들어서 아래의 레이어에 특수한 효과를 냄으로서 좀 더 독특한 분위기를 연출할 수 있습니다. 같은 이미지를 복사해 레이어효과를 준다면 독특한 컬러효과를, 다른 이미지를 겹쳐서 레이어 효과를 준다면 색다른 분위기를 연출할 수 있습니다.레이어 위에 위치한 다양한 효과를 이용해 아래에 영향을 받는 ..
포토샵으로 사진 자연스럽게 보정하기 앞서 설명한 포스팅 포토샵서 설명한 '포토샵 캔버스 조절 및 이동,선택하고 가져오기' 를 먼저 참고 후 아래 내용을 보시면 작업이 더 수월해 질 수 있으니 참고해 주세요!  영역을 사용해 자연스럽게 보정하기 (포토샵 힐링 툴)자연스럽게 이미지를 보정하는 데에는 마치 밴드와 같은 모양의 아이콘을 사용해 보정합니다. 이 툴을 사용할 때에는 위 방식을 통해 영역을 선택한 후 보정을 시작합니다. 대부분의 힐링툴은 지우고 싶은 공간이 어느 정도 배경이 비어있어야 그 비어있는 배경을 복사해 자동으로 보정해 줍니다. 감쪽같이 오브젝트가 자연스럽게 없어집니다.   영역을 사용하지 않고 있는 곳을 보정하기 (도장 툴)브러시는 경계가 단일로 지정된 선명한 원버전과 흐릿한 버전으로 지정된 부드러운 타입 두 가지로 나뉘어 있..
포토샵 캔버스 조절 및 이동,선택하고 가져오기 포토샵 레이어란??레이어는 겹겹이 쌓은 모습을 일컫는 형태 또는 기능을 이야기합니다. 마치 햄버거를 연상시키는 이 모습은 여러 레이어가 복합적으로 어우러져 효과를 사용할 수도 있고, 여러 오브젝트를 모아서 단계별로 층층이 쌓은 모습을 만들 수도 있습니다.   포토샵 이동하기 기능 (단축키: v)이동(단축키 v) 툴은 포토샵의 기본입니다. 그래서 제일 처음에 있기도 합니다. 선택한 이미지를 잘라내서 옮기기도 하고 오브젝트를 움직이는 요소입니다. 세부메뉴를 제어하는 자동선택을 체크할 경우 마우스 클릭만으로도 레이어를 선택하기도 합니다.   캔버스 크기만 늘리기 (Ctrl+Alt+C) = 이미지 줄어들지 않음작업할 때 영역이 부족하거나 넓을 때 캔버스 (작업영역)를 조절해야 하는 경우가 생기는데 이땐 캔버스의..
반응형

티스토리툴바