Code Master: Query

장고에서 검색창을 만들고, 검색 기능을 구현하는 방법에 대해서 알아보겠습니다. 작동 원리는 간단합니다. 크게 두 가지 원리만 이해하고 있으면 됩니다. 첫째, 검색창에 검색어를 입력하고 검색 버튼을 눌렀을 때, 검색 결과를 보여줄 html 페이지와 해당 html 페이지의 url이 필요하고, 둘째, 검색창에 입력한 내용이 실제 웹사이트의 데이터베이스에 있는지 확인한 뒤, 그 결과를 html 페이지에 반환해주면 됩니다. 글로 읽어선 한 번에 이해가 되지 않을 수 있으니, 단계별로 차근차근 풀어가 보도록 하겠습니다. 검색창 기능을 구현하기에 앞서, 검색창 샘플을 만들어보도록 하겠습니다. 검색창 구현에 앞서 준비물이 필요합니다. 사전에 사용자가 입력한 검색어를 찾아볼 수 있는 데이터베이스 모델이 세팅돼 있어야 합..

HTML 작업을 하다 보면 너무 자주 사용해서 전부 아는 것 같지만, 막상 각 태그들의 정확한 사용 시점이 헷갈리는 순간들이 생기곤 합니다. 그래서 이번에 마음먹고, 자주 헷갈리는 HTML 태그들을 묶어서 비교/정리해보았습니다. vs. 먼저 시멘틱(sementic) 태그인 섹션(section) 태그와 아티클(article) 태그에 대해서 알아보도록 하겠습니다. 먼저 article 태그의 경우, 블로그를 예로 들자면, 블로그에 있는 수많은 포스트들 중, 포스트 하나. 신문 기사를 예로 들자면, 수많은 신문 기사들 중 기사 하나를 규정할 때 사용합니다. article 태그는 그 자체로 독립성을 갖기 때문에 article 태그 부분만 덩그러니 다른 페이지에 노출시켜도..

장고에서 기본적으로 제공하는 기능들(e.g. filters, list, displays and more)을 활용해서 관리자(admin) 페이지를 꾸미는 방법에 대해 알아보겠습니다. 이는 관리자 페이지에 모델이 표시되는 방법이라든지, 모델의 배열 방향이라든지, 여러 개의 모델들을 한 화면에서 설정할 수 있는 방법이라든지 등의 기능적인 측면에 초점을 맞춘 꾸미기입니다. 제3의 패키지를 사용해 관리자 페이지를 화려하게 꾸미는 방법은 다른 포스트에서 다시 다뤄보도록 하겠습니다. 통상적으로 장고 프로젝트에 앱을 설치하면, 설치된 앱마나 models.py에 class 형태의 모델들이 존재하고, 이 모델들을 장고 관리자 페이지에서 확인하고 관리하기 위해 admin.py에 각각의 모델들을 등록해줍니다. 이해를 돕기 위..

유닉스(Unix)에는 Bourne Shell, Bash, fish, zsh 등 다양한 종류의 쉘(shell)이 있습니다. 하지만 대부분 그 사용법이 비슷하기 때문에, 이들 중 하나만 제대로 다룰 줄 알면, 다른 쉘들도 무리 없이 사용 가능합니다. 유닉스 계열의 리눅스(linux), bsd, 맥 os에서도 쉘 커맨드를 사용할 수 있기 때문에 유닉스 쉘을 공부하면 여러모로 유용합니다. 그럼 지금부터 코딩 작업을 하면서 자주 사용하는 16가지 쉘 명령어(shell command)에 대해서 알아보도록 하겠습니다. 1. man cmd: man 명령어 man은 MANual 또는 user's MANual의 약자입니다. 사용하고자 하는 명령어의 사용법을 확인하고 싶은 경우, man 명령어를 사용하시면 됩니다. 예를 들..

깃허브를 사용하다 보면, 경우에 따라 기존에 만든 리포지토리(repository)를 공개(public) 혹은 비공개(private)로 변경해야 할 때가 생깁니다. 지금부터 리포지토리의 공개 여부와 관련된 세팅을 변경하는 방법에 대해서 알아보겠습니다. 먼저, 깃허브에 접속해 로그인을 한 뒤, 설정을 바꾸고자 하는 리포지토리로 이동합니다. 리포지토리 상단에는 Code, Issues, Pull requests, Actions, Projects, Security, Insights, Settings의 메뉴가 존재합니다. 여기서 제일 마지막에 위치한 Settings를 클릭해줍니다. Settings 페이지로 이동한 뒤, 페이지를 맨 밑에까지 스크롤해서 내리면, 붉은색 테두리에 붉은색 버튼들로 이루어진 Danger Z..

CSS: 스크롤 스냅이란? CSS: Scroll Snap 얼마 전 CSS에 새롭게 추가된 기능인 스크롤 스냅에 대해 알아보겠습니다. 스크롤 스냅이 무슨 기능이냐 하면, 제목에서도 유추해볼 수 있듯, 마우스를 스크롤링해서 화면을 위/아래로 올리고 내릴 때, 현재 화면과 다음 화면 사이의 절대 비율이 50%를 넘어갈 경우, 비율이 높은 쪽으로 자석처럼 스냅! 딱 달라붙는 효과를 구현해주는 기능입니다. 즉, CSS 스크롤 스냅이란, 웹사이트의 스크롤을 어떤 방식으로 작동시키고 구현할지 결정하는 역할을 합니다. 예전에는 자바스크립트(JavaScript)를 사용해야지만 구현할 수 있었던 기능이지만, 이제는 CSS를 이용해, 그것도 딱 두 줄의 코드만 추가하면 해결할 수 있게 됐습니다. 다음 예시를 통해 CSS 스..

CSS 기본값 리셋하는 방법 CSS Tools: Reset CSS CSS에는 기본적으로 적용돼 있는 기본값들이 존재하는데, CSS 작업을 하다 보면 이런 기본값들 때문에 원하는 결과물을 곧바로 얻어내지 못하곤 한다. 그럼 프로젝트마다 매번 필요 없는 기본값들을 일일이 리셋해주어야만 하는 불편함을 겪어야 한다. 그런 불편함을 덜어주기 위해 다음 사이트에서 리셋 CSS를 제공한다. 해당 내용을 복사해 reset.css 파일로 만들어준 뒤, html문서로 불러와 연결해주기만 하면 번거로운 작업을 줄여줘 훨씬 수월하게 작업할 수 있다. https://meyerweb.com/eric/tools/css/reset/index.html CSS Tools: Reset CSS CSS Tools: Reset CSS The ..

부트스트랩 없이 반응형 Navbar 완전정복 CSS: Responsive Navbar 부트스트랩을 사용하지 않고, HTML와 CSS, JavaScript만을 사용해서 반응형 Navbar를 제작해보도록 하겠습니다. 화면 크기가 768px보다 작을 땐, 웹사이트 로고와 상호명을 제외한 나머지 메뉴에 대해서는 햄버거 모양(三)의 버튼으로 감춰지게끔 만들어보겠습니다. 햄버거 버튼을 누르면, 감춰졌던 메뉴바가 아래로 펼쳐지는 방식입니다. 모바일 버전으로 제작되는 거의 대부분의 웹사이트들에서 사용하고 있는 방식이기도 합니다. ▶ HTML 파일의 예시입니다. amazon Menu Menu Menu Menu Menu ▶ CSS 파일의 예시입니다. :root { --text-color: #f0f4f5; --backgro..

CSS: Flexbox 완벽정리 Flexbox가 개발되기 이전에는 Position / Float / Table 을 이용해서 레이아웃을 만들곤 했습니다. 하지만 이러한 방법은 복잡해서 시간이 많이 걸리고, 또 이 방법만으로는 완벽하게 구현하지 못하는 기능들이 있었습니다. 그래서 등장한 것이 바로 Flexbox입니다. Flexbox는 컨테이너 박스와 그 안에 있는 아이템들을 행과 열에 자유자재로 배치 시킬 수 있게 해주는 유용한 도구입니다. Flexbox를 잘 이해하면 웹사이트의 레이아웃을 아주 쉽게 구성할 수 있습니다. *** 참고: Float *** float는 원래 이미지와 텍스트가 공존하는 경우, "이미지"와 "텍스트"의 관계를 어떻게 규정하고 배치할지 결정하기 위해 만들어졌습니다. 예를 들어 flo..

1. DNS란? ▶ DNS는 Domain Name System의 약자로, 숫자로 이뤄진 인터넷상의 컴퓨터 IP주소를 인간이 기억하기 쉬운 언어의 형태로 변환해 사용할 수 있게 하는 시스템입니다. 쉽게 말해, 홈페이지의 집주소라고 생각하시면 됩니다. 숫자로 이루어진 홈페이지의 퍼블릭 IP주소는 집의 위도, 경도 쯤으로 생각해볼 수 있겠네요. 2. 가비아 홈페이지 로그인 가비아 홈페이지 주소: https://gabia.com 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com 3. 도메인 주소 검색 ▶ 중앙에 위치한 검색창에 본인이 원하는 도메인 주소를 적고 검색을 누릅니다. 위 예시의 경우) yoursitename 4. 도메인 주소 선택 ▶ 검색 결과가..