| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- django rest framework
- 장고
- HTML
- 백준
- 알고리즘 풀이
- DRF
- react
- 알고리즘 문제
- Baekjoon
- js
- web
- 알고리즘 연습
- 파이썬
- es6
- javascript
- API
- Git
- 알고리즘
- AWS
- Algorithm
- c++
- 파이썬 알고리즘
- java
- django ORM
- CSS
- MAC
- form
- django widget
- Django
- PYTHON
- Today
- Total
목록웹프로그래밍/html,css (13)
수학과의 좌충우돌 프로그래밍
input 태그로 파일을 첨부하게 할 수 있는데 예상치 못한 이슈가 생겼습니다. 사용자의 사진을 첨부받을 목적으로 만들었는데 엑셀, 텍스트 파일, 비디오 파일 등 예상치못한 파일을 첨부하는 일이 발생했습니다. 다행히도 input 의 accept속성을 통해서 확장자를 제한할 수 있었습니다. 여러 개의 확장자를 원할 경우 , 로 연결해주면 됩니다. 자주 사용하는 확장자에 대해서 정리를 해보았습니다. Excel Files (.xls) Excel Files (.xlsx) Text Files (.txt) Image Files (.png/.jpg/etc) HTML Files (.htm,.html) Video Files (.avi, .mpg, .mpeg, .mp4) Audio Files (.mp3, .wav, etc..
개발자가 의도한 대로만 사용자가 움직여주면 좋겠지만 실상은 그렇지 않습니다. 예상치도 못한 버그를 많이 생산? 해내며 이를 사전에 예방 해줘야 합니다. input 태그가 있지만 사용자가 무시하고 submit을 해버린다면 해당 input의 데이터는 존재하지 않을 것입니다. 하지만 아이디, 패스워드 등 주요한 input 이라면 꼭 입력값을 받아줘야 합니다. 필수 input 폼을 채우지 않았을 경우, 재출버튼을 눌렀을 때 경고창을 띄워주면 이러면 문제를 사전에 예방할 수 있습니다. 이는 별도의 js 없이 html 만으로 구현이 가능합니다. 아이디: 다음과 같이 input 태그 안에 required 를 추가해주면 해당 input을 입력하지 않고 제출을 누를 시 경고창이 뜨게 됩니다. 남성 여성 이번에는 여러 개..
장고 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 에서 이미지 넣는 법에 대해서 배워보도록 하겠습니다. 웹 페이지에서 이미지 없이 줄글만 있다고 생각하면... 들어올 사람도 도망치고 말 것 입니다. 그 만큼 중요한 이미지! 어렵지 않으니 알아보도록 합시다. 표를 만드는 태그이미지를 만드는 태그 이미지도 파일 형식이 굉장히 다양합니다. 하지만 아쉽게도 웹에서는 모든 이미지 파일 형식을 지원하지 않습니다. 아래와 같은 3개의 파일 형식을 제공하고 이에 대해서 간단하게 알아보겠습니다. 파일형식 장점단점 GIF(Graphic Interchange Form) 파일 크기가 작음투명한 배경이나 움직이는 이미지를 만들 수 있음 표시할 수 있는 색상수는 256가지 JPG/JPEG(Joint Photographic Experts ..
그리고 안녕하세요 강민성입니다. 오늘은 텍스트 관련 태그 마지막 시간으로 표를 만드는 태그에 대해서 알아보겠습니다 !! 표를 만드는 태그 표의 뼈대를 이루는 요소들, , , , 태그 table 태그는 내가 표를 만들겠다는 걸 브라우저에게 알려주는 작업입니다. 나머지 태그들은 모두 table 태그 안에 쓰시면 됩니다. tr 태그는 행을 만드는 역할을 합니다. td 태그는 각 행에 들어가는 태그로서 행마다 몇 개의 셀을 만들지 결정하는 역할을 합니다. 그리고 td 태그 안에는 표 각 셀의 들어갈 내용을 넣어주시면 됩니다. 이 때 td 대신 쓸 수 있는 th 태그가 있는데 표에 제목 셀을 만드는 역할을 합니다. 보통 표의 첫 번째 행과 첫 번째 열에 사용을 하게 됩니다. th 태그를 통해서 셀의 내용을 가운데..
안녕하세요 강민성입니다. 오늘은 저번 시간에 이어서 텍스트 관련 태그들을 알아보도록 하겠습니다. 저번 시간에는 텍스트를 덩어리로 묶어주는 태그와 텍스트를 한 줄로 묶어주는 태그에 대해서 알아보았습니다. http://ssungkang.tistory.com/entry/html-2%ED%85%8D%EC%8A%A4%ED%8A%B8-%EA%B4%80%EB%A0%A8-%ED%83%9C%EA%B7%B8%EB%93%A4-1 이번 시간에는 목록을 만드는 태그에 대해서 알아보도록 하겠습니다. 목록을 만드는 태그 목록을 만드는 태그는 단순히 목록을 나타내는 용도 이외에도 이미지, 텍스트 등 다양한 분야에 사용하여 응용할 수 있습니다. 그 만큼 많이 사용하기 때문에 잘 알아두시길 바랍니다. 순서없는 목록을 만드는 , 태그 u..