web (7) 썸네일형 리스트형 웹디자인 참고할때 좋은 사이트 웹디자인을 할 때, 다른 이들이 한 사이트들을 둘러보며 영감을 얻는 것도 중요한 것이라고 생각한다. 많이 알려진, 웹디자인에 참고하기 좋은 사이트들을 소개하겠다. 디비컷 https://www.dbcut.com/bbs/index.php 분류가 잘되어있고, 커뮤니티도 있어 현직자들의 의견, 생각을 알 수 있어 좋다. 업데이트도 비교적 잘되는 편. ^잘^된 디자인만 보여주지 않으므로, 오히려 식견을 넓힐 수 있다고 생각. 지디웹 http://www.gdweb.co.kr/main/ 깔끔한 디자인으로 되어있어 보기 편하다. 자체적으로 굿디자인웹을 선정하여 대중적, 전문적 시선에서 좋은 웹디자인이 뭔지 파악할 수 있다. 특히 좋은 점은, 한 웹사이트를 클릭하면 이렇게 비슷한 느낌의 사이트들을 추천해주어 다양한 샘플.. 마크다운 쉽게 쓰기 - 마크다운 에디터 'StackEdit' 깃블로그를 사용한다던지, 기타 용도로 마크다운 형식으로 작성해야 할 때가 있다. 많이 익숙해져있다면 상관이 없으나, 숙련도가 덜한 사람에게는 마크다운 형식으로 글을 작성하는 것이 어렵게 다가올 것이다. 이런 이들을 위해 세상에는 마크다운 에디터가 존재한다. https://stackedit.io/ StackEdit – In-browser Markdown editor Stay connected StackEdit can sync your files with Google Drive, Dropbox and GitHub. It can also publish them as blog posts to Blogger, WordPress and Zendesk. You can choose whether to upload in.. 어이없는 실수 - 팝업창에 이미지 슬라이드 넣기 포트폴리오를 만들던 중에 난관에 봉착한 적이 있다. 팝업창에 이미지 슬라이더를 넣으려 했는데, 넣어지긴 하나, 슬라이더가 정상적으로 작동하지 않는 것이었다. 그것도 아예 작동하지 않는것도 아니고 F12를 눌러 개발도구를 켜면 정상적으로 작동되었다. 이 때문에 거의 일주일은 넘게 해결책을 찾아보았으나, 무슨 함수 값을 지정해주어야 한다느니 하는 머리아파 보이는 해결책들로 씨름을 하다가 결국 내가 짠 제이쿼리 코드를 다시 찬찬히 보기로 하였다. $('#box5>span').click(function () { $('#box5>.box5_popup').css('display', 'block'); }) /*팝업*/ var swiper = new Swiper('.third', { slidesPerView: 1, s.. Git - 자주쓰는 명령어 모음 GitHub에 올리는 목적으로 Git을 사용하다보면 자주쓰게 되는 명령어들이 있다. 한번에 정리해두고자 이렇게 포스팅을 한다. GitHub 로그인 git config --global user.email "이메일" git config --global user.name "사용자명" GitHub 로그아웃 git config --global --unset-all user.name git config --global --unset-all user.email git config --system --unset-all credential.helper 깃 로컬 저장소 지정 git init 깃 파일 추가 git add 파일명 git add . >> 파일 전부다 추가하기 커밋메세지 작성 git commit -m "커밋내용".. CSS Diner - css 선택자 연습 CSS를 처음 입문하다보면, 다양한 선택자 문법에 헷갈리기 마련이다. 다음 사이트에서는 css 선택자를 간단한 게임과 함께 연습해볼 수 있다. https://flukeout.github.io/ CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io 기본적인 레이아웃은 위와 같이 되어있다. 선택자를 접시에 비유해 풀어나가는 것이다. 위의 것들을 공부할 수 있다. 반응형 웹 만들기 - 미디어쿼리 반응형 사이즈 반응형 웹을 만드려면 미디어쿼리를 적용하여 각 디바이스별 사이즈를 적용해주어야 한다. 각 디바이스별로 웹에 있는 구성요소들의 크기라던가, 배치를 다르게 해주면 다양한 웹 크기에 대응할 수 있다. 내가 지금 제작하고 있는 포트폴리오에는 다음과 같은 사이즈를 적용하였다. @media (max-width: 1024px) { } @media (max-width: 769px) { } @media (max-width: 575px) { } 더 세부적으로 크기를 지정할 수 있으나, 난 대표적인 디바이스별로만 크기를 적용하였다. @media (max-width : 1024px) :: 태블릿 @media (max-width : 769px) :: 작은 사이즈의 태블릿, 모바일 가로모드 @media (max-width : 5.. owl carousel 슬라이드 여러개 넣기 웹 포트폴리오를 만드는 중에 한 가지 난관에 봉착한 것이 있었는데, 바로 owl-carousel에 관한 문제였다. 내가 만들고 있는 웹에는 owl-carousel의 플러그인을 사용하여 이미지 슬라이더를 구현하고 있었는데, 이 슬라이더를 한 개만 썼을때는 코드를 그대로 갖다붙혀도 문제가 없었으나, 슬라이더를 하나 더 늘리니 클래스를 제대로 인식하지 못했고 어떻게 수정할지 감이 안잡히는 상황이 왔었다. 하지만, 이 문제는 구글에 서치를 해보며 쉽게 해결되었다. 원 링크는 [https://github.com/OwlCarousel2/OwlCarousel2/issues/1906] 이 곳으로 가면된다. 복잡한 영어가 없으므로, 쉽게 해석가능할 것이다. 일반적으로 owl carousel의 클래스명을 입력할때, 우리는.. 이전 1 다음
