본문 바로가기

포트폴리오

(21)
[반응형] 물감방울 랜딩페이지 안녕하세요. 플입니다. 물감 방울 랜딩페이지가 완성되었어요. 1. 디자인 제작 중이던 물감 방울의 랜딩페이지 작업이 완료되었어요. 단일 페이지로 긴 세로 형태의 사이트입니다. 메뉴를 누르면 스크롤이 해당 위치로 이동하는 사이트예요. 그림이 잘 보이도록 연한 색을 컬러 포인트로 사용했어요. 배경에 연한 노랑을 주로 사용한 이유예요. 2. 사이트 보러 가기 https://ssimplay.github.io/shinedrop/ shine drop 우당탕탕 좌충우돌 신나는 일상이야기. 톡 떨어진 물감에서 태어난 시트렛은 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가보는 곳 없이 기웃거리며 미끄러�� ssimplay.github.io 클릭하시면 완성된 사이트를 구경하실 수 있어요!..
[달성표] 66일 달성표 안녕하세요. 플입니다. 오늘은 66일 달성표를 만들어봤어요. 1. 66일 달성표 66일간 반복하면 습관을 만들 수 있다는 이야기 아시나요? 신기하지 않나요 사람은 66일 동안 반복하면 습관을 만들 수 있는 시스템으로 만들어져 있다는 게 100일도 아니고 66일! (100일은 쑥과 마늘이다) 숫자도 한 달! 1년! 1주일! 같이 딱 떨어지지 않고 66으로 애매한 게 참 마음에 들어요. 딱 떨어지는 숫자면 어쩐지 해내야 한다는 강박관념이 드는데 이렇게 애매한 숫자면 나도 모르게 어느샌가 어? 하고 돼버리는 경우가 많거든요. 그렇게 인생에 스며들어 습관이 되는 건가 봐요. 좋은 습관 만들기 해보고 싶은 분들은 이미지를 다운받아서 활용해보세요~ 이런 것도 스티커를 붙여가며 마지막까지 달려가야 재미있는 법 아니겠..
[시안] 랜딩페이지 [물감툰] 안녕하세요. 플입니다. 오늘의 시안은 물감툰 랜딩페이지예요 1. 물감툰 이번 작업은 랜딩페이지로 원페이지 작업을 해서 시안도 길게 만들어봤어요. 각 메뉴당 아래로 내려가는 형식이에요. 사이트는 연한 노란색을 포인트 컬러로 작업했어요. 캐릭터가 잘 보여야 하는 사이트라 연한 색을 골랐어요. 목업은 사이트가 연한 색이니까 진한 배경을 사용해 사이트가 잘 보이게 만들어봤어요. 요즘 디자인하면서 고려하는 건 잘 보이는 것이에요. 뭔가 이렇게 뽝! 하고 잘 보였으면 좋겠다! 하는 느낌으로 작업하고 있습니다(뭐야 그게) 물감툰이라는 이름을 변경할지 말지 고민하고 있어요. 바뀌면 올라올 사이트에서 이름이 바뀔 거 같네요. 랜딩페이지 작업 문의는 메일로 부탁드려요~ ssimplay@naver.com 더 많은 포트폴리오..
[로고] 물감툰 안녕하세요. 플입니다. 물감툰 로고를 만들어봤어요. 1. 물감툰 물감툰 로고를 만들어봤어요. 현재 사이트 작업 중이라 만들어봤는데 로고만도 따로 가져와봤답니다. 연재했던 물감툰 중 일부를 가져와 로고로 사용해봤어요. 세 번째 목업은 도무송 스티커 같은 느낌을 주려고 했는데 왠지 어색하네요. 다음엔 좀 더 좋은 목업을 가져와볼게요. 다른 포트폴리오가 궁금하시다면 아래 링크를 참고해주세요~ http://ssimplay.com/ ssimplay ssimplay.com https://www.instagram.com/ssim_play/ 로그인 • Instagram www.instagram.com 문의는 이메일로 부탁드립니다. ssimplay@naver.com 그럼 이만. 총총.
[css] 레이어 설정 안녕하세요. 플입니다. css에서 위치 순서를 정해보겠습니다. 1. z-index ul{ z-index:10; } 이미지처럼 두 개 이상의 요소가 겹쳤을 때 순서를 정해주는 코드가 z-index입니다. 포토샵을 사용하신다면 포토샵의 레이어와 같은 원리라고 이해하시면 됩니다. z-index의 숫자가 클수록 위쪽으로 올라옵니다. 2. 범위 ul{ z-index:-10; } z-index의 범위는 정수로 -(마이너스)까지 포함합니다. 수를 -10으로 줬을 때 뒤쪽으로 보내져 보이지 않게 된 것을 알 수 있습니다. 자리를 표시하는 부분이 살짝 보이지만 요소는 보이지 않죠. 2020년 새해 복 많이 받으세요~! 그럼 이만. 총총.
[반응형] 포트폴리오 사이트 안녕하세요. 플입니다. 포트폴리오 사이트 리뉴얼을 완성했습니다 1. 디자인 전체 디자인이에요. 반응형 홈페이지라 pc버전, 태블릿 버전, 모바일 버전, 세 가지 모두 있답니다. 이번엔 노랑과 청록을 주요 컬러로 해서 디자인을 진행해봤어요. 네모 모양을 사용해 깔끔한 느낌을 주도록 노력했습니다. 포트폴리오 취지에 맞게 가장 잘 보이는 것은 작업물이도록 신경 썼어요. 2. 주소 http://ssimplay.com/ ssimplay ssimplay.com 도메인 주소는 이전과 동일하답니다. 직접 방문하여 여러 기능들과 포트폴리오를 구경해주세요~ 3. 포트폴리오 페이지 마지막으로 포트폴리오 페이지의 이미지를 올려보고 마무리하겠습니다. 그럼 이만. 총총.
[html] <colgroup>을 이용해 테이블 비율 고정 하기 안녕하세요. 플입니다. 오늘은 테이블 칸의 비율을 고정해보겠습니다. 1. 기본 우선 비율을 고정하지 않았을 때 모습입니다. 비율을 정해두지 않는다고 테이블 태그가 큰 문제가 있는 것은 아니지만 나중에 내용이 길어질 때마다 비율이 틀어지는 것을 방지할 수 있습니다. 2. colgroup 을 이용해 칸의 비율을 정해줍니다. 은 태그 안쪽에 태그 시작 전에 넣어줍니다. 다른 태그처럼 태그를 넣어준 뒤 안쪽에 을 이용해 칸의 비율을 정해줍니다. 을 칸 개수만큼 만들어 준 뒤 입력값을 width:10%처럼 가로 비율을 정해주면 됩니다. 다 합쳐서 100이 되는 게 계산하기 좋기는 하지만, 상황에 따라 조금씩 조절해주셔도 됩니다. 그럼 이만. 총총.
[css] tr태그 여백 주기 안녕하세요. 플입니다. 오늘은 태그에 여백을 줘보겠습니다. 1. 칸 간격 주기 table{ border-collapse: separate; } 확인을 위해 테두리 색을 임시로 넣어주었습니다. border-collapse를 이용해 칸마다 간격을 줍니다. 값은 separate를 넣어줍니다. sepatate는 '분리된, 따로 떨어진'이라는 뜻으로 칸이 따로따로 분리되어 보입니다 table{ border-collapse: collapse; } 다른 값인 collapse와 비교해보면 어떻게 다른지 확실히 와 닿으시죠? 2. 여백 주기 table{ border-spacing: 0 40px; } 칸마다 간격을 주었으면 테두리에 여백을 줍니다. border-spacing을 이용합니다. 값은 위아래로 여백을 주고 싶으면..