Fall in IT.

안녕하세요, 오늘은 HTML 태그 중 A tag의 download 속성을 사용해 파일을 다운로드할때 발생하는 문제에 대해서 알아보겠습니다. 상황 AWS에 업로드된 파일의 URL을 a tag의 download 속성을 이용하여 다운로드 하고자 한다. 그런데, AWS의 올라간 파일명과 다르게 다운로드 되도록하고자 한다. a tag의 download 속성을 사용하여 filename을 명시해주었다. 다운로드 ​ 문제 a tag의 download 속성에 설정한 filename이 적용되지 않았다. 원인 확인해보니 a tag의 download 속성은 두 가지 조건이 충족되어야했다. Same Origin URL (동일 출처) blob, data schemes 에서만 작동 해결방안 http header에 Content-D..

HTML의 select 태그 사용시 기본값을 설정하는 방법 예제 ``` 선택해주세요. 아빠 엄마 ``` 참조 https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element How can I set the default value for an ..

box-sizing 이란? 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성 box-sizing 속성을 사용하면 엘리먼트의 패딩과 테두리가 너비에 영향을 주지 않습니다. 이렇게 하면 모든 엘리먼트가 직관적인 방식으로 크기가 설정되기 때문에 아에 전역 설정으로 사용하곤 합니다. * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } box-sizing 설정 값 box-sizing: content-box | border-box | initial | inherit content-box border와 padding을 제외하고 content 영역을 기준으로 박스 사이즈가 결정된다. border-box..

안녕하세요. 오늘은 CSS에서 background-repeat 속성에 대해서 간단히 알아보도록 하겠습니다. background-repeat이란?background-repeat으로 배경 이미지의 반복 여부 또는 반복 방향을 정할 수 있습니다.특정 패턴의 이미지를 width의 길이에 상관없이 반복하고자할 경우 사용합니다. 아래와 같은 패턴이 반복될 경우, 작은 패턴의 이미지를 하나 만들고 background-repeat을 사용해 구현할 수 있습니다. 예제 코드 body { width: 100%; background-image: url("이미지 경로 입력"); background-repeat: repeat-x; // repeat-y, no-repeat 등의 옵션 사용 가능 } 참조https://www.w3sc..

안녕하세요. 오늘은 html Input 태그 type password, tel 두 가지 사용하는 방법에 대해서 알아보겠습니다. 상황에 따라서 input 태그의 타입을 password와 tel(또는 number)과 같이 두 가지를 사용하고 싶을때가 있다.예를들어, 주민등록번호 뒷자리를 입력받는다고 할때 password가 노출되지 않도록 하면서 사용자에게 숫자 키패드를 보여주고 싶은 경우가 있다. 이때, 해결할 수 있는 방법은 여러가지가 있다. input 태그를 2개 만들어서 처리하는 방법 -webkit-text-security 속성을 사용하여 처리하는 방법 이 글에서는 -webkit-text-security 속성을 사용하여 해결 해보도록 하겠습니다. input 태그에서 type을 password와 tel ..

안녕하세요. 웹 작업을 하거나 하이브리드앱을 만들때 checkbox 또는 radio 버튼을 커스터마이징 해야하는 경우가 많습니다.이때 간단하게 checkbox 디자인을 변경하는 방법에 대해서 알아봅니다. 체크박스 custom 디자인 순서HTML을 사용하여 기본 체크박스 만들기CSS를 사용하여 기본 체크박스 없애기CSS를 사용하여 디자인한 체크박스 만들기 체크박스 만들기 HTML구독신청 체크박스 만들기 CSS.checkbox-container {position: relative;} // 기본 체크박스 없애기.checkbox-container input[type="checkbox"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;ove..

안녕하세요. 오늘은 패딩 영역은 제외하고 백그라운드 색상 입히는 방법에 대해서 알아보도록 하겠습니다. 패딩 영역은 제외하고 백그라운드 색상 입히는 방법간단히 background-clip 속성을 사용하여 해결할 수 있습니다.아래 예제를 참고해주세요. 소스코드background-clip 속성을 사용하지 않았을 경우 background-clip 속성을 사용했을 경우 참조https://stackoverflow.com/questions/5896351/how-to-background-a-div-without-the-padding-area 모두 즐거운 코딩하세요~

안녕하세요. 오늘은 태그를 가운데 수직 가운데 정렬하는 방법에 대해서 알아보겠습니다. 태그 수직(horizontal) 가운데 정렬하는 방법parent의 div position이 relative, child의 div position이 absolute 일 경우 - sample code) Document .parent { position: relative; width: 500px; height: 500px; border: 3px solid tomato; } .child { width: 200px; height: 200px; border: 3px solid green; margin: auto; position: absolute; top: 50%; left: 50%; transform: translateX(-50..

안녕하세요. 오늘은 태그를 가운데 수평 가운데 정렬하는 방법에 대해서 알아보겠습니다. 태그 수평(horizontal) 가운데 정렬하는 방법parent div 와 child div 의 position이 기본(static) 또는 relative일 경우 (아래 코드 참조) - sample code) Document .parent { border: 4px solid tomato; width: 700px; height: 700px; } .child { border: 2px solid gold; width: 200px; height: 200px; margin: 0 auto; } 결과child의 div position이 absolute 일 경우 - sample code ) Document .parent { posit..

안녕하세요. 오늘은 rem과 em에 대해서 간단하게 알아보도록 하겠습니다. em이란?길이가 유연한 가변 단위. media query와 함께 사용하면, 뷰포트의 크기에 따라 길이를 가변적으로 핸들링 할 수 있습니다.상위 엘리먼트의 폰트 사이즈를 기준으로 적용되는 방식 (정확히는, 실제 사용된 요소의 폰트 크기와 직접 연관 된다고 합니다.) - 자세한 내용 rem이란?길이가 유연한 가변 단위.media query와 함께 사용하면, 뷰포트의 크기에 따라 길이를 가변적으로 핸들링 할 수 있습니다.최상위 엘리먼트(html)의 폰트 사이즈를 기준으로 적용되는 방식 px로 사이즈를 지정할 경우?절대값으로 사용되는 단위. 뷰포트의 크기에 상관없이 고정된 값으로 렌더링 됩니다. rem을 사용하는 경우요소에 크기가 절대 ..