K_blueprint

목  차1. 시맨틱 웹2. 시맨틱 태그의 종류(feat. 문서 구조화 예시)3. 시맨틱 블록 태그1. 시맨틱 웹- 현대 사회는 정보 탐색이 중요하기 때문에 읽는 사람이 글을 읽기 용이해야 하고, 그만큼 구조화를 통해 각 구조들을 이용한 효율적인 정보 전달이 가능하도록 하는 것이 중요하다. - 검색 엔진이 좋아하는 웹 사이트가 가치가 올라가기 마련인데, 구글 검색 엔진의 경우 웹 페이지에서 `' 시맨틱 인라인 태그 알아보기 이 문장에는 mark태그가 사용됩니다. 지금 시각은 10:15입니다. 현재의 진행도는 20%입니다. 포스팅 글을 올리는 중입니다...(30%)   (브라우저 화면)     ※ 해당 게시글은..

목  차 미디어의 표준화비디오 삽입( '' )오디오 삽입( '' ) 1. 미디어의 표준화- HTML5 이전에는 오디오 혹은, 비디오를 재생하기 위해 브라우저에 '플러그인(plug-in) 소프트웨어를 따로 설치해야 했지만 HTML5에서는 플러그인 없이 가능하도록 아래와 같은 태그를 표준화하였다. ※ 단, '플래시 애니메이션(.SWF)'과 같이 표준화되지 않은 미디어를 재생하기 위해서는 플러그인이 필요하며 해당 경우에는 아래와 같은 태그를 사용하게 된다.   2. 비디오 삽입( '' )- 위에서 미리 언급한 ''태그를 이용하여 브라우저에서 비디오가 재생되도록 간단한 코드를 짜보자영상출력 오류여기서 각 태그의 의미를 살펴보자면 - video : 말 그대로 비디오를 삽입하기 위해서 가장 상위에 씌워지는 태그- ..

보호되어 있는 글입니다.

( 목 차 )파일 다운로드 링크 만들기인라인 프레임 만들기인라인 프레임을 이용하여 원하는 웹 페이지 출력하기1. 파일 다운로드 링크 만들기- 파일 다운로드 링크를 만들기 위해서 태그의 'download'속성을 이용한다.- download속성은 이미지, PDF, MP3, HTML파일 등 모든 파일을 다운로드할 수 있는 링크를 만든다.- 아래는 '예시 사진 다운로드'라는 글자를 눌렀을 때 'example.png'가 다운 받아지도록 하는 예시 코드이다.예시 사진 다운로드 이를 이용해서 간단하게 네이버, 다음, 구글의 이미지를 다운받을 수 있는 링크가 존재하는 페이지를 만들어 보자 먼저 3개의 사진을 다운받고 바탕화면에 저장한 뒤 각각의 이름을 'naver', 'daum', 'google'로 저장한다.이후 아..

( 목 차 )HTML 페이지의 기본HTML의 태그란?HTML 기본 문서 만들기1. HTML 페이지의 기본- 웹 브라우저는 한 번에 하나의 HTML 페이지를 화면에 출력하게 되는데, 여기서는 HTML5에서 페이지가 어떻게 구성되는지를 살펴볼 예정입니다. - HTML5에서 HTML페이지는 아래와 같이 선언과 헤드, 바디 부분으로 구성됩니다. ▷ HTML 코딩 환경에서 ! + Enter를 눌렸을 때 만들어지는 HTML의 기본 뼈대입니다.▷ 위의 , 로 감싸져 있는 부분은 통상 문서의 제목이나 본문을 설명하는 태그, JS코드, CSS스타일 시트 등이 포함됩니다.▷ 로 감싸져 있는 부분 또한 JS코드를 포함할 수 있습니다. 글의 본문이나 주요 내용이 들어가는 부분입니다. + HTML문서 내에서의 주석문은 ..

본 게시판을 소개하는 간단한 HTML 페이지를 작성해 보겠습니다!본문의 제목에 마우스 커서를 올리면 사진이 출력됩니다. (태그 간단 설명)다들 아실 거라 생각되지만 HTML 코드 파일을 만들고 !+Enter를 하게 되면 HTML의 기본 뼈대가 자동으로 만들어집니다!body 태그 : 배경색 지정 / 왼쪽, 오른쪽의 공백을 지정합니다.h3 태그 : 글자의 위치를 가운데로 / 글자의 색을 지정합니다.hr 태그 : 라인의 높이 / 테두리 색상 / 채워질 색상을 지정합니다.span 태그 : 색 / 폰트의 크기를 지정합니다. function show() : 보여주는 기능으로 id를 "fig"로 지정한 "discord_cyber.png"이미지를 보여주는 기능입니다.function hide() : 숨기는 기능으로 id..