| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 파이썬
- django ORM
- django widget
- Django
- HTML
- DRF
- django rest framework
- AWS
- CSS
- 백준
- 알고리즘 풀이
- 장고
- Algorithm
- 알고리즘 문제
- 파이썬 알고리즘
- es6
- 알고리즘 연습
- PYTHON
- MAC
- 알고리즘
- javascript
- js
- API
- react
- java
- web
- form
- c++
- Git
- Baekjoon
- Today
- Total
목록CSS (6)
수학과의 좌충우돌 프로그래밍
장고 form은 input이나 button 을 통해서 제출하는 기능을 구현합니다. 가입하기 위와 같이 두 가지 선택지가 있습니다. 하지만 form 안에서 정보를 채우기 위해서 button 을 사용해야 할 경우도 있습니다. 저 같은 경우 회원가입 form 을 만들다보니 주소 정보가 필요했고, 주소를 찾는 검색 버튼을 구현한 결과, 주소를 찾기 위해 button을 누르면 form 이 보내졌습니다. 그 이유는 바로 button type 에 있었습니다. button 도 여러 type을 가지게 되는데 그 중 form 을 제출하는 submit 이라는 속성이 있고 이 속성이 default 입니다. 가입하기 가입하기 위에 두 경우는 같은 경우인것이죠. 일반적인 버튼을 만들기 위해서는 아래와 같이 해주어야 합니다. 이 ..
로그인 페이지를 구현하는 중, 로그인 유지 기능을 만들게 되었습니다. 로그인 유지를 할지 말지 checkbox로 선택을 받으려 했습니다. 하지만 그러기에 checkbox 의 디자인이 너무 이쁘지 않아서 새롭게 디자인 하고자 했습니다. 현재 checkbox 와 label은 다음과 같습니다. keep login 먼저 현재의 checkbox가 보이지 않게 해주었습니다. 해당 위치에 다른 checkbox 를 만들어줄 것이기 때문에 공간도 차지하지 않도록 해주었습니다. input[type=checkbox] { display: none; } 다음으로는 label 에 대한 속성을 추가해주었습니다. 옆에 checkbox가 들어갈 공간을 주기 위해서 좌측 패딩 값을 주었습니다. input[type=checkbox] + ..
div에 이미지 꽉 채우기 이미지 크기에 따라서 div를 뚫고 나오기도 하고, 여러 문제가 발생한다. 그래서 div 크기에 딱 맞도록 이미지를 넣는 방법을 알아보고자 한다. img 태그를 이용해 고양이 사진을 넣고 이를 div로 감싸주었다. 이제 div에 크기를 결정해주어서 사용하려고 한다. .image-container{ width: 300px; height: 300px; } 하지만 그 결과 고양이 이미지가 div를 뚫고 나오게 된다. 파란색 영역엔 div를 무시하고 이미지 크기에 따라 들어간 것을 확인할 수 있다. 이럴 경우에는 다음과 같이 해결할 수 있다. .image-container{ overflow: hidden; display: flex; align-items: center; justify-..
css 선택자 css 선택자란? 우리가 html 파일을 만들었다면 각각의 태그에 다르게 css 를 설정 할 것입니다. 이 때, 어느 요소에 스타일을 적용할지 알려주는 방식이 바로 css 선택자 입니다. 선택자가 어떻게 쓰이는지 확인해볼까요? div { color: black; background-color: yellow; } div 태그들에게 css 를 주기 위해서 div 라는 선택자를 사용하였습니다. 이렇게 되면 html 문서에 모든 div 태그들에는 { } 안에 적용해준 css 속성값들이 적용이 됩니다. div 처럼 태그의 이름 말고도 선택자를 주는 방식이 굉장히 다양한데 이를 알아보도록 하겠습니다. 선택자의 종류 [ 선택자를 하나만 쓸 경우 ] 전체 선택자 전체 선택자는 * 을 사용하여 나타냅니다...
안녕하세요 강민성입니다. 간단하게 vs code extension을 하나 소개하도록 하겠습니다. 복잡한 코드를 한 눈에,Highlight Matching Tag 이름에서도 바로 알 수 있듯이, 어느 tag의 매칭되는 tag를 하이라이트해주는 기능을 가지고 있습니다. 코드가 길어질수록 여는 태그와 닫는 태그가 구분이 안되서 실수로 닫는 태그나 하나 부족하거나 더 많거나 하는 경우가 생길 겁니다. 이럴 경우, 전체적인 코드에 영향을 미치므로 이 extension을 이용해서 해결하시기를 바랍니다. 다음과 같이 한 태그를 선택했을 때 그 태그와 매칭되는 태그에 노란선으로 하이라이트 해줍니다. 설치경로는 아래 홈페이지 혹은 vs code 내에서 가능합니다. https://marketplace.visualstudi..
안녕하세요 강민성입니다. 요즘에는 웹 프로그래밍을 공부하고 있습니다. 그러기 위해서 가장 기초가 되는게 바로 html과 css 가 아닐까 생각되는데요. 이번 시간에는 그 중에서도 html에 대해서 배워보도록 하겠습니다. html 이란 무엇일까? html이란 하이퍼텍스트 마크업 랭귀지 (HyperText Markup Language)의 줄임말로 하이퍼텍스트를 마크업하는 언어라는 의미입니다. 한 단어씩 이해해보면 하이퍼텍스트 란, 웹사이트에서 링크를 클릭해 다른 문서나 사이트로 이동하는 기능을 말하고 마크업이란 태그를 사용해서 문서에서 어느 부분이 제목이고 본문인지, 어느 부분이 사진인지 등을 표시하는 것을 말합니다. 글로는 이해가 안 갈 수 있지만 뒤에서 실습을 하면 무슨 말이었는지 이해할 수 있을 겁니다..