씸플레이 35
[css] tr태그 여백 주기
안녕하세요. 플입니다. 오늘은 태그에 여백을 줘보겠습니다. 1. 칸 간격 주기 table{ border-collapse: separate; } 확인을 위해 테두리 색을 임시로 넣어주었습니다. border-collapse를 이용해 칸마다 간격을 줍니다. 값은 separate를 넣어줍니다. sepatate는 '분리된, 따로 떨어진'이라는 뜻으로 칸이 따로따로 분리되어 보입니다 table{ border-collapse: collapse; } 다른 값인 collapse와 비교해보면 어떻게 다른지 확실히 와 닿으시죠? 2. 여백 주기 table{ border-spacing: 0 40px; } 칸마다 간격을 주었으면 테두리에 여백을 줍니다. border-spacing을 이용합니다. 값은 위아래로 여백을 주고 싶으면..
[Node.js] cmd로 실행하기
안녕하세요. 플입니다. 오늘은 Node.js를 실행해보겠습니다. 1. cmd 열기 실행창을 열어 cmd를 열어줍니다. 단축키는 window + R입니다. 2. 폴더 이동하기 기본 폴더가 C로 설정되어 있으니 D폴더로 이동해줘야 합니다. d:를 입력해 폴더를 이동해줍니다. d폴더로 이동했습니다. 다음은 Node.js파일을 저장한 폴더로 이동해줍니다. 명령어는 cd 폴더명입니다. cd는 "Change Directory"의 줄임말로 디렉토리, 즉 폴더를 바꿔주는 명령어입니다. 저는 폴더명을 nodejs라고 저장했기 때문에 cd nodejs라고 적어주었습니다. 엔터를 누르면 폴더가 이동된 걸 확인할 수 있습니다. 3. Node.js 실행하기 제가 실행시킬 node.js 파일입니다. nodejs라는 폴더 안쪽에 ..
[wix] 요소 위치 고정 하기
안녕하세요. 플입니다. 오늘은 윅스에서 요소의 위치를 고정해보겠습니다. 위치 고정은 스크롤을 내려도 그 요소가 계속 화면의 같은 자리에 위치하게 됩니다. 코딩으로는 position:fixed;와 같은 효과를 줍니다. 주로 로고, 메뉴 등에 사용하거나 연락처 등을 계속 보이게 하고 싶을 때 사용합니다. 1. 오른쪽 클릭 위치 고정은 간편하게 할 수 있습니다. 고정하고자 하는 요소에서 오른쪽 클릭을 하면 아래쪽에 위치 고정이라는 항목이 바로 보입니다. 위치 고정을 클릭해줍니다. 2. 위치 설정 위치 고정을 클릭하면 바로 설정창이 뜹니다. 위치를 설정할 수 있는데 마우스를 올리면 어디쯤 위치할지 미리 보기로 보여줍니다. 이미지는 이미 위치한 곳에는 미리보기 영역이 뜨지 않아서 오른쪽 위를 마우스 오버해본 것이..
[반응형] 포트폴리오 사이트
안녕하세요. 플입니다. 오늘은 완성된 포폴 사이트 메인 시안을 가져와봤습니다. 로고는 무료로 제작할 수 있는 사이트에서 제작했고, 컬러는 로고 컬러에 맞춰 진한 청록색과 노란색으로 포인트를 주었습니다. 전체적으로 사각형 모양을 주로 사용했고, 플랫 한 느낌을 주기 위해 노력했습니다. 노란색 배경으로 흰 배경일 때보다 경쾌한 느낌을 주려고 했습니다. 메인에서는 포트폴리오로 보일 작업물을 가장 큰 비중으로 넣어 집중시켰습니다. 사이트 이름과 제작 날짜를 적어 신뢰감을 높이는 효과를 기대해봤습니다. 바로가기 아이콘 역시 사각형 모양을 사용하였고 플랫 한 느낌을 주려고 노력했습니다. 마지막으로 시안 이미지를 남기고 마무리하겠습니다. 그럼 이만. 총총.
[포토샵] 시안 썸네일 만들기
안녕하세요. 플입니다. 오늘은 시안 썸네일을 만들어보겠습니다. 사실 이걸 시안 썸네일이라고 하는지는 모르겠는데 지칭하는 말을 모르겠네요. 아시는 분은 댓글로 알려주세요. 1. 정사각형 캔버스 만들기 정사각형으로 캔버스를 만들어줍니다. 왜 정사각형이냐면 저는 이 이미지를 인스타그램에도 올리기 때문인데요. 그렇지 않다면 굳이 정사각형이 아니어도 괜찮습니다. 2. 이미지 불러오기 완성된 시안 이미지를 불러옵니다. 이미지는 캔버스의 정 중앙에 둡니다. 3. 배경 넣기 시안에 맞춰 배경을 넣어줍니다. 저는 메인 컬러인 청록색을 위쪽에 서브 컬러인 노란색을 아래쪽에 넣어주었습니다. 메인의 비율이 절반보다 조금 많게 해 주었습니다. 4. 효과 주기 배경과 분리를 위해 테두리를 넣어줍니다. 레이어 스타일로 효과를 주었..