목록HTML (7)

수학과의 좌충우돌 프로그래밍

[html] input 파일 첨부시 파일 확장자 제한하기

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..

웹프로그래밍/html,css 2019. 7. 8. 14:01
[html] form 안에 button이 있으면?

장고 form은 input이나 button 을 통해서 제출하는 기능을 구현합니다. 가입하기 위와 같이 두 가지 선택지가 있습니다. 하지만 form 안에서 정보를 채우기 위해서 button 을 사용해야 할 경우도 있습니다. 저 같은 경우 회원가입 form 을 만들다보니 주소 정보가 필요했고, 주소를 찾는 검색 버튼을 구현한 결과, 주소를 찾기 위해 button을 누르면 form 이 보내졌습니다. 그 이유는 바로 button type 에 있었습니다. button 도 여러 type을 가지게 되는데 그 중 form 을 제출하는 submit 이라는 속성이 있고 이 속성이 default 입니다. 가입하기 가입하기 위에 두 경우는 같은 경우인것이죠. 일반적인 버튼을 만들기 위해서는 아래와 같이 해주어야 합니다. 이 ..

웹프로그래밍/html,css 2019. 6. 2. 04:31
[html] vs code extension, Highlight Matching Tag

안녕하세요 강민성입니다. 간단하게 vs code extension을 하나 소개하도록 하겠습니다. 복잡한 코드를 한 눈에,Highlight Matching Tag 이름에서도 바로 알 수 있듯이, 어느 tag의 매칭되는 tag를 하이라이트해주는 기능을 가지고 있습니다. 코드가 길어질수록 여는 태그와 닫는 태그가 구분이 안되서 실수로 닫는 태그나 하나 부족하거나 더 많거나 하는 경우가 생길 겁니다. 이럴 경우, 전체적인 코드에 영향을 미치므로 이 extension을 이용해서 해결하시기를 바랍니다. 다음과 같이 한 태그를 선택했을 때 그 태그와 매칭되는 태그에 노란선으로 하이라이트 해줍니다. 설치경로는 아래 홈페이지 혹은 vs code 내에서 가능합니다. https://marketplace.visualstudi..

웹프로그래밍/html,css 2019. 2. 25. 23:01
[html] 2.텍스트 관련 태그들 (3) 표를 만드는 태그

그리고 안녕하세요 강민성입니다. 오늘은 텍스트 관련 태그 마지막 시간으로 표를 만드는 태그에 대해서 알아보겠습니다 !! 표를 만드는 태그 표의 뼈대를 이루는 요소들, , , , 태그 table 태그는 내가 표를 만들겠다는 걸 브라우저에게 알려주는 작업입니다. 나머지 태그들은 모두 table 태그 안에 쓰시면 됩니다. tr 태그는 행을 만드는 역할을 합니다. td 태그는 각 행에 들어가는 태그로서 행마다 몇 개의 셀을 만들지 결정하는 역할을 합니다. 그리고 td 태그 안에는 표 각 셀의 들어갈 내용을 넣어주시면 됩니다. 이 때 td 대신 쓸 수 있는 th 태그가 있는데 표에 제목 셀을 만드는 역할을 합니다. 보통 표의 첫 번째 행과 첫 번째 열에 사용을 하게 됩니다. th 태그를 통해서 셀의 내용을 가운데..

웹프로그래밍/html,css 2019. 1. 19. 01:29
[html] 2.텍스트 관련 태그들 (1)

안녕하세요 강민성입니다. 저번 시간에 이어서 오늘 html 태그들에 대해서 알아보겠습니다. 먼저 텍스트를 덩어리로 묶어주는 태그부터 알아보도록 하겠습니다. 텍스트를 덩어리로 묶어주는 태그 텍스트를 덩어리로 묶어준다는 말을 전문 용어로 '블록 레벨 태그' 라고 합니다. 그 말은 이 태그로 묶어주면 자동으로 줄바꿈이 일어난다는 의미입니다. 반대말로는 '인라인 레벨 태그' 가 있습니다. 반대 개념이니 당연히 줄바꿈이 일어나지 않는 태그입니다. 제목을 표시해주는 태그 제목을 표시해주는 태그입니다. 제목을 표시하는 만큼 다른 텍스트보다 크고 진하게 표시됩니다. 종류로는 h1 ~ h6까지 여섯 종류가 있습니다. h 뒤의 숫자가 작을수록 크기가 점점 더 커집니다.123456789101112131415 제목태그 h1으..

웹프로그래밍/html,css 2019. 1. 15. 03:05
[html] html 기본문서 구조

안녕하세요 강민성입니다. 저번 시간에 이어서 html에 대해서 더 알아보고자 합니다. 저번 시간에는 여러 환경 설정을 하느라 코드를 작성해보지 못했지만 이번에는 html의 기본 태그들을 알아보도록 하겠습니다. html 의 기본을 알아보자! 지난 번 포스팅에서 알아봤던 마크업 이라는 단어 기억에 나시나요? 복습 차원에서 다시 한 번 알아보자면 마크업이란 어디가 이미지고 어디가 택스트인지 표시해주는 것을 말합니다. 그러면 html 에서 이 마크업을 어떻게 구분할까요? 바로 태그를 이용해서 표시를 해주게 됩니다. html 문서를 만들기 전에, 태그에 대해서 간단히 알아보도록 하겠습니다. 태그의 특징 1. 태그는 < 과 > 를 사용하여 구분 html 문서를 보면 두 괄호가 굉장히 많은 걸 볼 수 있을 겁니다. ..

웹프로그래밍/html,css 2019. 1. 8. 21:41