본문 바로가기

웹디자이너

(35)
[개발자 도구] 설정값 보기 안녕하세요. 플입니다. 개발자 도구에서 설정값을 편하게 확인해볼게요. 1. 개발자 도구 열기 개발자 도구란 이렇게 생긴 창을 말해요. F12를 누르거나 오른쪽 클릭 > 검사를 누르면 열 수 있어요. 2. 설정 확인할 요소 클릭 특정 요소의 설정을 확인할 거니까 왼쪽 상단에 있는 화살표 모양 아이콘을 클릭해주세요. 그리고 원하는 부분에 마우스를 올리면 이렇게 블럭처리가 됩니다. 원하는 부분이 맞다면 클릭해주세요. 클릭하면 개발자 도구에서 어떤 부분인지 표시가 됩니다. 간단하죠? 3. 설정값 확인 설정값을 편하게 확인하려면 옆쪽으로 가서 computed라는 메뉴를 선택해주세요. 이렇게 설정된 css값을 정리된 형태로 확인할 수 있어요. 만약 내가 설정하지 않은 값이 나와있어요!!! 하시는 분들은 기본 값이 ..
[아임웹] 글 변경하기 안녕하세요. 플입니다. 오늘은 아임웹에서 글을 변경해보겠습니다. 1. 디자인 모드 내사이트 > 관리 버튼을 클릭해 관리 페이지를 열어줍니다. 관리 페이지의 왼쪽 메뉴 중 디자인 모드 메뉴를 클릭해 디자인모드 페이지를 열어줍니다. 2. 글 변경 변경하고 싶은 글에 마우스를 올리면 블록처리가 되면서 파란색 배경이 들어간 모습으로 보입니다. 그 상태로 글을 더블클릭하면 글 내용을 수정할 수 있습니다. 이제 원하는 문구로 글을 수정하면 완성! 그럼 이만. 총총.
[아임웹] 제공 이미지 사용하기 안녕하세요. 플입니다. 오늘은 아임웹에서 제공하는 이미지를 이용해 이미지 변경을 해보겠습니다. 1. 디자인 모드 내사이트 > 관리 를 순서대로 클릭해 관리 페이지를 열어줍니다. 관리 페이지에서 왼쪽 메뉴를 보면 디자인 모드라는 메뉴가 있습니다. 디자인 모드를 선택해 디자인을 변경해봅시다. 2. 이미지 설정 디자인 모드로 넘어왔다면 변경하고 싶은 이미지에서 마우스 오른쪽 클릭을 해줍니다. 오른쪽 클릭을 하면 나오는 메뉴 중 가장 위에 있는 이미지 설정을 선택합니다. 이미지 설정에 들어가면 이미지 미리 보기 화면과 세세한 설정이 가능합니다. 미리보기 화면에 마우스를 올리면 메뉴가 뜨는데 가장 마지막에 무료 이미지라는 메뉴를 선택합니다. 3. 이미지 선택 아임웹에서 제공하는 이미지가 카테고리 별로 정리가 되어..
[포토샵] 자 단위 바꾸기 안녕하세요. 플입니다. 포토샵에서 단위를 변경해보겠습니다. 1. 자 열기 포토샵의 자는 이렇게 화면의 위와 왼쪽에서 확인할 수 있습니다. 처음에는 자가 활성화되지 않은 상태입니다. 상단 메뉴에서 보기> 눈금자 메뉴를 선택하면 자를 활성화 할 수 있습니다. 단축키는 Ctrl + R 입니다. 2. 단위 변경 포토샵에서 사용하는 단위의 종류는 여러 가지가 있습니다. 그중에서 작업에 맞는 단위를 사용해야 자의 효과를 더 잘 활용할 수 있겠죠. 자 부분에서 오른쪽 클릭을 하면 사용 가능한 단위 목록이 나오고 원하는 단위를 고르면 변경 가능합니다. 저는 주로 픽셀과 밀리미터를 사용합니다. 혹시 오른쪽 클릭이 잘 안된다면 자의 교차점에서 오른쪽 클릭을 해보시기 바랍니다. 버전에 따라서 다른 것 같네요. 3. 확인 위..
[아임웹] 사이트 이름 바꾸기 안녕하세요. 플입니다. 오늘은 아임웹에서 만든 사이트의 이름을 변경해보겠습니다. 1. 관리 아임웹에 로그인 후에 오른쪽 상단 내사이트 버튼을 클릭합니다. 관리하고 있는 사이트 목록이 쭉 나오는데 그중 수정이 필요한 사이트의 관리 버튼을 선택합니다. 2. 기본 설정 관리 페이지로 넘어오면 왼쪽에 있는 메뉴에서 환경설정 > 기본 설정 메뉴를 선택합니다. 기본 설정 페이지 맨 상단에 사이트 이름을 원하는 이름으로 변경하면 됩니다. 원하는 이름을 적었다면 우측 상단의 저장 버튼을 누르면 완료입니다. 간편하게 이름을 변경해봤습니다. 그럼 이만. 총총.
[아임웹] 이미지 바꾸기 안녕하세요. 플입니다. 아임웹에서 이미지를 변경해보겠습니다. 1. 관리 (잘 안 보여서 왼쪽을 일부 잘랐습니다.) 오른쪽 상단에서 내 사이트 메뉴를 클릭하면 내 사이트 목록이 뜨고 관리가 가능합니다. 수정할 사이트의 관리 버튼을 누릅니다. 디자인 수정은 왼쪽 메뉴에서 디자인 모드를 선택합니다. 디자인 모드에서 수정이 가능합니다. 2. 이미지 변경 디자인 모드에서는 각자 골랐던 템플릿이 설정되어 있을 겁니다. 변경하고 싶은 이미지에서 오른쪽 클릭을 한 뒤 설정에 들어갑니다. 수정하려는 부분이 비주얼이라 비주얼 설정이라고 적혀있는데 다른 이미지는 이미지 설정이라고 적혀있습니다. 설정 창이 뜨면 이미지 업로드 버튼을 선택합니다. 폴더에서 원하는 이미지를 선택하면 이미지가 뙇! 변경됩니다. 이미지의 위치도 간략..
[꿀정보] 벤치마킹 사이트 굿디자인웹 안녕하세요. 플입니다. 오늘은 벤치마킹 사이트를 추천드리려고 합니다. 1. 굿디자인웹 http://gdweb.co.kr/ 굿디자인웹 국내 최우수 이미지, 웹사이트. 굿디자인웹 gdweb.co.kr 벤치마킹할 때 주로 찾는 사이트입니다. 굿디자인웹이죠. 업데이트도 빠른 편이고 심사를 거쳐서 올라오는 홈페이지들이다 보니 도움이 많이 됩니다. 유행하는 디자인이나 구조도 생각해볼 수 있습니다. 2. 카테고리 위의 이미지처럼 디자인 타입에 따라서 분류를 나눠 찾아볼 수도 있습니다. 원하는 디자인 느낌을 찾기 편하죠. 모바일이나 해외사이트도 볼 수 있어서 좋습니다. 저는 특히 해외사이트를 볼 수 있다는 점을 좋아합니다. 이렇게 카테고리도 나눠져 있어서 찾아볼 때 유용하죠. 특별한 디자인을 하고 싶다고 생각할 때 해..
[반응형] 포트폴리오 사이트 안녕하세요. 플입니다. 포트폴리오 사이트 리뉴얼을 완성했습니다 1. 디자인 전체 디자인이에요. 반응형 홈페이지라 pc버전, 태블릿 버전, 모바일 버전, 세 가지 모두 있답니다. 이번엔 노랑과 청록을 주요 컬러로 해서 디자인을 진행해봤어요. 네모 모양을 사용해 깔끔한 느낌을 주도록 노력했습니다. 포트폴리오 취지에 맞게 가장 잘 보이는 것은 작업물이도록 신경 썼어요. 2. 주소 http://ssimplay.com/ ssimplay ssimplay.com 도메인 주소는 이전과 동일하답니다. 직접 방문하여 여러 기능들과 포트폴리오를 구경해주세요~ 3. 포트폴리오 페이지 마지막으로 포트폴리오 페이지의 이미지를 올려보고 마무리하겠습니다. 그럼 이만. 총총.
[꿀정보] 목업사이트 프리픽(freepik) 안녕하세요. 플입니다. 오늘은 목업 사이트 하나를 추천드릴게요 1. freepik https://www.freepik.com/ Freepik | Download now millions of free vectors, photos and PSD files Discover millions of copyright-free vectors, photos and PSD files. Graphic resources for personal and commercial use. Thousands of new files uploaded daily. www.freepik.com 프리픽은 사실 목업만 있는 사이트는 아니고 여러 가지 디자인 자료들을 다운로드하여서 사용할 수 있는 사이트입니다. 2. 검색 방법 먼저 찾고자 하는 것..
[html] 태블릿 사이즈 설정하기 안녕하세요. 플입니다. 오늘은 html에서 태블릿 사이즈를 설정해보겠습니다. 1. css 불러오기 우선 태블릿 사이즈를 코딩해준 css를 불러옵니다. 일반 css를 불러오는 것과 동일하게 link를 이용해 불러옵니다. rel값은 stylesheet를 입력해주세요. type은 text/css입니다. href는 폴더 경로를 입력해주세요. 저는 css폴더 안에 있어서 css/파일명입니다. 2. media css를 불러온 link 안에 media를 입력해주세요. 값은 only all and (max-width:1297px)을 입력해줍니다. 여기서 max-width값은 브라우저를 줄여보면서 설정해주세요. max-width값이 설정된 기준 아래에서 불러온 css가 적용됩니다. 3. 확인 F12 혹은 오른쪽 클릭 후..