| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | |||
| 5 | 6 | 7 | 8 | 9 | 10 | 11 |
| 12 | 13 | 14 | 15 | 16 | 17 | 18 |
| 19 | 20 | 21 | 22 | 23 | 24 | 25 |
| 26 | 27 | 28 | 29 | 30 | 31 |
- web
- MAC
- Git
- c++
- django rest framework
- Algorithm
- CSS
- form
- js
- PYTHON
- API
- 알고리즘 연습
- django widget
- react
- 알고리즘
- 알고리즘 풀이
- 백준
- django ORM
- java
- AWS
- 알고리즘 문제
- javascript
- DRF
- Django
- 장고
- Baekjoon
- es6
- 파이썬 알고리즘
- 파이썬
- HTML
- Today
- Total
목록웹프로그래밍 (163)
수학과의 좌충우돌 프로그래밍
스마트폰이 보급되면서 웹페이지도 많은 부분이 바뀌었습니다. 웹페이지를 스마트폰에서도 볼 수 있도록 반응형으로 제작하여야 하는 아주 큰 이슈가 생겼죠. 그리고 2015년 모바일 검색이 오히려 데스크탑 검색을 넘어서면서 모바일에 대한 대체가 상당히 중요해졌습니다. 구글 역시도 모바일을 중요시 여겨, 모바일에 대응할 수 있는 사이트에 높은 점수를 주기 시작했습니다. 따라서 SEO 를 하기위해서 모바일 최적화는 빼놓을 수 없습니다. 모바일 최적화 확인 다음 사이트에서 웹페이지가 모바일에 최적화가 되어있는지 확인할 수 있습니다. google search console 모바일 최적화 확인 페이지가 모바일 친화적이라면 다음과 같이 초록색 글씨로 친화적임을 표시해줍니다. 모바일 최적화를 위한 방법 모바일 최적화를 위해..
Open Graph 카카오톡에서 어느 사이트의 주소를 보내면 해당 사이트에 대한 미리보기 화면이 나옵니다. 아마 의식하지는 않았지만 다들 한 번 쯤 보셨을 꺼라고 생각합니다. 위 이미지는 제 블로그를 카카오톡으로 보냈을 때 나오는 모습입니다. 대표 이미지, 콘텐츠의 제목, 내용, url 등의 내용을 담고 있습니다. 사용자가 클릭하기 이전에 크롤러가 해당 페이지를 미리 방문하여 head 에 meta 태그에서 정보를 크롤링하여 미리보기 화면을 생성합니다. 다음과 같은 미리보기가 깨져있거나 이상한 내용, 웹사이트에 맞지 않은 내용이라면 그 만큼 사용자들에 접근도 떨어질 것입니다. 그렇기 때문에 SEO 를 설정하는데 있어서도 Open Graph 를 설정하는 것은 중요합니다. Open Graph의 종류 open ..
head 태그 안에는 여러 종류의 태그가 있습니다. 제목을 표시하는 title 태그도 있고 css 를 연결하는 link 태그도 있습니다. 그리고 많은 사람들이 무엇인지 자세히 모르고 넘어가는 meta 도 있습니다. meta 태그는 그 종류에 따라서 다양한 역할을 수행합니다. 이에 대해서 알아보도록 하겠습니다. charset charset 은 html 파일을 어떤 방식으로 인코딩할지 설정할 수 있습니다. 일반적으로 UTF-8 로 지정하며, Universal Coded Character Set + Transformation Format – 8-bit 의 줄임말입니다. 모든 유니코드 문자를 표현할 수 있어 현재 html5 도 이 방식을 채택하고 있기에 특별한 경우가 아니면 이 방식으로 인코딩하게 됩니다. vi..
widget (4) [Django] widget (4) widget 만들어보기 - 캘린더 jQuery-UI widget (3) [Django] widget (3) widget 만들어보기 - 자동완성 Select2 widget (2) [Django] widget (2) widget 만들어보기 - 별점 주기 rateit.js widget (1) [Django] widget (1) widget의 원리와 widget 만들.. ssungkang.tistory.com 개별적인 내용을 담고있지만 이전 포스팅과 전체적인 맥락은 이어지므로 참고하시면 도움이 되실겁니다. 현재 모델은 다음과 같습니다. # core/models.py from django.db import models from django.core.valid..
SSL 인증서를 알기 위해서 알아야 할 사전 지식이 있습니다. 이에 대한 내용부터 알아보도록 하겠습니다. HTTP HTTP 란 Hyper Text Transfer Protocol 의 약자로 인터넷 통신을 위해 사용되는 프로토콜입니다. 프로토콜은 컴퓨터 간의 의사소통에 사용되는 언어라고 생각하시면 될 것 같습니다. 사람 간의 대화에서도 서로 같은 언어를 써야 소통이 가능하듯이 컴퓨터도 의사소통을 위해 언어를 통일 시켜야 했고 이를 망라하여 프로토콜이라고 합니다. 즉 HTTP 도 컴퓨터간의 대화를 위한 언어 중 하나라는 것이죠. 웹에서는 서버와 클라이언트가 HTTP 를 통해 소통 하기 때문에 몰라서는 안되는 부분입니다. 백앤드 개발자는 두 말 할 것 없고 프론트 개발자도 마찬가지죠. 이렇게 소통을 하는데 있..
widget (3) [Django] widget (3) widget 만들어보기 - 자동완성 Select2 widget (2) [Django] widget (2) widget 만들어보기 - 별점 주기 rateit.js widget (1) [Django] widget (1) widget의 원리와 widget 만들어보기 - 실시간 글자수 표시 widget input 태그는 type 속성에 따라 여러.. ssungkang.tistory.com 개별적인 내용을 담고 있지만 이전 포스팅과 전체적인 맥락은 이어지므로 참고하시면 도움이 되실겁니다. 현재 모델은 다음과 같습니다. # core/models.py from django.db import models from django.core.validators impor..
widget (2) [Django] widget (2) widget 만들어보기 - 별점 주기 rateit.js widget (1) [Django] widget (1) widget의 원리와 widget 만들어보기 - 실시간 글자수 표시 widget input 태그는 type 속성에 따라 여러 모습을 보여줍니다. text 일 때는 글을 입력할 수 있도록, date 일 때는 날.. ssungkang.tistory.com 개별적인 내용을 담고 있지만 이전 포스팅과 전체적인 맥락은 이어지므로 참고하시면 도움이 되실 겁니다. 현재 모델은 다음과 같습니다. # core/models.py from django.db import models from django.core.validators import MinValueV..
widget (1) [Django] widget (1) widget의 원리와 widget 만들어보기 - 실시간 글자수 표시 widget input 태그는 type 속성에 따라 여러 모습을 보여줍니다. text 일 때는 글을 입력할 수 있도록, date 일 때는 날짜를 지정할 수 있도록, password 일 때는 비밀번호를 입력할 수 있도록 하는 등 다양한 type이 있.. ssungkang.tistory.com 위의 포스팅과 개별적인 내용이지만 전체적인 내용은 이어지므로 이해가 잘 가지 않는다면 위 포스팅을 참고해주시면 감사하겠습니다. 위 포스팅에서도 확인가능하듯 현재 model 은 다음과 같습니다. # core/models.py from django.db import models from django...
input 태그는 type 속성에 따라 여러 모습을 보여줍니다. text 일 때는 글을 입력할 수 있도록, date 일 때는 날짜를 지정할 수 있도록, password 일 때는 비밀번호를 입력할 수 있도록 하는 등 다양한 type이 있습니다. 그리고 각 type 에 맞춰서 브라우저에서 그에 맞는 UI 를 제공합니다. 하지만 기본적인 UI 를 제공할 뿐이지 실제로 product 레벨에서는 사용하기 부족한 게 사실입니다. 몇 가지 상황에 대해서 이를 커스텀 하는 방법에 대해서 알아보도록 하겠습니다. django widget django에서는 widget 을 사용하여 html input 태그를 생성합니다. widget 은 model에 따라 기본으로 지정되는 default 가 존재합니다. 좀 더 구체적으로 mo..
forms 을 사용하기 이전에는 templates 에서 하나씩 input 으로서 지정을 해주었습니다. 하지만 forms 를 쓰면 {{ form }} 만으로도 지정한 필드에 대한 모든 input을 만들 수 있습니다. 이렇기 때문에 각 input 에 대하여 세부적인 속성을 지정하거나 커스텀하는게 어려울 수 도 있습니다. 하지만 django 에서는 이러한 부분들을 다 지원해주고 있고 유용한 몇 가지 알아보도록 하겠습니다. hidden input 지정 Post 라는 model 은 user_agent 라고 사용자의 브라우저 및 OS 에 대한 정보를 필요로 합니다. # models.py from django.db import models class Post(models.Model): title = models.Ch..