Skeleton의 세상

지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 데이터 바인딩 [ITSkeleton][vue.js] 데이터 바인딩 지난 글에 이어서 데이터 바인딩에 대하여 한번 알아봅시다 지난글: [Vue.js ( nuxt.js )] - [ITSkeleton][vue.js] 기초 (Hello World!) [ITSkeleton][vue.js] 기초 (Hello World!) 기초중의 기초인 Hello World.. itskeleton.tistory.com 지난글에 이어서 이번에는 v-for를 이용하여 열거 하는 방법을 한번 알아보려합니다. 쉽게 얘기해서 열거는 빠르게 HTML을 작성하도록 도움을 줍니다 아래와 같은 HTML 코드가 있습니다 Hello1 Hello2 Hello3 He..

기초중의 기초인 Hello World를 작성해서 화면에 띄워봅시다 visual code를 통해서 만들어도 상관은 없지만 웹에서 바로 작성해서 확인해 볼 수 있는 JSFiddle을 사용하여 작성해 보겠습니다 jsfiddle.net 에 접속을 합니다 jsfiddle.net/ JSFiddle - Code Playground jsfiddle.net 접속하면 위의 화면이 나타나는데 왼쪽 아래 저 부분을 클릭하여 FRAMEWORKS & EXTENSIONS 해당 필드를 클릭합니다 vue 2.2.1을 선택해줍니다 그후 HTML영역에 다음과 같이 작성해 줍니다 {{ 'Hello ' + 'world' }} Javascript 영역에 아래 코드를 작성해 줍니다 new Vue({ el: '#app' }) 이렇게 작성후 run..

, , 요소 소개 : 다른 페이지로의 이동(일반적으로 ‘사이트 네비게이션’이라 한다.) 또는 같은 페이지에서 섹션으로 이동(흔히, 긴 글에 사용되는 ‘컨텐츠 내용 목록’을 일컫는다.)을 위한 네비게이션 링크 목록을 담는 섹션입니다. 이것은 주요한 네비게이션 구역이지, 단지 링크만 포함하는 의미없는 그룹을 말하는 것이 아닙니다. 그리고 대개 “skip navigation” 링크를 사용하고 있을 것입니다 : 주위의 내용과 분리는 되지만 아주 약간의 관련성이 있는 컨텐츠를 구성하는 페이지의 섹션을 말합니다. 인쇄본에서는 사이드바, 글의 발췌, 또는 각주 부분을 말하고, 웹 블로그 글에서는 글에 대한 관련된 정보, 여백을 메우는 추가 정보, 또는 코멘트 섹션을 말합니다 : 문서의 내용에 어떠한 영향도 미치지 않..

HTML5의 구조적인 마크업 요소를 위한 div, section, article 에 대해 알아봅시다 div, section, article 요소 소개 : 가장 많이 이용하는 통상적인 컨텐츠 그룹. 단지 컨텐츠의 흐름만 형성하는 요소 : 통상적인 문서 또는 어플리케이션의 섹션(구획)을 형성하는 요소로, 대부분 항상 heading 요소들과(가끔은 heading 요소들을 로 감싸기도 한다), 때때로 요소와도 함께 사용되기도 합니다. 홈페이지의 뉴스 부분처럼 페이지의 주요 부분인, 긴 글의 세부사항과 같은 관련 컨텐츠의 묶음, 또는 탭 키 사용을 요하는 인터페이스를 가진 웹 어플리케이션에서의 페이지의 묶음 단위 : 문서나 사이트에서 독립적인 부분입니다. 이 부분을 다른 곳에 옮기더라도 분리되어 지고, 또 의미가..

표를 만드는 태그들을 한번 알아봅시다! 테이블 태그 - 기본적인 테이블 See the Pen YzqzvXJ by 정천일 (@skySkeleton) on CodePen. rowspan 은 자신을 포함한 아래의 n칸을 합쳐줍니다 colspan은 자신을 포함한 오른쪽 n칸을 합쳐줍니다 - 표에 제목 See the Pen zYqYaBE by 정천일 (@skySkeleton) on CodePen. - 표 구조 정의 See the Pen gOrOKwN by 정천일 (@skySkeleton) on CodePen. - 여러 열 묶어 스타일 지정 See the Pen YzqzvNd by 정천일 (@skySkeleton) on CodePen.

목록을 만드는 태그 - 순서 없는 목록 순서가 필요하지 않은 목록을 만들때 태그를 사용합니다 태그 안에는 태그를 이용하여 각 항목을 표시합니다 아래의 코드를 보시죠! See the Pen MWyWQpm by 정천일 (@skySkeleton) on CodePen. - 순서 목록 항목을 나열하되 순서가 필요한 목록을 만들때 태그를 이용합니다. 코드를 통해 알아보죠! See the Pen abNbqLG by 정천일 (@skySkeleton) on CodePen. type이라는 형태가 존재합니다 1 : (숫자) 기본값입니다 a : 영문 소문자 A : 영문 대문자 i : 로마 소문자 I(대문자 i) : 로마 대문자 - 설명 목록 태그는 사전 구성처럼 '제목'과 '설명'이 한쌍인 설명 목록을 만듭니다. 아래의 코드..

.html() 메서드는 선택한 요소의 내용을 새로운 HTML 요소로 변경합니다 간단히 코드를 통해 알아보겠습니다 ITSkeleton 입니다. 반가워요 이러한 HTML 코드가 있다고 가정해봅시다 스크립트는 $("p").html("새롭게 변경된 값입니다"); 위와 같이 적어주면 p가 div로 변경됩니다. .text() 메서드는 선택한 요소가 text일 경우 사용할 수 있는 간단히 텍스트만 바꾸는 메서드 입니다. 사용방법은 간단히 코드를 통해 알아봅시다 ITSkeleton 입니다. 반가워요 위와 같은 HTML코드가 있다고 가정해봅시다 스크립트는 $("p").text("텍스트만 변경된것을 알 수 있습니다"); 이렇게 적어준다면 p의 텍스트를 스크립트에 적은 텍스트로 변경해줄 수 있습니다.

변수에 요소 값 저장을 하는 방법은 아래와 같습니다. 사과 오렌지 파인애플 이러한 html 코드가 있다고 가정해 봅시다 var fruit = $(".fruit"); $("#result").text("과일 갯수" + fruit.length); 스크립트 코드로 이렇게 적게되면 id가 result인 html에 과일 갯수가 표기됩니다. 이렇게 저장된 요소들은 변수에 저장될 당시의 요소들만 저장됩니다 그렇기때문에 요소가 저장된 이후에는 추가되거나 삭제된 요소들을 자동으로 갱신되지 않습니다

티스토리의 장점중 하나인 자유로운 페이지 제작! 어떻게 하는지 한번 알아볼까요! 먼저 기존 스킨을 변경하는 방법에 대하여 알아봅시다 티스토리의 관리자로 들어갑니다 꾸미기에서 스킨 변경을 누른뒤 스킨들을 선택하고 변경하면 됩니다. 다음은 변경된 스킨을 내 입맛대로 변경할 수 있는 스킨편집이 있습니다 스킨 편집을 클릭해줍니다. 이러한 화면이 나옵니다. 왼쪽의 화면은 적용이 되어있는 각 화면들을 미리볼 수 있습니다. 왼쪽 맨위에 있는 선택으로 홈, 글, 카테고리등 각 화면들을 확인할 수 있습니다 여기서 html편집을 클릭합니다 현재 나의 티스토리의 각 관련 컨텐츠들을 수정하고 적용할 수 있습니다. 간단히 HTML과 CSS를 이용하여 작업할 수 있습니다. 파일 업로드를 통하여 작업한 파일을 통째로 올려버릴 수도..

html파일에는 이와 같이 작성해 줍니다 Start Recording Play Download 그리고 js파일을 하나 만들어줍니다. 저는 main이라고 이름을 지었고 경로설정하는 방법은 따로 설명하지 않겠습니다. 위에 src를 이용하여 접근 합니다~ main.js var mediaSource = new MediaSource(); mediaSource.addEventListener('sourceopen', handleSourceOpen, false); var mediaRecorder;var recordedBlobs;var sourceBuffer; var gumVideo = document.querySelector('video#gum');var recordedVideo = document.querySelec..