Enjoy Programming

간만에 html tag 를 기록한다. 기존 개발시에 게이지 바 같은 폼을 만드려면 주로 input tag를 custom 해서 쓰거나 빈태그 두개를 css만 주고 채워질 게이지의 width만 prop으로 전달해서 눈속임의 게이지 바를 만들었었다. 오늘 새로운 태그를 하나 알게 되었는데 혁명이다... https://developer.mozilla.org/ko/docs/Web/HTML/Element/progress - HTML: Hypertext Markup Language | MDN HTML 요소는 어느 작업의 완료 정도를 나타내며, 주로 진행 표시줄의 형태를 띕니다. developer.mozilla.org 바로 progress tag! 작업의 완료 정도를 value로 전달하고 max치만 조절 해주면 알아서..

자바스크립트로 키보드 드럼만들기를 하던중 data-key속성을 접하게 되었다. 이를 알아보려고 mdn을 뒤지니 아에 data-로 시작하는 속성이 있어서 포스팅한다. HTML5는 특정 요소와 연관되어 있지만 확정된 의미를 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인 되었다. data-*속성은 표준이 아닌 속성이나 추가적인 DOM속성, Node.setUserData()와 같은 다른 조작을 하지 않고도 의미론적인 표준 HTML요소에 추가 정보를 저장할 수 있도록 해준다. 문법은 간단하다. 어느 element에나 data-로 시작하는 속성은 무엇이든 사용할 수 있다. 화면에 안보이게 글이나 추가정보를 element에 담아 놓을 수 있다. 이런식으로 추가정보를 저장한다. 이것을 자바스크립트에서 접..

아주 중요한 태그이다. 유저가 입력한 데이터를 수집하기 위해 사용되며 input, textarea, button, select, checkbox, radio button, submit button등의 입력 양식 태그를 포함한다. 웹페이지 만들때 꼭 들어간다? 고 봐야 한다. 서버사이드와 연결한다. 페이지에 로드될 정보라던지 유저가 요청한 데이터를 서버에서 가져오고 유저가 입력한 정보를 서버로 전송도 한다. attribute 는 action 과 method가 있는데 action은 URL을 값으로 가지며 입력 데이터 (form data)가 전송될 url을 지정한다. method는 입력데이터의 전달 방식을 지정한다 GET / POST 방식이 있다. GET get 방식은 전송 url에 데이터를 query str..

페이지에 이미지 삽입시 img태그를 이용하자 attribute는 src : 이미지 파일 경로 alt : 이미지 파일이 null일경우 표시 되는 텍스트 width : 이미지 너비 height : 이미지 높이 사운드 관련 삽입시 autido 태그 attribute는 src: 경로 , preload : 재생 전에 파일을 모두 불러올지 지정 , autoplay : 자동 재생 , loop : 반복 , controls : 재생도구 표시 브라우저 별로 지원하는 음악파일 형식이 다르니 꼭 확인하자. 영상 삽입시 video태그를 쓰자 attribute src: path , poster : 준비중 표시될 이미지 파일 경로, preload : 재생 전에 동영상 파일을 모두 불러들일지 결정 autoplay : 자동재생, lo..

html에는 list를 표현하기 위해 크게 두가지의 형태의 태그가 있다. ul 과 ol ul 은 unordered list - 순서가 없이 그냥 리스트를 표현해준다 ol 은 order list로 순서를 표기해준다 ol안에 li태그가 5개가 있다면 작성한 순서로 1,2,3,4,5가 li태그 앞에 붙어나온다. type attribute를 사용하여 순서를 나타내는 문자를 지정 가능하다. 또한 start attribute로 리스트의 시작값을 임의로 지정 할 수 있다. reversed attribute를 지정하면 순서를 역으로 표현한다 ul 과 ol은 중첩이 가능하다. 주로 nav메뉴를 만들때 주로 사용된다. 그리고 html에서 표를 만들때 사용하는 table태그가 있는데 이제 잘 안쓴다 주로 div를 활용해서 ..