Mdia Query는 디바이스의 크기에 따라 웹이나 모바일 홈페이지의 사이즈를 조절해주는 CSS의 한 부분입니다. 소위 반응형 홈페이지들에서 주로 사용하고 있지만 사이즈를 고정해서 보여줄 때도 유용한 것이 미디어쿼리입니다. 그런데 Media Query를 쓸 때, 반응형 홈페이지를 만들 때 Min, Max, Device-width, height 등 헷갈릴 때가 종종 있어서 미디어쿼리를 나름 정리해두고자 합니다. Media Query 란? 미디어 쿼리는 뷰포트의 크기에 따라 정해진 CSS가 작동하도록 해줍니다. 앞서도 말씀드린 것처럼 반응형 홈페이지를 만들 때는 꼭 필요한 것이 미디어쿼리이고, 잘 사용하면 대단히 부드럽게 브라우저 - 뷰포트에 맞는 홈페이지를 보여주게 됩니다 . Media Query의 기본은..
가비아에서 구매한 도메인을 티스토리에 연결하는 방법을 알아봅니다. 개인적으로 저도 워드프레스 블로그를 운영하고 있지만 웹사이트를 운영하는 것이 번거로우면 차라리 티스토리블로그에 도메인을 입혀서 홈페이지 처럼 사용하는 것도 나쁘지 않은 방법이라고 생각합니다. 이글의 구성 가비아에서 구매한 도메인 티스토리에 연결하기 가비아에서 구매한 도메인 확인, DNS 관리 티스토리 DNS는? 티스토리에 2차도메인 적용하기 가비아에서 구매한 도메인 티스토리에 연결하기 도메인을 구매한 곳마다 설정하는 방법은 조금씩 차이가 있습니다. 가격 때문에 hosting.kr 도 많이 사용하죠. 저도 호스팅 케이알을 사용하고 있지만 가끔씩 속수무책으로 서비스가 중단되는 경우가 발생해서 난감할 때가 있기도 합니다. 하지만 가격을 생각하면..
웹사이트나 티스토리, 워드프레스 등 블로그를 만들고 설정하다보면 robots.txt 를 만들어야 합니다. 사실 없어도 구글, 네이버, 다음, MSN 등 대부분의 검색엔진은 웹사이트나 블로그를 색인할 수 있지만 때때로 원하지 않는 방식으로 접근하고 불필요한 페이지가 색인되어 검색 결과로 노출될 수도 있어서 robots.txt를 설정하는 것이 좋은데요. 검색엔진에 대응하는 robots.txt를 설정하는 방법과 만들어서 적용하는 방법, 검색엔진에 적용하는 방법을 알아봅니다. robots.txt 만들기 robots.txt 만드는 건 누구나 쉽게 할 수 있습니다. 네이버 웹마스터도구에서는 이미 만들어진 robots.txt를 다운로드할 수도 있으니 받아서 수정하거나 그대로 써도 상관 없거든요. 네이버 웹마스터도구에..
요즘은 포토샵 없이도 어느정도 컴퓨터만 좀 다룰 수 있으면 이미지를 만들 수 있는 도구를 브라우저로 이용할 수 있는 사이트가 많습니다. 대표적으로 오래전부터 유명했던 망고보드가 있죠. 그리고 최근에는 미리캔버스도 많이 사용하고 있습니다. 망고보드는 워낙 유명하니까 제외하고 미리캔버스와 칸바를 비교해봤습니다. 개인적으로는 국내에서는 미리캔버스를 추천드립니다. 그 이유는 아래에서 살펴보시지요. 미리캔버스 미리캔버스라는 도구가 나와서 이제는 디자인을 잘 못해도, 디자인툴에 대한 지식이 별로 없어도 걱정이 없어졌습니다. 다양한 템플릿이 이미 고퀄리티로 만들어져 있어서 미리캔버스를 이용하면 웬만한 배너를 뚝딱 만들어 낼 수 있으니까요. 게다가 거의 무료입니다. 쇼핑몰을 운영하는 분들도 아주 쉽게 필요한 이미지를 ..
Github의 개념을 알아보겠습니다. 지난번에 Git이 무엇인지, 어떻게 쓰는지를 살펴봤으니 Git에 대한 이야기는 지난 포스팅을 참고해주세요. Git을 어떻게 쓰는지 알면 Github의 개념은 좀 더 쉽게 이해할 수 있습니다. Git이란 무엇일까? + 사용법 Git이란 무엇일까? 최대한 쉽게 정리해봤습니다. /사용법 Git, Github 개발자들이 너무나 많이 사용하고 있는 것이죠. 사실 깃이니 깃허브니 하는 것은 개발작업의 특성상 협업 과정에서 파일관리를 위해 필요한 것입니다. 하지만 개인이 혼자서 뭔가를 작 sensepress.tistory.com Git은 버전관리를 해주는 프로그램입니다. 개인적으로 필요해서 사용하기도 하고 팀작업을 위해서 사용하기도 합니다. 깃을 사용하기 전엔 작업물마다 새로운 ..
Git, Github 개발자들이 너무나 많이 사용하고 있는 것이죠. 사실 깃이니 깃허브니 하는 것은 개발작업의 특성상 협업 과정에서 파일관리를 위해 필요한 것입니다. 하지만 개인이 혼자서 뭔가를 작업할 때도 깃, 깃허브는 아주 유용합니다. 오늘은 Git 이 어떻게 사용되는지 살펴보고 최대한 쉽게 알려드려 볼게요. 저도 초보거든요. Git이란? Git사용하는 방법 - Git설치하기 - 터미널프로그램 - Git 설치여부 확인하기 - 소스트리 Git GUI 다운로드, 설치 - Git 비주얼스튜디오 코드 연동하기 - Git 사용하기 / 소스트리로 Git관리하는 방법 - Git Reset - Git Revert - Git Merge Git이란? Git이라는 단어가 갖는 의미도 궁금하실텐데요. 저는 이게 궁금해서 ..
CSS로 간단한 애니메이션을 만들 수 있습니다. 자바스크립트가 없어도 각각의 요소들이 부드럽게 변하거나 이동하거나 크기가 변하는 등의 애니메이션을 만들어 줄 수 있는데요. 각 요소 즉 엘리먼트에 적용되는 애니메이션을 위해 필요한 것들을 우선 살펴보겠습니다. CSS 애니메이션의 장점 자바스크립트가 필요 없습니다. 가벼운 애니메이션을 만들 때 자바스크립트도 많이 사용되고 관련 소스도 많지만 잘 안될 때도 있고 개발자의 영역이라 디자이너가 스스로 통제하지 못할 경우도 있습니다. 반면 CSS 애니메이션은 렌더링이 부드럽고 브라우저에서 효율적인 성능을 내줍니다. 자바스크립트 없이도 애니메이션 속성을 지정하고 총시간, 반복 여부도 지정해줄 수 있습니다. 일일이 키프레임을 만들어야하는 것이 아니라서 관리도 수월하죠...
어도비 XD 는 UI 디자인을 할 수 있는 도구입니다. 제플린과 연동해서 디자이너와 퍼블러셔 개발자가 협업작업도 가능해서 많은 분들이 사용하고 있는데요. 예전에는 스케치를 많이 썼고 아직도 현업에서 사용하고 계신 회사들이 있는지는 잘 모르겠지만 저는 처음부터 XD 만 사용해서 XD 에 익숙한 편입니다. 오늘은 제플린과 어도비 XD 연동하는 방법을 살펴보겠습니다. 제플린 제플린은 디자인 작업물을 개발자에게 전달할 수 있는 툴입니다. 이전에 포토샵에서 작업한 디자인을 개발자에게 전달한다면 아마도 중간에 퍼블리셔가 완전한 작업물을 만들기 전까지는 작업물의 수치나 이미지 요소들을 가져다 쓰기가 불편해서 디자이너는 디자이너대로 이미지요소를 모아서 보내줘야하고 수치도 각각 알려줘야만 했습니다. 지금은 제플린이 있기..
CSS 이해하기에 이어서 CSS 셀렉터를 알아보고 활용하는 방법을 함께 알아보겠습니다. 예제를 따라서 작성해보고 브라우저에서 확인해보는 방법으로 하시면 쉽게 이해하실 수 있을 것 같아요. 아래는 샘플 html 입니다. 이 문서에 CSS 를 적용해 보겠습니다. CSS TEST 간단히 CSS 요소에 대해 알아봅니다. 첫번째 리스트 요소입니다. 두번째 리스트 요소입니다. CSS는 지난번 CSS 이해하기에서 잠깐 말씀드린 것처럼 selector { } 형식으로 되어 있습니다. 각각의 태그에 직접 적용하는 경우는 제외하고 문서 내 별도 영역에 CSS 처리하는 경우나 별도의 파일을 연결하는 경우는 모두 이와같이 되어 있다고 할 수 있습니다. selector { property:value; } 셀렉터의 종류 univ..
HTML퍼블리싱에서 빼놓을 수 없는 것이 CSS입니다. 사이트를 꾸밀려면 반드시 필요한 요소이며 규칙인데요. CSS를 먼저 이해하고 자주 쓰이는 요소들도 살펴보겠습니다. CSS란 Cascading style Sheet의 약자입니다. HTML을 꾸며주는 표현 언어인데요. 문서구조- 뼈대를 HTML 로 구축하고 디자인을 CSS로 해준다고 할 수 있습니다. HTML 이 있어야만 CSS 도 의미 있습니다. HTML 자체에도 색상, 크기, 높이, 넓이, 위치 등을 조정할 수 있지만 더 디테일하게 구현이 가능하도록 해줍니다. CSS 가 생기기 전엔 모든 HTML 문서별로 따로따로 디자인 해줘야 했다면 이제는 CSS에 디자인 요소를 따로 모아서 일괄적으로 수정, 편집이 가능한 것이죠. 홈페이지가 커지면 커질 수록 C..
파이썬하면 아나콘다(Anaconda)는 꼭 같이 나오는데요. 아나콘다는 파이썬 배포판 중에 하나입니다. 리눅스도 여러종류의 배포판이 있죠. 우분투, 페도라, 레드햇, CentOS 등등 배포판마다 특징을 갖고 있습니다. 아나콘다는 수백개의 파이썬 패키지를 포함하고 있는데요. 수학, 과학 관련 패키지를 포함하고 있는 것으로 유명합니다. 파이썬이 아무 것도 없는 빈방처럼 보인다면 아나콘다는 빌트인되어 있는 가구가 있는 방이라고 하면 적절할 것 같습니다. 그리고 아나콘다는 2020년 중순경에 유료로 변경되어, 개인적, 학습용은 상관 없지만 회사에선 유료 구매 후 사용해야 합니다. 아나콘다 설치 빈방이라고 파이썬을 비유하긴 했는데 이미 파이썬 자체도 필요한 것들을 많이 가지고 있습니다. 아나콘다가 훨씬 많다는 것..
파이썬은 문자열을 쉽게 다룰 수 있는 언어입니다. 문자열이란 문자들의 집합, 문자들의 나열을 의미하죠. 문자열을 출력하고 다루는 함수 몇가지와 문자열에서 일부분만 출력하거나 일부 정보만 이용하는 방법인 슬라이싱(Slice)에 대해서 공부해보겠습니다. 사이트별로 서로 다른 패스워드를 만들어주는 예제를 통해서 문자열과 슬라이싱을 어떻게 적용하는지 살펴보려고 합니다. 파이썬이 문자열을 쉽게 다룰 수 있는 언어를 증명하듯 문자열과 관련된 함수도 많더라구요. 그래서 모두 다루지는 못하고 문제를 풀면서 필요한 함수들과 함께 연관 함수들을 같이 다루면 될 것 같습니다. 그리고 앞으로도 점점 더 많은 문제를 다루면서 자연스럽게 파이썬을 익혀가는 방식으로 진행해보려고 해요. 그리고 참고로 이 문제는 나도코딩님의 파이썬 ..
