본문 바로가기

HTML8

[html ] data- 속성 (ft. dataset, data-key, data property) html에 태그 안에 의미있는 속성을 추가하여 자바스크립트로 접근가능한 재미있는 기능, data 속성을 소개합니다. data- 속성 의미론적 HTML 요소에 추가 정보를 저장할 수 있도록 해줍니다. 사용법은 태그 안에 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 자바스크립트와 css로 특정 html 요소에 접근이 가능합니다. blue pink 자바스크립트에서 data 속성 접근 dataset을 통해 접근합니다. 이벤트 위임을 통해 부모에 이벤트를 등록하여, 여러 하위 요소 중 event.target으로 action을 일으킨 특정 요소에만 접근할 수 있습니다. 인터넷 익스플로어10 이하는 dataset을 지원하지 않아 getAttribute()를 대신 사용합니다. let btn = docum.. 2021. 9. 4.
[css] block, inline의 뜻과 사용법(ft. display, inline-block) CSS, display의 block과 inline의 개념과 사용법에 대하여 알아보겠습니다. display display 속성이란 화면을 배치하는 방법입니다. display 종류 none | contents | block | inline | inline-block | table | table-cell block과 inline 요소의 개념을 잡는 것은 html 마크업 요소에서 가장 중요하다고 할 수 있습니다. 그래서 이번 기회에 확실하게 짚고 넘어가겠습니다. 이 두 가지의 요소에 따라 전체 레이아웃이 변합니다. block 요소 block 요소는 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지합니다. 즉, 해당 요소의 너비가 100%라는 의미입니다. 따라서 그 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수.. 2021. 5. 24.
[css] reset css 기본값 코드(ft. 기본 css 세팅) 사이트를 제작할 때 css 작업 초기에는 reset css 자료를 꼭 찾게 됩니다. 기본 reset css 코드를 소개하겠습니다. Reset CSS 스타일 초기화를 위한 css 기본값 Eric Meyer’s “Reset CSS” 2.0 css 코드 /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q.. 2021. 1. 25.
[css] float 속성( float:left clear: both ::after) (ft. 실무사용 꿀팁) 홈페이지 레이아웃을 할 때 꼭 알아야 할 속성입니다. 블로그의 메인 페이지도 float: left 속성을 사용하였습니다. float: left에 width는 31%, 나머지는 마진에 퍼센트를 주어 100%로 만들었습니다. 최근에는 플렉서블 박스 레이아웃(flexible box layout) 이란 그리드 레이아웃을 이용하여 매우 간편하게 위치를 변형할 수 있지만, 브라우저별로 지원의 한계가 있기 때문에 아직까지는 float속성을 이용한 레이아웃을 더 많이 사용하고 있습니다. 그래서 오늘은, flaot 속성에 대하여 이야기하겠습니다. float 속성은 웹요소를 문서 위에 떠있게 만듭니다.(=부유하다.) float의 성격 · block 의 성격을 무시합니다. · 형제 구조로 이루어져있습니다. · 해당 요소들의.. 2020. 9. 25.
[css] background속성 한번에 사용하기 css 사용의 필수템 background 속성에 대하여 알아보겠습니다. background 속성은 배경을 지정하는 속성으로 해당 영역에 컬러 또는 이미지를 삽입할 때 주로 사용합니다. background 속성 종류 · background-color : 배경색 · background-image : 배경 이미지 · background-repeat : 배경 이미지 반복여부 · background-size : 배경 이미지 크기 조절 · background-position : 배경 이미지 위치 조절 한 번에 사용하는 background 속성: background: url('image 경로') no-repeat center center; background-size: contain 또는 cover; 위의 소스가 제.. 2020. 9. 16.
[js/jQuery] 기본편_카운트업 숫자 올라가는 효과 구현 (ft. 숫자 자동 증가) 숫자 카운트업 효과를 setInterval, clearInterval 메서드를 이용하여 구현하겠습니다. 실무에서 홈페이지 또는 배너에 숫자가 자동으로 올라가는 효과를 종종 사용합니다. setInterval() / clearInterval() 일정한 시간 간격으로 코드를 실행하는 메서드는 setInterval()과 setTimeout()가 있습니다. setInterval과 clearInterval은 서로 짝꿍이라서 보통 같이 사용합니다. setInterval()은 일정한 시간 간격으로 코드를 반복적으로 실행하고, setTimeout()은 일정한 시간 후에 코드를 한 번만 실행하고 종료됩니다. setInterval() : - 코드를 일정 시간 간격으로 반복 실행 - 기본형: setInterval(functi.. 2020. 6. 9.
반응형

티스토리툴바