웹디자이너 35
[반응형] 포트폴리오 사이트
안녕하세요. 플입니다. 오늘은 포트폴리오 사이트 서브 시안을 소개해보겠습니다. 1. 첫 번째 서브 페이지 About 첫 번째 페이지는 두 단락으로 나눠 경력과 기술 능력을 한 페이지에 보여줬습니다. 배경색을 다르게 해 단락을 확실하게 구분했습니다. 2. 두 번째 서브 페이지 Portfolio 두 번째 페이지 시안은 메뉴를 수정하기 전에 저장해서 첫 번째 페이지가 강조되어있지만 넘어가겠습니다. 두 번째 서브 페이지는 작업물을 보여주는 페이지로 이 사이트에서 가장 중요한 페이지입니다. 메인과 동일한 섬네일을 사용하였고 메인에서 더보기를 누르면 넘어오는 페이지입니다. 서브 페이지에서 더보기를 누르면 더 많은 작업물을 볼 수 있습니다. 그리고 메인과 다르게 카테고리를 추가해 카테고리별로 살펴볼 수 있게 만들었습..
[반응형] 포트폴리오 사이트 메인
안녕하세요. 플입니다. 오늘은 포폴 사이트 시안을 가져왔습니다. 저번 시안에서 비주얼 부분을 수정해서 새로 가져와봤습니다. 바뀐 시안의 모습입니다. 비주얼 부분을 목업으로 처리하여 좀 더 전문성 있고 작업 물들을 알기 쉽게 표현해봤습니다. 시안은 완성되면 인스타그램에도 올리고 있으니 인스타그램도 들려주세요~ https://www.instagram.com/p/B2jbwqAAMoP/?utm_source=ig_web_copy_link 인스타그램 주소를 남겨두고 갑니다. 마지막으로 시안 이미지를 올리고 가보겠습니다. 그럼 이만. 총총.
[wix] 요소 위치 고정 하기
안녕하세요. 플입니다. 오늘은 윅스에서 요소의 위치를 고정해보겠습니다. 위치 고정은 스크롤을 내려도 그 요소가 계속 화면의 같은 자리에 위치하게 됩니다. 코딩으로는 position:fixed;와 같은 효과를 줍니다. 주로 로고, 메뉴 등에 사용하거나 연락처 등을 계속 보이게 하고 싶을 때 사용합니다. 1. 오른쪽 클릭 위치 고정은 간편하게 할 수 있습니다. 고정하고자 하는 요소에서 오른쪽 클릭을 하면 아래쪽에 위치 고정이라는 항목이 바로 보입니다. 위치 고정을 클릭해줍니다. 2. 위치 설정 위치 고정을 클릭하면 바로 설정창이 뜹니다. 위치를 설정할 수 있는데 마우스를 올리면 어디쯤 위치할지 미리 보기로 보여줍니다. 이미지는 이미 위치한 곳에는 미리보기 영역이 뜨지 않아서 오른쪽 위를 마우스 오버해본 것이..
[반응형] 포트폴리오 사이트
안녕하세요. 플입니다. 오늘은 완성된 포폴 사이트 메인 시안을 가져와봤습니다. 로고는 무료로 제작할 수 있는 사이트에서 제작했고, 컬러는 로고 컬러에 맞춰 진한 청록색과 노란색으로 포인트를 주었습니다. 전체적으로 사각형 모양을 주로 사용했고, 플랫 한 느낌을 주기 위해 노력했습니다. 노란색 배경으로 흰 배경일 때보다 경쾌한 느낌을 주려고 했습니다. 메인에서는 포트폴리오로 보일 작업물을 가장 큰 비중으로 넣어 집중시켰습니다. 사이트 이름과 제작 날짜를 적어 신뢰감을 높이는 효과를 기대해봤습니다. 바로가기 아이콘 역시 사각형 모양을 사용하였고 플랫 한 느낌을 주려고 노력했습니다. 마지막으로 시안 이미지를 남기고 마무리하겠습니다. 그럼 이만. 총총.
[포토샵] 시안 썸네일 만들기
안녕하세요. 플입니다. 오늘은 시안 썸네일을 만들어보겠습니다. 사실 이걸 시안 썸네일이라고 하는지는 모르겠는데 지칭하는 말을 모르겠네요. 아시는 분은 댓글로 알려주세요. 1. 정사각형 캔버스 만들기 정사각형으로 캔버스를 만들어줍니다. 왜 정사각형이냐면 저는 이 이미지를 인스타그램에도 올리기 때문인데요. 그렇지 않다면 굳이 정사각형이 아니어도 괜찮습니다. 2. 이미지 불러오기 완성된 시안 이미지를 불러옵니다. 이미지는 캔버스의 정 중앙에 둡니다. 3. 배경 넣기 시안에 맞춰 배경을 넣어줍니다. 저는 메인 컬러인 청록색을 위쪽에 서브 컬러인 노란색을 아래쪽에 넣어주었습니다. 메인의 비율이 절반보다 조금 많게 해 주었습니다. 4. 효과 주기 배경과 분리를 위해 테두리를 넣어줍니다. 레이어 스타일로 효과를 주었..