코딩/HTML 검색 결과
6 개의 검색 결과가 있습니다.
코딩/HTML

HTML data 속성

1. data-* 속성이란? data-* 속성은 사용자 지정 데이터 특성(custom data attributes)이라는 특성 클래스를 형성함으로써 임의의 데이터를 스크립트로 HTML과 DOM 사이에서 교환할 수 있는 방법입니다. 모든 사용자 지정 데이터는 해당데이터를 지정한 요소의 HTMLElement 인터페이스, dataset 속성을 통해 사용할 수 있습니다. 2.data-* 특징 dataset을 통하여 값을 가져갈 때 속성에 접근하는 방법은 data 속성의 data- 부분을 뺀 뒷부분만 사용하며 사용하는 부분의 첫번째 영단어는 소문자로, 두번째는 단어의 첫글자는 대문자로 표기합니다.(camelCase로 변환하기 때문입니다.) 다시 말하자면, dataset은 자바스크립트이기 때문에 속성명을 camel..

2020. 9. 16. 10:34
코딩/HTML

Attribute, Property

1. Attribute란? 속성이란 뜻을 지닌 attribute는 html문서에서 elements에 추가적인 정보를 넣을 때 사용되는 요소입니다. 위의 div태그의 "my-class"라는 클래스 속성을 볼 수 있는데, div태그는 element(요소)이고, class는 attrubute(속성)가 되며, my-class는 value(값)가 됩니다. 2. Property란? 특성이란 뜻을 지닌 property는 html dom 안에서 attribute를 나타내는 표현입니다. Our DIV node |- nodeName = "DIV" |- className = "my-class" |- style |- ... |- ... 위는 1. Attribute 의 코드를 DOM으로 나타낸 것입니다. className은 곧..

2020. 7. 16. 23:20
코딩/HTML

HTML history.back, history.go()

웹 브라우저 간에 페이지 이동 기능이 있는데 이번 포스팅에서는 뒤로가는 기능에 대해 알아보려 합니다. 대표적으로 history.back()과 history.go() 기능이 있습니다. 둘의 기능은 홈페이지를 이동시키는 기능이 있는데요, history.back()은 현재 페이지 기준으로 이전페이지로 돌아가는 기능이 있습니다. history.go()는 history.back()과는 다르게 현재 페이지 기준 앞의 페이지로, 또는 이전페이지로 이동할 수 있습니다. 사용방법은 history.go(숫자)인데, 음수를 넣으면 이전페이지로, 양수를 넣으면 앞의 페이지로 이동합니다. 예제를 통해 확인해보겠습니다. 1. history.back(), history.go() 페이지 1부분, 페이지1 페이지 2부분, 페이지2 페..

2020. 7. 7. 23:11
코딩/HTML

html label

label태그를 텍스트나 사진에 설정하면 그 요소를 클릭하더라도 연결된 요소를 선택할 수 있어 사용자에게 편리한 기능입니다 예제를 통해 설명하겠습니다. 김밥 떡볶이 튀김 오뎅 위는 input의 id를 통해 label을 설정하였습니다. label for = "..." 의 형식인데, "..."에 input의 id를 입력하면 됩니다. 그렇게되면 텍스트를 클릭하기만해도 체크박스에 체크가 되어있는 것을 확인 할 수 있습니다. 위의 사진에 네모칸에 체크박스에 클릭을 하지 않고 '김밥'이라는 텍스트에 마우스 클릭을 하면 체크가 되어있는것을 확인할 수 있습니다.

2020. 7. 3. 23:47
코딩/HTML

html ol, ul

ol 과 ul의 자녀태그에는 li태그만 사용이 가능합니다. ol(ordered list)은 순서가 있는 리스트, ul(unordered list)은 순서가 없는 리스트입니다. 1. ol(ordered list) 떡볶이 순대 튀김 오뎅 만두 순서가 있는 리스트로, 번호가 표시됩니다. ↓출력결과↓ 2. ul(unordered list) 떡볶이 순대 튀김 오뎅 만두 순서가 없는 리스트로, 번호 대신 동그란 원이 표시됩니다. ↓출력결과↓ 3. ol + ul 떡볶이 배 튀김 오징어튀김 야채튀김 치즈스틱 모짜렐라 치즈스틱 체다치즈스틱 믹스치즈스틱 오뎅 만두 ↓출력결과↓

2020. 7. 1. 23:54
코딩/HTML

HTML div, span, p이란?

div, span, p는 태그의 종류이며, 보통 div태그, span태그, p태그라고 불립니다. 세가지 태그에 대해 알아보겠습니다. 1. p태그 p태그는 paragraph의 앞글자를 딴 것으로 글자그대로 문단을 뜻합니다. p태그 안에 들어가는 문장은 하나의 문단으로 출력이 되며, p태그 밖에서는 약간의 간격을 유지합니다. 라면 김밥 떡볶이 돈가스 제육덮밥 카레 삼겹살 차돌박이 곱도리탕 출력결과↓ 2. div태그 division의 줄임말인 div태그는 직역하면 분할하다 라는 의미가 있습니다. 이는 출력시 div태그가 속해있는 데이터의 줄을 전부 div의 영역입니다. 라면 김밥 떡볶이 돈가스 제육덮밥 카레 삼겹살 차돌박이 곱도리탕 출력결과↓ 3. span태그 span태그는 inline으로 주어진 데이터만큼만..

2020. 6. 25. 15:55