dev._.note

HTML이란? HTML은 Hyper Text Markup Language 약어로 웹의 최소 단위인 웹페이지를 만드는 언어. 다시 말해, 구조를 설계할 때 사용되는 언어로 hyper link 시스템을 가지고 있으며, 흔히 말하는 웹 페이지를 위한 마크업 언어 HTML 특징 웹 문서의 표준이다. 웹호환성과 접근성이 우수하다. 유지보수가 용이하다. 컴파일 되지 않은 텍스트 문서로서 편집이 용이하다. 별도의 전용 프로그램이 아닌 간단한 메모장과 같은 편집기로도 충분하다. 마크업 언어. 파일 용량이 작아 클라이언트-서버 간 빠른 문서 전달이 가능하다. 시스템과 운영체제에 독립적 어떤 시스템/브라우저에서도 사용이 가능하다. 구조가 단순하고 문법이 쉽다. 다른 언어들보다 단순한 구조를 가지고 있으며 연산적인 요소가 ..

Html 요소(Element)의 구조 여는 태그(Opening tag): 이것은 요소의 이름과(이 경우 p), 열고 닫는 꺽쇠 괄호로 구성. 요소가 시작(이 경우 단락의 시작 부분)부터 효과가 적용되기 시작. 닫는 태그(Closing tag): 이것은 요소의 이름 앞에 슬래시(/)가 있는것을 제외하면 여는 태그(opening tag)와 같음. 이것은 요소의 끝(이 경우 단락의 끝 부분)에 위치. 닫는 태그를 적어주지 않는 것은 흔한 초심자의 오류이며, 이것은 이상한 결과를 낳게 됨. 내용(Content): 요소의 내용이며, 이 경우 단순한 텍스트. 요소(Element): 여는 태그, 닫는 태그, 내용을 통틀어 요소(Element)라고 함. 요소(Element)의 종류 ✓ 블록 레벨 요소(block-lev..

media 관련 태그 audio, video시각화 controls사용 (controls="controls"생략가능) 속성 ▼ autoplay : 페이지 접속시 자동재생 muted : 페이지 접속시 음소거처리 loop : 반복재생 preload : 기본적으로 브라우져들은 preload를 미리 차단 auto(기본설정) - 페이지로딩시 전체 오디오파일도 같이 로드 metadata - 페이지로딩시 메타데이터(데이터를 설명하는 데이터)만 로드 none - 페이지로딩시 오디오파일을 로드하지 않음 poster : 썸네일, 영상로드가 느려지거나 재생전에 보여주는 이미지 예제 media audio 당신의 브라우져는 audio태그를 지원하지 않습니다. video 당신의 브라우져는 video태그를 지원하지 않습니다.

iframe 관련 태그 페이지내의 페이지 예제 iframe

link 관련 태그 태그의 href 속성은 링크된 페이지의 URL을 명시 _self : 링크된 문서를 링크가 위치한 현재 프레임에서 오픈함. 기본값으로 생략 가능. _blank : 링크된 문서를 새로운 윈도우나 탭(tab)에서 오픈함. _parent : 링크된 문서를 현재 프레임의 부모 프레임에서 오픈함. _top : 링크된 문서를 현재 윈도우 전체에서 오픈함. 프레임이름 : 링크된 문서를 명시된 프레임에서 오픈함. 예제1 안녕1 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quasi libero minus autem cupiditate? Quia placeat esse, minus eos optio est aspernatur? Q..

image 관련 태그 src = 넣고자하는 이미지 경로나 주소(상대경로 or 절대경로 하나로 통일해야함) alt = src의 출력이 실패하면 나오는 문구 절대크기 화면사이즈가 어떻든 적용한 크기 그대로 출력 변함없는 이미지사이즈 상대크기 화면의 크기에 따라 사진이 변화함 %로 width지정 이미지에 링크 삽입 이미지를 삽입하고 를 이용해 이미지에 링크를 삽입 이미지를 클릭!하면 링크로 이동 image link 하나의 이미지에 2개의 링크 삽입 shape이 rect(사각형)일때 네부분의 꼭지점으로 좌표설정 적용할 이미지의 너비 높이로 적용해야함

테이블(Table)이란? 여러 종류의 데이터(data)를 보기 좋게 정리하여 보여주는 표 태그를 사용하여 이러한 테이블을 작성 태그 구성 : 테이블 제목 행 : 테이블 몸통 행(내용) : 테이블 요약 태그는 테이블에서 열을 구분 태그는 각 열의 제목을 나타냄, 모든 내용은 자동으로 굵은 글씨에 가운데 정렬 태그는 테이블의 열을 각각의 셀(cell)로 나눔 브라우져명 제조사 홈페이지 크롬 Google http://google.com 사파리 Apple http://apple.com 파이어폭스 Mozilla http://Mozilla.com 브라우져 수 3 웹브라우져 표

순서 없는 목록 ul list관련 순서없는 목록 html5 css3 javascript2015 안녕 잘가 순서 있는 목록 ol 순서있는 목록 html5 css3 javascript2015 react.js vue.js L I D 결과 :5. L 6. I 9. D 설명 목록(정의 목록) dl > dt > dd (형제) 설명 목록 html 웹페이지의 정보를 담당 태그를 계층구조로 작성가능 css 웹페이지의 디자인을 담당