K_blueprint

목  차1. 웹 폼과 폼 요소(feat. 간단한 로그인 폼 만들기)2. 폼 태그3. 입력칸 만들기(텍스트, 데이터) 1. 웹 폼과 폼 요소- "웹 폼(Webform)"이란, '웹 페이지를 통해서 사용자의 입력을 받는 폼을 의미한다. 또한 이러한 폼을 만들기 위해서 사용되는 다양한 태그들을 "폼 요소(form element)"라고 한다.- 폼은 '로그인', '등록', '검색', '예약', '쇼핑' 등 "사용자의 입력을 받는 웹 서비스"라면 일반적으로 사용된다. 아래는 간단한 로그인 폼을 작성한 예시이다. 로그인을 할 수 있는 폼 입니다. User ID : User Pw :  - 기본적으로 폼 요소들은 ''태그 안에 담기게 되고, 코드 내의..

목  차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'로 저장한다.이후 아..

( 목 차 )이미지 삽입하기리스트 만들기표 만들기하이퍼링크 만들기id 속성으로 앵커 만들기1. 이미지 삽입하기 - 태그를 이용하면  HTML 문서에 이미지를 삽입할 수 있다. - src 속성으로 지정할 수 있는 이미지 종류는 아래와 같다.>>> BMP, GIF, PNG, JPG(JPEG), animated-GIF - src 속성에 다른 웹 사이트의 이미지 주소를 주어 타 웹사이트의 이미지를 가져와서 출력하는 것 또한 가능하다. (예시 코드) 이미지 삽입 디스코드 프로필 이미지 예시 사진입니다. 다음과 같이 이미지의 크기를 조절하여 출력이 가능합니다.▷ 해당 소스코드와 같은 폴더 또는 공간에 있는 이미지를 위의 코드처럼 불러올 수 있다.▷ 넓이, 높이 등을 조절할 ..

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