반응형 Mark Up11 [HTML] 태그 데이터 속성 dataset 사용하기 (ft. JS/CSS 활용) 데이터 속성 사용하기 HTML 태그에는 표준으로 정의된 속성들이 존재하는데, 데이터 속성의 경우에는 사용자가 지정한 속성을 표준화된 방법으로 제공하기 위해 제안된 것이다. 예를 들자면 개발을 하다 보면 표준 속성이 아니라 사용자 마음대로 속성을 정의해서 사용할 수가 있었는데, 아무래도 표준이 없었기 때문에 아무렇게나 사용되던 사용자 정의 속성들을 표준화하여 data-* 형식의 속성으로 정의한 것이다. HTML 문법 문법은 매우 간단하다. 어느 element나 "data-"로 시작하는 속성을 지정해서 사용할 수 있다. Javascript 에서 접근하기 Javascript에서 접근하는 방법 또한 매우 간단하다. dom을 선택하고 dataset속성을 통해 읽을 수 있다. let blog = document.g.. 2022. 9. 28. [HTML] <a> 태그로 가볍게 특정 파일 다운로드 받기 (ft. download attribute) - tag download Attribute - 태그를 통해 간단하게 파일 다운로드 하는 방법에 대해 알아보자. 태그에는 download 라는 속성이 존재하는데 이는 href에 지정된 파일을 다운로드해주는 기능이다. 이렇듯 복잡한 기능의 다운로드로는 사용을 못하고 일반 이미지, 엑셀 템플릿 등 고정된 것들에 한해서만 사용하기에 좋다. ▷ 구문 구문까지 익혔으니 실제로 어떤식으로 사용되는지 봐보자. ▷ 예제1) 태그 download 속성 기본 사용법 사용법은 구문과 별 다를게 없이 아주 간단하다. 예제에서 사용된 엑셀 뿐만 아니라 다른 여러 확장자의 파일 역시 가능하다. ▷ 예제2) 다른 이름으로 다운로드 받기 download 속성에는 filename 옵션이 존재하는데, download="filename".. 2021. 10. 3. [HTML] <datalist> 태그 - input drop down 기능 제공 - 태그란 무엇일까? - 태그는 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의하여 보여준다. 쉽게 설명하자면 태그와 태그가 짬뽕됐다고 생각해도 좋을듯하다. 제목과 마찬가지로 input에 drop down 목록을 보여주며, 미리 정의된 목록을 대상으로는 자동완성 기능도 제공된다. 예제를 통해 바로 접근해보도록하자. ▷예제1) ▶결과 코드를 보면 알겠지만 사용방법은 태그의 list 속성값과 태그의 id 속성값을 일치시켜 사용하는 것이며 결과 처럼 input 태그와 datalist의 목록을 제공하며, 자동완성 혹은 목록중 하나를 선택하는것 역시 가능하다. HTML5에서 추가된 기능이며 생각보다 사용할 수 있는곳이 많아보인다. 인터넷에 input + selectbox 기능을 제공하는 라이브러리들이 많이 존.. 2021. 8. 6. [HTML] 브라우저 캐시 초기화 하기 (feat. jsp, html) - 브라우저 캐시 삭제 및 초기화 하기 - 소소한 프로젝트나 개인 프로젝트의 경우 굳이 사용할 필요는 없겠지만 캐시 삭제 관련을 찾아본다는건 대부분 클라이언트가 있다고 생각된다. 분명 화면을 수정하였는데 직접 사용하는 클라이언트측에서는 수정사항이 전혀 적용이 안되는 상황이 발생하고는 하는데, 확인을 해보니 캐시문제여서 직접 캐시지우는 방법을 알려주곤 했다. 매번 이런식으로 할수가 없어서 코드를 이용하기도 사용한 김에 기록해두고자 한다. 두가지 방법이 있는데 html meta 태그 방식과 jsp 스크립틀릿 방식이 존재한다 코드를 통해 접해보자. ▷ 예제1) html meta 태그 방식 /*위의 명시된 날짜 이후가 되면 페이지가 캐싱되지 않는다.(1990년 이후 쭉 )*/ /*캐시된 페이지가 만료되어 삭제되.. 2020. 3. 29. [HTML] 자주쓰는 특수문자 표현 방법 (feat. 특수문자 코드표) 특수 문자가 포함된 경우 브라우저는 웹소스의 일부로 인식하여 오류가 발생하곤 한다. 예를 들어 안에 코드 형식으로 쓰고 그대로 보여주고 싶어도 소스로 인식하여 화면에 표시가 안되는 불상사가 발생하기도 한다. 그래서 해당 특수문자를 문자형식으로 표현하는 방법이 있는데 자주쓰는 것들과 전체적인 코드표를 확인해보자. [자주쓰는 특수문자] 특수문자 문자 표현 > & & " " # # ; ; ^ ^ ' ' space(띄어쓰기) 기본적으로 이정도는 자주 쓰기에 금방 눈에 익을것이다. https://dev.w3.org/html5/html-author/charref (전체 특수문자 테이블) - 특수문자 코드표 - (출처 : 이글루) 현문자 숫자표현 문자표현 설명 - �-.. 2020. 1. 29. [HTML] script(스크립트), CSS 등 변경 후 바로 적용 시키기 (feat. 쿠키, Disable cache) CSS 파일 변경 후 적용 시키기 script 부분과 css 부분을 수정하게 되면 바로 적용이 안되는 경우가 매우 많이 발생하고는 하는데 이럴때 고민없이 바로 적용시키는 방법에 대해 기록해두고자 한다. 확실한 두가지 방법이 존재하는데 (일단 시도할 때마다 됐다 나는...) 쿠키 제거 Disable cache 이 두가지 인데, 하나씩 시도해 보도록 하자. 1. 쿠키 삭제 별로 어려운 방법은 아니다. 인터넷 사용 기록 삭제하는 곳에 가서 쿠키를 포함해 전부 삭제하는것이다. 정말 확실하게 바로 적용되지만 단점은 역시 기록들이 삭제된다는 점? 2. Disable cache 이 방법은 최근에 알게된 방법인데 매번 쿠키를 삭제하다보니 너무 귀찮았는데 기회가 생겨 알게되었다. F12 혹은 개발자 도구를 직접 켜서 D.. 2019. 12. 17. [HTML] IE 문서모드 고정하기__메타태그(meta http-equiv="X-UA-Compatible") 개발을 할때 사용자의 서로다른 IE 버전에 따라 발생하는 이슈가 있다면 해결방법은 메타태그를 이용하여 IE의 문서모드를 고정하는 방법이 있다. IE 버전의 고정이 있지만 보통은 첫번째 태그 "edge"를 쓰곤 한다. edge라는건 IE 브라우저의 최신 버전의 엔진을 사용하라는 뜻이기 때문이다. 마이크로소프트 역시 IE=edge 를 권장한다고 한다. *IE9 이상에서 이나 태그 사용시 주의할 점 (출처 : 청조잡문 티스토리) IE9 이상에서는 최상위 프레임의 HTML 문서에 적은 태그의 IE 버전 엔진이 사용되며 하위 프레임의 HTML 문서에 적은 것은 무시된다. 따라서 이나 태그 안의 HTML 문서 마다 태그에 다른 버전을 적었다면 하위 프레임의 HTML 문서는 제대로 보이지 않거나 작동하지 않을 수 있다. 2019. 7. 31. [HTML]HTML5_레이아웃을 위한 시맨틱 요소( header, hgroup, nav, article, section, aside, footer ) 시맨틱 요소 시맨틱(semantic)이란 무엇일까? '의미가 있는', '의미의'라고 해석되는 단어로 HTML문에서 의미를 부여하겠다는 의도가 담겨져 있다. 웹에서 표시되는 BODY영역의 레이아웃을 살펴보면 다음과 같다. 요소 설명 header 머리말을 나타내는 요소 hgroup 제목과 부제목을 묶는 요소 nav 메뉴 부분을 나타내는 요소 article 개별 콘텐츠를 나타내는 요소 section 제목별로 나눌 수 있는 요소 aside 좌우측의 사이드바를 나타내는 요소 footer 제작자의 정보나 저작권의 정보를 나타내는 요소 *실제 사이트 구조도로 살펴보면 다음과 같다. ▷ section 요소 - 문서의 내용 부분을 나타내는 요소이다. - 하나의 section은 하나의 주제를 가지고 있으며 보통 h1~h6.. 2019. 3. 24. [HTML]HTML5_메타태그(<meta>) 메타 태그() 메타 태그란 무엇일까? 일반적으로 meta 태그의 구성 태그 안에서 name과 content 속성을 이용하여 문서가 어떤 내용을 담는지, 문서의 키워드가 무엇인지, 검색엔진 회피 방법 등을 지정할수있고 charset 속성을 이용하여 문자 인코딩 선언 형식을 변경할 수 있고 http-equiv 속성과 content 속성을 사용하여 http request 에 대한 웹 브라우저의 응답 특성을 변경할 수 있습니다. 각각의 속성과 값들이 어떻게 쓰이는지 확인해 보자 속성 값 설명 name application-name 웹의 이름을 표시 author 문자의 저자를 표시 description 문서의 설명 표시 generator 제작 툴을 표시 keywords 문서의 키워드를 표시 http-equiv c.. 2019. 3. 24. 이전 1 2 다음 반응형
