Skeleton의 세상

, , 요소 소개 : 다른 페이지로의 이동(일반적으로 ‘사이트 네비게이션’이라 한다.) 또는 같은 페이지에서 섹션으로 이동(흔히, 긴 글에 사용되는 ‘컨텐츠 내용 목록’을 일컫는다.)을 위한 네비게이션 링크 목록을 담는 섹션입니다. 이것은 주요한 네비게이션 구역이지, 단지 링크만 포함하는 의미없는 그룹을 말하는 것이 아닙니다. 그리고 대개 “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) : 로마 대문자 - 설명 목록 태그는 사전 구성처럼 '제목'과 '설명'이 한쌍인 설명 목록을 만듭니다. 아래의 코드..

이번글에서는 텍스트 관련 태그들을 설명하겠습니다 여러가지의 태그가 존재하는데요. 하나씩 알아보도록하죠! 텍스트 블록 전체 처리하는 태그 - 제목 텍스트 제목 텍스트는 일반 텍스트보다 크고 진하게 표시됩니다. 아래의 코드를 살펴보세요! See the Pen GRZRygy by 정천일 (@ttaogvmy) on CodePen. - 단락 텍스트를 표현할때 많이 표현하는 태그가 태그 입니다. 텍스트의 단락을 만드는데 이때 단락은 한줄 한줄을 의미합니다 아래의 코드를 통해 좀더 자세히 알아보실까요 See the Pen XWdWVNm by 정천일 (@skySkeleton) on CodePen. - 줄 바꾸기 단락에서 줄을 바꾸기 위해서 사용됩니다. 아래 코드를 보면서 이해해 봅시다!! See the Pen BaKa..

DropDwonList를 만드는 방법은 아래와 같습니다. select와 option으로 만들면 쉽게 만들 수 있습니다. 선택 //기본 선택 1 //선택지 2 //선택지 3 //선택지 위와 같이 작성한다면 아주 기본적인 디자인의 드롭다운이 만들어 질텐데요! css를 변경하여 모양을 쉽게 다듬을 수 있습니다. css를 통하여 변경하는 방법에 대해서는 다른 포스팅으로 찾아뵙도록 하겠습니다.

안녕하세요. ITSKeleton 입니다. HTML에 를 사용하여 비디오를 삽입하는 방법에 대하여 간단하게 설명해 드리겠습니다. HTML 5 이상에서 사용이 가능합니다. 와 같이 사용하시면 됩니다. 여기서 주의 하실점은 video에서 지원하는 포멧은 MP4, OGG, WEBM 입니다. 이외의 포멧은 지원하지 않으니 주의하셔서 사용하세요. controls : 컨트롤러 사용 autoplay : 자동시작 loop : 반복실행 preload : 페이지가 열리면 비디오를 미리 로드해 둠 poster : 비디오가 로드 되기전에 보여줄 이미지 width : 넓이 height : 높이

폼은 정보를 입력받는 요소들의 집합이라 볼 수 있습니다. 입력이 기본적으로 이루어지게끔 구성되어있기 때문에 입력한 값을 받아서 처리하는 메소드와 속성들이 존재합니다. 1. form태그의 구성 action : 폼을 전송할 서버 쪽 스크립트 파일 name : 폼을 식별하기 위한 이름 accept-charset : 폼 전송에 사용할 문자 인코딩 target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정 method : 폼을 서버에 전송할 http 메소드 (get, post) 2. 엘리먼트 , 폼에서는 왠만한 input태그들을 모두 사용할 수 있습니다. 그런데 여기서 과 가 무엇일까요? 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용합니다. 태그는 그룹화한..

canvas를 사용하는 방법에 대하여 알아보겠습니다. 위와 같은 canvas를 하나 만들어 주었습니다. 스타일은 정말 간단하게 이렇게 적어두겠습니다. 그럼 검은선의 100x100 의 사각형 canvas가 만들어 집니다. 이안에 사각형을 만들어보겠습니다. var meCanvas = document.getElementById('myCanvas'); if (meCanvas.getContext) { //여기서 canvas를 제대로 가져왔는지를 판별합니다. var ctx = meCanvas.getContext('2d'); ctx.fillRect (10, 10, 50, 50); // 좌표 x: 100, 좌표 y: 100 인곳에서부터 오른쪽으로 넓이가 50인 사각형을 만듭니다. // 여기서 사각형은 안이 색으로 채워..

Canvas태그에 관하여 알아보자. canvas 태그는 간단히 말해 그림판 같은거라 생각하면 편합니다. 점과 점사이를 연결하는 선이나 사각형 여러 도형을 그릴때 편하게 그릴 수 있습니다. canvas의 css가 아닌 width와 height는 픽셀 단위입니다. 예를들어 canvas { width: 500px; height: 500px; } css를 이렇게 작성해 주었다고 가정합니다. 그럼 넓이가 500픽셀 높이가 500픽셀인 canvas가 생성됩니다. 그후 이런 캔버스를 만들었다고 가정한다면 홈페이지에서의 화면에서는 500x500으로 고정되어 보이지만 canvas태그 내부에서는 넓이1000px 높이1000px을 사용가능합니다. 이해가 잘 안되신다면 실전을 통하여 알아봐야겠죠? 여기서는 canvas가 어떤..