- <a> tag download Attribute -


<a>태그를 통해 간단하게 파일 다운로드 하는 방법에 대해 알아보자.

<a>태그에는 download 라는 속성이 존재하는데 이는 href에 지정된 파일을 다운로드해주는 기능이다.

 

이렇듯 복잡한 기능의 다운로드로는 사용을 못하고 일반 이미지, 엑셀 템플릿 등 고정된 것들에 한해서만 사용하기에 좋다.

 

▷ 구문

<a href='filepath' download>

 

구문까지 익혔으니 실제로 어떤식으로 사용되는지 봐보자.


▷ 예제1) <a> 태그 download 속성 기본 사용법

<a href="/template/excel_mine_sample.xlsx" download>

 

사용법은 구문과 별 다를게 없이 아주 간단하다.

예제에서 사용된 엑셀 뿐만 아니라 다른 여러 확장자의 파일 역시 가능하다.

 

▷ 예제2) 다른 이름으로 다운로드 받기

<a href="/template/excel_mine_sample.xlsx" download="record_sample">

 

download 속성에는 filename 옵션이 존재하는데,

download="filename" 을 입력함으로 실제 파일과 다른 이름으로 다운로드 제공이 가능하다.

 

1번 예제처럼 생략할 경우 실제 파일 이름으로 다운로드 받아진다.

그래서 결과는 excel_mine_sample.xlsx 로 받아졌어야 하는 파일이 record_sample.xlsx로 받아진다.


여기까지가 <a> 태그의 download 속성에 대한것이나 하나 알아둬야할게 있는데,

역시 download 속성은 IE에서는 사용이 불가능하다.

 

만약 IE에서도 가볍게 다운로드받는 기능을 사용하고 싶다면 아래 링크를 참조해보자.

 

[SPRING] 엑셀(Excel) 서식(템플릿) 다운로드 구현하기

 

[SPRING] 엑셀(Excel) 서식(템플릿) 다운로드 구현하기

- 스프링 엑셀(Excel) 서식 템플릿 다운로드 구현하기 - 일반적으로 웹 개발을 한다고 하면 엑셀 업로드 및 다운로드 기능을 자주 접하게 되는데 그럴 때마다 사용되는 게 Apache POI API를 사용하고는

mine-it-record.tistory.com


참고 : https://www.w3schools.com/tags/att_a_download.asp

반응형

- <datalist> 태그란 무엇일까? -


<datalist> 태그는 <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의하여 보여준다.

 

쉽게 설명하자면 <input> 태그와 <select> 태그가 짬뽕됐다고 생각해도 좋을듯하다.

제목과 마찬가지로 input에 drop down 목록을 보여주며, 미리 정의된 목록을 대상으로는 자동완성 기능도 제공된다.

 

예제를 통해 바로 접근해보도록하자.

 

▷예제1)

<input list="cars"/>
<datalist id="cars">
    <option value="Avante">
    <option value="Sonata">
    <option value="Tesla">
    <option value="Volvo">
</datalist>

 

▶결과


코드를 보면 알겠지만

사용방법은 <input> 태그list 속성<datalist> 태그id 속성값일치시켜 사용하는 것이며

결과 처럼 input 태그와 datalist의 목록을 제공하며, 자동완성 혹은 목록중 하나를 선택하는것 역시 가능하다.

 

HTML5에서 추가된 기능이며 생각보다 사용할 수 있는곳이 많아보인다.

인터넷에 input + selectbox 기능을 제공하는 라이브러리들이 많이 존재하는데 

비슷하다면 비슷한 기능이기에 이정도로도 충분해 보인다.

반응형

- 브라우저 캐시 삭제 및 초기화 하기 -


소소한 프로젝트나 개인 프로젝트의 경우 굳이 사용할 필요는 없겠지만

캐시 삭제 관련을 찾아본다는건 대부분 클라이언트가 있다고 생각된다.

 

분명 화면을 수정하였는데 직접 사용하는 클라이언트측에서는 수정사항이 전혀 적용이 안되는 상황이 발생하고는 하는데,

확인을 해보니 캐시문제여서 직접 캐시지우는 방법을 알려주곤 했다.

 

매번 이런식으로 할수가 없어서 코드를 이용하기도 사용한 김에 기록해두고자 한다.

 

두가지 방법이 있는데 html meta 태그 방식jsp 스크립틀릿 방식이 존재한다 코드를 통해 접해보자.


▷ 예제1) html meta 태그 방식

<meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT">
/*위의 명시된 날짜 이후가 되면 페이지가 캐싱되지 않는다.(1990년 이후 쭉 )*/

<meta http-equiv="Expires" content="-1">
/*캐시된 페이지가 만료되어 삭제되는 시간을 정의하나 특별한 경우가 아니면 -1로 설정*/

<meta http-equiv="Pragma" content="no-cache">
/*페이지 로드시마다 페이지를 캐싱하지 않는다.(HTTP 1.0)*/

<meta http-equiv="Cache-Control" content="no-cache">
/*페이지 로드시마다 페이지를 캐싱하지 않는다.(HTTP 1.1)*/

 

▷ 예제2) jsp 스크립틀릿 방식

<%
  response.setHeader("Pragma","no-cache"); 
  response.setDateHeader("Expires",0); 
  response.setHeader("Cache-Control", "no-cache");
%>
반응형


특수 문자가 포함된 경우 브라우저는 웹소스의 일부로 인식하여 오류가 발생하곤 한다.


예를 들어 <> 안에 코드 형식으로 쓰고 그대로 보여주고 싶어도 소스로 인식하여 화면에 표시가 안되는 불상사가 발생하기도 한다.


그래서 해당 특수문자를 문자형식으로 표현하는 방법이 있는데 자주쓰는 것들과 전체적인 코드표를 확인해보자.


[자주쓰는 특수문자]


 특수문자

문자 표현 

<

&lt; 

&gt; 

&amp; 

&quot; 

&num; 

&semi; 

&Hat; 

&apos; 

 space(띄어쓰기)

&nbsp; 



기본적으로


이정도는 자주 쓰기에 금방 눈에 익을것이다.


https://dev.w3.org/html5/html-author/charref

(전체 특수문자 테이블)


- 특수문자 코드표 -

(출처 : 이글루)


현문자

숫자표현

문자표현

설명

-

&#00;-&#08;

-

사용하지 않음

space

&#09;

-

수평탭

space

&#10;

-

줄 삽입

-

&#11;-&#31;

-

사용하지 않음

space

&#32;

-

여백

!

&#33;

-

느낌표

"

&#34;

&quot;

따옴표

#

&#35;

-

숫자기호

$

&#36;

-

달러

%

&#37;

-

백분율 기호

&

&#38;

&amp;

Ampersand

'

&#39;

-

작은 따옴표

(

&#40;

-

왼쪽 괄호

)

&#41;

-

오른쪽 괄호

*

&#42;

-

아스트릭

+

&#43;

-

더하기 기호

,

&#44;

-

쉼표

-

&#45;

-

Hyphen

.

&#46;

-

마침표

/

&#47;

-

Solidus (slash)

0 - 9

&#48;-&#57;

-

0부터 9까지

:

&#58;

-

콜론

;

&#59;

-

세미콜론

<

&#60;

&lt;

보다 작은

=

&#61;

-

등호

>

&#62;

&gt;

보다 큰

?

&#63;

-

물음표

@

&#64;

-

Commercial at

A - Z

&#65;-&#90;

-

A부터 Z까지

[

&#91;

-

왼쪽 대괄호

\

&#92;

-

역슬래쉬

]

&#93;

-

오른쪽 대괄호

^

&#94;

-

탈자부호

_

&#95;

-

수평선

`

&#96;

-

Acute accent

a - z

&#97;-&#122;

-

a부터 z까지

{

&#123;

-

왼쪽 중괄호

|

&#124;

-

수직선

}

&#125;

-

오른쪽 중괄호

~

&#126;

-

꼬리표

-

&#127;-&#159;

-

사용하지 않음

&#160;

&nbsp;

Non-breaking space

¡

&#161;

&iexcl;

거꾸로된 느낌표

&#162;

&cent;

센트 기호

&#163;

&pound;

파운드

¤

&#164;

&curren;

현재 환율

&#165;

&yen;

|

&#166;

&brvbar;

끊어진 수직선

§

&#167;

&sect;

섹션 기호

¨

&#168;

&uml;

움라우트

&#169;

&copy;

저작권

ª

&#170;

&ordf;

Feminine ordinal

&#171;

&laquo;

왼쪽 꺾인 괄호

&#172;

&not;

부정

­

&#173;

&shy;

Soft hyphen

?

&#174;

&reg;

등록상표

&hibar;

&#175;

&macr;

Macron accent

°

&#176;

&deg;

Degree sign

±

&#177;

&plusmn;

Plus or minus

²

&#178;

&sup2;

Superscript two

³

&#179;

&sup3;

Superscript three

´

&#180;

&acute;

Acute accent

μ

&#181;

&micro;

Micro sign (Mu)

&#182;

&para;

문단기호

·

&#183;

&middot;

Middle dot

¸

&#184;

&cedil;

Cedilla

¹

&#185;

&sup1;

Superscript one

º

&#186;

&ordm;

Masculine ordinal

&#187;

&raquo;

오른쪽 꺾인 괄호

¼

&#188;

&frac14;

4분의 1

½

&#189;

&frac12;

2분의 1

¾

&#190;

&frac34;

4분의 3

¿

&#191;

&iquest;

거꾸로된 물음표

A

&#192;

&Agrave;

Capital A, grave accent

A

&#193;

&Aacute;

Capital A, acute accent

A

&#194;

&Acirc;

Capital A, circumflex accent

A

&#195;

&Atilde;

Capital A, tilde

A

&#196;

&Auml;

Capital A, dieresis or umlaut mark

A

&#197;

&Aring;

Capital A, ring (Angstrom)

Æ

&#198;

&AElig;

Capital AE diphthong (ligature)

C

&#199;

&Ccedil;

Capital C, cedilla

E

&#200;

&Egrave;

Capital E, grave accent

E

&#201;

&Eacute;

Capital E, acute accent

E

&#202;

&Ecirc;

Capital E, circumflex accent

E

&#203;

&Euml;

Capital E, dieresis or umlaut mark

I

&#204;

&Igrave;

Capital I, grave accent

I

&#205;

&Iacute;

Capital I, acute accent

I

&#206;

&Icirc;

Capital I, circumflex accent

I

&#207;

&Iuml;

Capital I, dieresis or umlaut mark

Ð

&#208;

&ETH;

Capital Eth, Icelandic

N

&#209;

&Ntilde;

Capital N, tilde

O

&#210;

&Ograve;

Capital O, grave accent

O

&#211;

&Oacute;

Capital O, acute accent

O

&#212;

&Ocirc;

Capital O, circumflex accent

O

&#213;

&Otilde;

Capital O, tilde

O

&#214;

&Ouml;

Capital O, dieresis or umlaut mark

×

&#215;

&times;

Multiply sign

Ø

&#216;

&Oslash;

width="130"Capital O, slash

U

&#217;

&Ugrave;

Capital U, grave accent

U

&#218;

&Uacute;

Capital U, acute accent

U

&#219;

&Ucirc;

Capital U, circumflex accent

U

&#220;

&Uuml;

Capital U, dieresis or umlaut mark

Y

&#221;

&Yacute;

Capital Y, acute accent

Þ

&#222;

&THORN;

Capital Thorn, Icelandic

ß

&#223;

&szlig;

Small sharp s, German (sz ligature)

a

&#224;

&agrave;

Small a, grave accent

a

&#225;

&aacute;

Small a, acute accent

a

&#226;

&acirc;

Small a, circumflex accent

a

&#227;

&atilde;

Small a, tilde

a

&#228;

&auml;

Small a, dieresis or umlaut mark

a

&#229;

&aring;

Small a, ring

æ

&#230;

&aelig;

Small ae diphthong (ligature)

c

&#231;

&ccedil;

Small c, cedilla

e

&#232;

&egrave;

Small e, grave accent

e

&#233;

&eacute;

Small e, acute accent

e

&#234;

&ecirc;

Small e, circumflex accent

e

&#235;

&euml;

Small e, dieresis or umlaut mark

i

&#236;

&igrave;

Small i, grave accent

i

&#237;

&iacute;

Small i, acute accent

i

&#238;

&icirc;

Small i, circumflex accent

i

&#239;

&iuml;

Small i, dieresis or umlaut mark

ð

&#240;

&eth;

Small eth, Icelandic

n

&#241;

&ntilde;

Small n, tilde

o

&#242;

&ograve;

Small o, grave accent

o

&#243;

&oacute;

Small o, acute accent

o

&#244;

&ocirc;

Small o, circumflex accent

o

&#245;

&otilde;

Small o, tilde

o

&#246;

&ouml;

Small o, dieresis or umlaut mark

÷

&#247;

&divide;

Division sign

ø

&#248;

&oslash;

Small o, slash

u

&#249;

&ugrave;

Small u, grave accent

u

&#250;

&uacute;

Small u, acute accent

u

&#251;

&ucirc;

Small u, circumflex accent

u

&#252;

&uuml;

Small u, dieresis or umlaut mark

y

&#253;

&yacute;

Small y, acute accent

þ

&#254;

&thorn;

Small thorn, Icelandic

y

&#255;

&yuml;

Small y, dieresis or umlaut mark


반응형


CSS 파일 변경 후 적용 시키기


script 부분과 css 부분을 수정하게 되면 바로 적용이 안되는 경우가


매우 많이 발생하고는 하는데


이럴때 고민없이 바로 적용시키는 방법에 대해 기록해두고자 한다.


확실한 두가지 방법이 존재하는데

(일단 시도할 때마다 됐다 나는...)


1. 쿠키 제거


2. Disable cache


이 두가지 인데,


하나씩 시도해 보도록 하자.


- 1. 쿠키 삭제 -


별로 어려운 방법은 아니다.


인터넷 사용 기록 삭제하는 곳에 가서 


쿠키를 포함해 전부 삭제하는것이다.


정말 확실하게 바로 적용되지만 단점은 역시 기록들이 삭제된다는 점?



- 2. Disable cache -


이 방법은 최근에 알게된 방법인데


매번 쿠키를 삭제하다보니 너무 귀찮았는데 기회가 생겨 알게되었다.


F12 혹은 개발자 도구를 직접 켜서


Disable cache를 체크해준다음


[F12] - [Network] - Disable cache


새로고침을 눌러주면


바로 적용이 되는것을 확인할 수 있다.


꼭 개발자도구가 켜있는상태에서 새로고침을 해야한다.



이제서야 적용이 안되어 짜증났던


 그 시절과 작별이다.

반응형
  1. 이창민 2020.12.29 13:26

    덕분에 잘 해결했습니다 감사합니다

개발을 할때 사용자의 서로다른 IE 버전에 따라 발생하는 이슈가 있다면 해결방법은

메타태그를 이용하여 IE의 문서모드를 고정하는 방법이 있다.


<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta http-equiv="X-UA-Compatible" content="IE=9" />

<meta http-equiv="X-UA-Compatible" content="IE=8" />

...


IE 버전의 고정이 있지만 보통은 첫번째 태그 "edge"를 쓰곤 한다.

edge라는건 IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이기 때문이다.

 

마이크로소프트 역시 IE=edge 를 권장한다고 한다.

 

*IE9 이상에서 <iframe>이나 <frame> 태그 사용시 주의할 점 (출처 : 청조잡문 티스토리)

 

IE9 이상에서는 최상위 프레임의 HTML 문서에 적은 <meta> 태그의 IE 버전 엔진이 사용되며 하위 프레임의 HTML  문서에 적은 것은 무시된다.

따라서 <iframe>이나 <frame> 태그  안의 HTML 문서 마다 <mata> 태그에 다른 버전을 적었다면 하위 프레임의 HTML 문서는 제대로 보이지 않거나 작동하지 않을 수 있다.

 

반응형