탐구소년

안녕하세요 탐구소년입니다. 웹사이트를 구경하다 보면 웹사이트의 모습 그대로를 pdf 파일로 저장해두고 싶은 상황이 생길 때가 있습니다. 어떤 브라우저를 사용하고 있느냐에 따라 그 방법이 조금씩 다르긴 할테지만, 구글의 웹브라우저인 크롬을 사용하는 경우 무척 쉽게 웹사이트 화면을 pdf 형태로 저장할 수 있습니다. 이는 아주 간단한 절차만 밟으면 되는 일이긴 하지만, 의외로 그 방법을 모르는 사람이 많습니다. 그래서 오늘 글에서는 크롬을 사용해서 웹사이트 화면을 pdf로 저장하는 방법에 대해 알아보도록 하겠습니다. 그럼 바로 시작해보겠습니다. 크롬으로 다음(Daum) 홈페이지를 열고, 홈페이지 화면을 pdf로 저장하는 과정입니다. 다음 메인페이지입니다. 브라우저는 크롬입니다. 오른쪽 상단으로 시선을 돌려(..

안녕하세요 탐구소년입니다. 오늘은 웹개발 관련 용어 중 크로스 브라우징(cross browsing)에 대해서 알아보도록 하겠습니다. 크로스 브라우징이란? 크로스 브라우징이란, 웹표준 기술을 적용하여 웹페이지가 서로 다른 운영체제나 플랫폼에서 이상없이 구현되도록 하는 기술을 말합니다. 설명 웹 개발자가 웹사이트를 만들어서 서비스를 하면, 사용자는 웹브라우저를 통해 웹사이트에 접근하게 됩니다. 이때 브라우저의 종류는 상당히 여러가지가 있습니다. 크롬, 사파리, 오페라, 파이어폭스, 인터넷 익스플로러 등 그 종류가 상당히 많죠. 크로스 브라우징이란 브라우저의 종류에 상관없이 웹사이트의 레이아웃이나 이미지, 데이터 등이 동일하게 보여지게 하는 상호 호환성에 대한 기술을 의미합니다. 그리고 이는 웹사이트를 개발하..

안녕하세요 탐구소년입니다. 오늘은 웹 개발을 공부하시는 분들이 자주 접하실 법한 단어, '웹 접근성'에 대해서 알아보도록 하겠습니다. 웹 접근성 사전적 의미(를 좀 더 쉽게 풀어서) 웹 접근성(web accessibility)이란 장애를 가진 사람과 장애를 가지지 않은 사람 모두가 웹사이트를 함께 이용할 수 있도록 배려하는 것을 말합니다. 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 모든 사용자들은 정보와 기능에 동등하게 접근할 수 있습니다. 웹 접근성을 위해서는, 사용자의 시각적, 체력력, 청각적 능력들을 고려하여야 합니다. 설명! 웹 접근성은 웹사이트를 만들 때에 적용되는 기술이자 한 개념입니다. 웹 접근성의 철학은 "어떤 장애가 있더라도 웹 사이트를 사용하는 데 불편이 있어서는 안 된다"라..

안녕하세요 탐구소년입니다. 주말이지만 오전에는 일을 좀 했고, 오후가 되서야 심신에 휴식을 좀 취하고 있었습니다. 그러다 멍하니 앉아있는게 싫증나서 심심풀이로 로또번호 자동 생성 프로그램을 작성해보았습니다(도대체 왜..?). 로또 생성 예제는 흔하디 흔하고 무척 쉬운 프로그램이긴 하지만, 같은 동작을 여러가지 언어로 작성해보는 것은 재미있는 일인 것 같아서 나름 의미가 있다고 보입니다. 프로그램의 동작 방식은, 원하는 개수만큼을 숫자로 직접 입력하면 거기에 맞춰 로또번호가 생성되어 콘솔에 출력되는 식입니다. 코드와 실행결과를 아래에 남겨두겠습니다. 코드(lotto.py) ''' 로또 번호 자동 생성 프로그램 by 탐구소년 ''' import random cnt = 0 # 숫자 외 다른 것을 입력할 시엔 ..

안녕하세요 탐구소년입니다. 파이썬 문법을 이제 막 학습하신 분들이 추가적인 공부를 위해 많이 해보시는 것 중 하나로 파이썬을 활용한 GUI 프로그래밍을 꼽을 수 있는데요. 오늘은 파이썬 GUI 프로그래밍에 자주 사용되는 모듈인 tkinter를 사용해서 작성한 복리 계산기 코드를 준비해봤습니다. 우리가 저축이나 투자를 하게 되면 우리의 돈에 이자가 붙게 마련입니다. 그런데 이자가 붙는 방식은 한 가지만 있는 게 아니라 단리와 복리 두 가지가 있어 어떤 방식의 저축 상품을 선택하냐에 따라 최종 수익금이 달라지게 됩니다. 여기서는 그 중에서도 복리 방식의 계산을 적용하여 코드를 작성했으니 유념하시고요. 혹시라도 단리와 복리의 차이가 궁금하신 분들은 아래의 링크를 참고해주셔도 좋을 것 같습니다. 제 글이에요. ..

안녕하세요 탐구소년입니다. 오늘은 제가 재미삼아 작성한 파이썬 코드를 올려보려고 합니다(정확히는 필요한 데가 있어서 작성한 것이긴 하지만, 아무튼). 제가 작성한 것은 바로 파이썬 그래픽 모듈인 turtle을 사용해서 만든 그림 그리기 프로그램입니다. 위의 이미지를 보시면 조그만 창 안에 'Python'이라는 단어가 쓰여져 있는 게 보이시죠? 저것은 다름아닌 제가 직접 창을 띄우고 키보드를 조작해서 그린(?) 것인데요. 위에 떠있는 거북이 한 마리가 붓 노릇을 하고, 그 녀석이 지나간 자리에 색깔이 입혀지게 되는 식입니다. 위와 같은 동작을 구현한 코드를 개인적으로 기록도 하고 필요한 누군가에게 참고 자료로도 공유할 겸 여기에 올리도록 할 테니, 누군가에게는 도움이 되길 바라봅니다. 코드(draw_wit..

안녕하세요 탐구소년입니다. 우리는 PC, 태블릿, 스마트폰 등 여러 가지 기기로 웹 사이트에 접속하곤 하는데요. 어떤 기기로 사이트에 접속하냐에 따라 웹 사이트의 형태가 달라지는 것을 종종 확인할 수가 있습니다. 이는 저절로 이루어지는 것이 아니고, 제작 과정에서 웹사이트를 반응형으로 제작했기에 가능한 것입니다. 웹 사이트를 제작할 때에, 하나의 웹 사이트를 기기마다 다르게 표현할 수 있는 방법들은 여러가지가 존재하는데요. 오늘은 그 중에서도 많이 사용되는 방법인 미디어쿼리에 대해서 정리를 해보도록 하겠습니다. 미디어쿼리란? 미디어 쿼리(mediaqueri)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈입니다. 미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하..

안녕하세요 탐구소년입니다. 탐-하 ㅋㅋ CSS는 주로 HTML문서 스타일을 정의해줄 때 사용되는 언어입니다. CSS는 사이즈를 표현할 때 여러 가지 단위를 사용하기 때문에 각각의 단위의 쓸모를 잘 구별해서 사용해야 합니다. 특히나 반응형 웹을 만들 때 이들에 대한 이해가 정말 중요한데요. 여러가지 단위가 있지만, 이번 글에서는 사용 빈도가 높은 px, rem, em, % 에 대해서만 알아보겠습니다. 먼저, 각각의 특징! - px : 절대값으로 사용되는 단위. 고정된 값이므로 사용하기 편하지만 반응형 웹에는 적절하지 않습니다. - rem : 최상위 요소인 요소에 비례하여 사이즈를 갖게 되는 단위. 에 font-size가 16px로 되어 있다면 1rem은 자동적으로 16px과 같아집니다. - em : 부모 ..

안녕하세요 탐구소년입니다. 웹 사이트를 만들기 위해서는 HTML, CSS, Javascript 세 가지의 프로그래밍 언어를 익혀야 합니다. 이 세 언어가 웹 사이트를 만드는 데 기본이 되는 언어들이기 때문입니다. 싫어도 어쩔 수 없어요. 해야 합니다(ㅠㅠ)! 그런데 일반적인 고정형 웹사이트가 아닌, 다양한 기기에서 유연하게 디자인을 바꾸어 가며 표시되는 '반응형 웹 사이트'를 제작하기 위해서는 이 외에도 추가적으로 알아야 하는 개념이 한 가지 더 있습니다. 바로 '뷰포트(viewport)'가 그것입니다. 웹 사이트를 만들 때 이를 반응형으로 제작해주지 않으면, 모바일 화면에서는 PC화면일 때와 똑같은 형태를 유지하되 비율만 축소된 채 웹사이트가 표시되어 보기가 무척 불편합니다. PC화면에서 보이는 내용이..

안녕하세요 탐구소년입니다. 오늘은 간만에 IT 상식을 정리해보겠습니다. 주제는 '반응형 웹'입니다. 반응형 웹이란? PC 브라우저로 접속하든 모바일 브라우저로 접속하든 사용자의 접속 환경에 맞추어 사이트 레이아웃을 자연스럽게 바꾸어가며 보여주는 웹 디자인을 '반응형 웹 디자인'이라고 합니다. 즉 반응형 웹이란 하나의 사이트를 여러 기기에서 여러 사이즈로 볼 수 있도록 한 것입니다. 아주 가까운 예로 티스토리 블로그만 봐도 반응형 웹입니다. PC의 커다란 모니터 화면으로 볼 때와, 작은 모바일 기기 화면으로 볼 때의 디자인이 서로 다르게 나타나는데, 이것은 저절로 되는 것이 아니라 반응형 웹 디자인을 했기 때문에 가능한 것입니다. 반응형 웹의 등장 배경? 기억하시는 분들이 계실지 모르겠지만, 특별히 웹사이..