포폴만들기 4
[반응형] 포트폴리오 사이트
안녕하세요. 플입니다. 포트폴리오 사이트 리뉴얼을 완성했습니다 1. 디자인 전체 디자인이에요. 반응형 홈페이지라 pc버전, 태블릿 버전, 모바일 버전, 세 가지 모두 있답니다. 이번엔 노랑과 청록을 주요 컬러로 해서 디자인을 진행해봤어요. 네모 모양을 사용해 깔끔한 느낌을 주도록 노력했습니다. 포트폴리오 취지에 맞게 가장 잘 보이는 것은 작업물이도록 신경 썼어요. 2. 주소 http://ssimplay.com/ ssimplay ssimplay.com 도메인 주소는 이전과 동일하답니다. 직접 방문하여 여러 기능들과 포트폴리오를 구경해주세요~ 3. 포트폴리오 페이지 마지막으로 포트폴리오 페이지의 이미지를 올려보고 마무리하겠습니다. 그럼 이만. 총총.
[css] tr태그 여백 주기
안녕하세요. 플입니다. 오늘은 태그에 여백을 줘보겠습니다. 1. 칸 간격 주기 table{ border-collapse: separate; } 확인을 위해 테두리 색을 임시로 넣어주었습니다. border-collapse를 이용해 칸마다 간격을 줍니다. 값은 separate를 넣어줍니다. sepatate는 '분리된, 따로 떨어진'이라는 뜻으로 칸이 따로따로 분리되어 보입니다 table{ border-collapse: collapse; } 다른 값인 collapse와 비교해보면 어떻게 다른지 확실히 와 닿으시죠? 2. 여백 주기 table{ border-spacing: 0 40px; } 칸마다 간격을 주었으면 테두리에 여백을 줍니다. border-spacing을 이용합니다. 값은 위아래로 여백을 주고 싶으면..
[포토샵] 카테고리 버튼 만들기
안녕하세요. 플입니다. 오늘은 카테고리 버튼을 만들어보겠습니다. 1. 배경 도형 만들기 먼저 도형 툴을 이용해 배경을 만들어줍니다. 저는 배경으로 사용할 도형을 사각형으로 만들 것입니다. 각자 원하는 모양으로 만들어주세요. 아무 곳이나 클릭하면 이렇게 수치를 입력할 수 있습니다. 직접 드래그해서 사이즈를 정해도 상관없지만 수치를 입력하는 게 정확한 사이즈로 나와서 편합니다. 확인 버튼을 누르면 이렇게 수치에 맞는 사각형 도형이 나옵니다. 2. 위치 잡아주기 만들어둔 그리드를 열어서 그리드에 맞춰 위치를 수정해줍니다. 이미지를 보면서 다른 요소들과 간격을 잡아줍니다. https://blog.naver.com/ssimplay/221605456174 [Assistor PS] 그리드 만들기 안녕하세요. 플입니다..
[반응형] 포트폴리오 사이트
안녕하세요. 플입니다. 오늘은 완성된 포폴 사이트 메인 시안을 가져와봤습니다. 로고는 무료로 제작할 수 있는 사이트에서 제작했고, 컬러는 로고 컬러에 맞춰 진한 청록색과 노란색으로 포인트를 주었습니다. 전체적으로 사각형 모양을 주로 사용했고, 플랫 한 느낌을 주기 위해 노력했습니다. 노란색 배경으로 흰 배경일 때보다 경쾌한 느낌을 주려고 했습니다. 메인에서는 포트폴리오로 보일 작업물을 가장 큰 비중으로 넣어 집중시켰습니다. 사이트 이름과 제작 날짜를 적어 신뢰감을 높이는 효과를 기대해봤습니다. 바로가기 아이콘 역시 사각형 모양을 사용하였고 플랫 한 느낌을 주려고 노력했습니다. 마지막으로 시안 이미지를 남기고 마무리하겠습니다. 그럼 이만. 총총.