Web Basic/HTML
HTML Audio(오디오)
HTML Audio(오디오)
2020.07.23html로 오디오 파일을 재생할 때 사용한다. 웹 페이지에서 오디오 파일 사용하기 Your browser does not support the audio element. 사용중인 브라우져가 오디오 요소를 지원하지 않습니다. 비디오와 동일하게 오디오 파일의 경로를 지정하는 것도 오타가 발생하지 않도록 신경써서 잘 입력해주도록 하자 동작방식 controls 속성은 오디오 재생, 일시정지, 볼륨과 같은 오디오 컨트롤을 추가한다. 태그를 이용하면 웹페이지에 넣고자 하는 오디오 파일을 지정할 수 있다. 웹 브라우져는 처음 인식된 형식을 사용한다. (이와 관련된 내용은 차후에 더 자세히 다루는 것으로 하겠다.) 태그 사이의 텍스트는 태그를 지원하지 않는 웹브라우져에서 표시된다.
HTML Video(비디오)
HTML Video(비디오)
2020.07.23웹 페이지에 비디오를 표시하는 데 사용한다. 웹 페이지에서 비디오 사용하기 Your browser does not support the video tag. 사용중인 브라우져가 비디오 태그를 지원하지 않습니다. 실행결과, 다음과 같이 비디오를 웹페이지상에서 사용할 수 있다. src에 비디오 파일의 경로 작성할 때 정확하게 경로를 작성할 수 있도록 주의하자 동작원리 이전에 위에서 사용한 코드와 함께 살펴보도록 하자 Your browser does not support the video tag. 사용중인 브라우져가 비디오 태그를 지원하지 않습니다. controls 속성은 비디오 재생, 일시정지, 볼륨조절과 같은 비디오 컨트롤을 추가해주는 역할을 한다. 항상 html로 비디오를 사용할 때에는 width, hei..
HTML Multimedia(멀티미디어)
HTML Multimedia(멀티미디어)
2020.07.23HTML 멀티미디어란? 웹페이지 상에서 볼 수 있는 이미지, 음악, 사운드, 비디오, 레코드, 영화, 애니메이션 등과 같이 보고 들을 수 있는 거의 모든 것 웹페이지에는 보통 여러가지 형식의 멀티미디어 요소가 함께 사용된다. 웹 브라우져 지원 초기의 웹브라우져는 단일색상, 단일글꼴로 제한된 텍스트만을 지원하는 형태였지만 점점 지금처럼 다양한 형태의 멀티미디어를 지원하는 형태로 발전해왔다. -> 현재의 웹브라우져들은 다양한 형태의 멀티미디어를 지원한다. 멀티미디어 형식 일반적인 비디오 형식 비디오 파일에는 정말 많은 형식이 존재한다. 대표적으로 mp4 형식이 사용된다. 비디오 저장방식, 용량, 품질 등과 같은 요소들에 따라서 다양한 형식으로 구분되는 데 각 형식별로 가지는 장단점이 존재한다. (각 비디오파..
HTML input types(입력유형)
HTML input types(입력유형)
2020.07.21input types text , 한 줄의 텍스트 입력필드를 정의한다. 이름: 성: input types password , 비밀번호 입력필드를 정의한다. 사용자 ID: 비밀번호: password type의 경우 사용자가 데이터를 입력하면 다음과 같이 입력된 내용이 공개되지 않도록 마스킹 처리된다. 마스킹처리된 사용자 입력값은 별표 또는 원으로 표시된다. input types submit , 사용자가 입력한 양식데이터(form data)를 양식핸들러(form handler)에 전달하기 위한 버튼을 정의한다. form handler는 클라이언트로부터 입력된 데이터를 처리하기 위한 스크립트가 있는 서버페이지를 말하며 form handler는 form의 action 속성에 지정된다. 이름: 성: 위의 실행모습..
HTML Form Elements
HTML Form Elements
2020.07.21가장 많이 사용되는 form elements 중 하나이다. 요소는 type 속성에 따라서 여러가지 방법으로 표시될 수 있다. The input Element First name: 위의 코드에 대한 결과를 함께 살펴보면 다음과 같이 type에 따라서 표시되는 형태가 다르게 나타나는 것을 확인할 수 있다. (type 속성을 따로 명시하지 않는 경우 기본값인 text로 type이 지정된다.) 태그는 많은 폼 요소에 대한 레이블을 정의한다. 화면판독기(Screen Reader)에서 사용자가 입력요소에 요소는 화면 판독기(Screen Reader) 사용자에게 유용합니다. 화면 판독기는 사용자가 입력 요소에 초점을 맞출 때 라벨을 크게 읽습니다. 이 요소는 라디오 단추 나 확인란과 같은 매우 작은 영역을 클릭하기 ..
HTML forms
HTML forms
2020.07.21Forms form은 html 상에서 사용자로부터 입력값을 받아오는 데 사용됩니다. 이 form을 통해서 사용자가 입력한 정보를 서버로 보내는 기능을 구현할 수 있게 됩니다. 우리가 흔히 경험해오던 로그인, 회원가입 등의 페이지들을 모두 바로 이 form을 이용해서 구현할 수 있습니다. 즉, 조금 다르게 표현하면 웹 페이지가 클라이언트로부터 정보를 입력받아서 이를 서버 쪽으로 해당정보를 전달하는 기능을 이 form을 통해서 구현할 수 있다는 것 입니다. 아래의 코드는 html의 몇가지 form 태그들을 이용해서 간단한 이름을 입력받는 페이지를 작성한 모습입니다. HTML Forms First name: Last name: If you click the "Submit" button, the form-dat..
Block & Inline 요소
Block & Inline 요소
2020.07.20Block? Inline? Block과 Inline은 html에서 대단히 중요한 개념입니다. block과 inline 개념은 나중에 css를 통하여 각 태그들을 적절히 배치하여 레이아웃을 배치할 때 굉장히 중요하게 활용되는 개념이므로 이번 내용에 대해서 확실히 잘 알고 넘어가야할 필요성이 있습니다. 각각의 html 태그들은 자신이 웹 브라우져에 의해서 보여질 때 어떻게 보여질지에 대한 값 즉, display value라는 값에 대한 기본값을 가지고 있습니다. 그리고 이 Display Value가 가질 수 있는 두 가지 종류의 값이 각각 block과 inline 입니다. Block Display value를 Block으로 가진 html 요소들은 항상 시작할 때 새로운 행 즉, 개행을 한 후에 시작하고 해당..
Tables(표) & Lists(목록)
Tables(표) & Lists(목록)
2020.07.20html은 표(Table)와 목록(List)의 형식을 지원합니다. 우리는 이를 통해서 주어진 데이터들을 row, column을 기준으로 정렬 및 분류하거나(표를 만들어서) 순서 또는 순서가 없는 목록을 만들어서 데이터에 대한 가독성을 높일 수 있습니다. 표(Tables) 우선 Table에 대해서 먼저 알아보도록 하겠습니다. html 문서에서 표를 정의하여 사용하기 위해서는 한 가지 태그가 아닌 여러가지 종류의 태그를 혼용하여 사용합니다.(, , , ). 지금부터 이 각각의 태그들을 어떻게 사용하여서 표를 정의하고 데이터를 넣을 수 있는 지 확인해보도록 하겠습니다. html 문서에서 표(Table)를 정의 및 사용하기 위해서 사용하는 태그 표의 row(열) 부분을 정의하기 위해서 사용하는 태그 표의 hea..
HTML Images(이미지)
HTML Images(이미지)
2020.07.20html에서 이미지는 태그를 사용하여 정의된다. 태그는 이전에 언급했던 빈 태그(Empty Tag)로서 속성만을 가지고 종료태그가 존재하지 않는다. 이미지는 기술적으로 웹페이지에 직접 삽입되지 않는다. 이미지는 웹페이지에 연결되는 방식으로 들어간다. 위에서 언급한 태그는 참조된 이미지를 저장할 수 있는 공간을 만들어주는 역할을 한다. img 태그에는 다음 두 가지 필수속성이 존재한다. src - 이미지의 경로를 지정한다. alt - 이미지의 대체 텍스트를 지정한다. 이미지의 경로 : 실제로 이미지가 저장되어 있는 공간(보통 url이 들어간다.) 대체 텍스트 : 이미지를 설명해주는 글이나 문구 그래서 html로 이미지를 나타내기 위해서는 다음의 구조를 사용하여 표현한다. 웹페이지가 로드될 때 웹브라우져는 ..
HTML Quotation & Comments (인용구 & 주석)
HTML Quotation & Comments (인용구 & 주석)
2020.07.20인용과 관련된 html 요소 태그(Tag) 내용 다른 소스에서 인용되는 부분을 정의 짧은 인용문의 정의 약어(abbreviation) 및 머리글자(acronym)를 정의 문서의 작성자 / 소유자에 대한 연락처 정보를 정의 제목을 정의 텍스트의 방향을 정의 인용이란, 남의 말이나 글을 빌려 사용하는 것으로서 html은 위의 태그들을 이용하여 해당 텍스트가 인용, 인용문임을 표시할 수 있습니다. 인용을 표현하지 않은 경우 잘못하면 타인의 말이나 글을 가로채는 것이 될 수 있기 때문에 인용에 대한 언급은 대단히 중요합니다. 여러줄의 인용문을 표시하는 용도로 사용합니다. 해당 태그를 사용해서 기입한 내용들을 실제 웹 페이지 상에서 모두 들여쓰기(indent) 처리되어 일반적인 내용들과 구분되게 됩니다. 주어진 ..
HTML Formatting(서식)
HTML Formatting(서식)
2020.07.20HTML Text Formatting 요소의 종류 태그(tag) 내용 굵은 텍스트(Bold Text) 중요한 텍스트(Important Text) 기울임 텍스트(Italic Text) 강조 텍스트(Emphasized Text) 표시된 텍스트(Marked Text) 작은 텍스트(Small Text) 삭제된 텍스트(Deleted Text) 삽입된 텍스트(Inserted Text) 아래첨자(Subscripts) 위첨자(Superscripts) 각 태그들을 적용하고자 하는 내용을 감싸는 형식으로(시작태그와 종료태그로) 작성하여 사용한다. & 텍스트를 굵게 표시하고자 할 때 사용한다. 즉, 특정 텍스트를 강조하고 싶은 경우에 사용한다. 우선 를 이용하여 코드를 작성해보고 실행결과를 확인해보면 그 결과는 다음과 같다..
HTML Styles
HTML Styles
2020.07.20html style 속성은 색상, 글꼴, 크기 등과 같은 스타일 요소를 추가하는 데 사용된다. 해당 속성은 다음의 문법적 구조를 통해서 사용할 수 있다 주석에서 언급한 것처럼 property는 CSS property, value는 CSS value를 의미한다. CSS에 대해서는 나중에 자세히 알아볼테니 일단은 이정도로만 알고 넘어가도록 하자 배경색상(Background Color) 배경색상을 설정하기 위해서는 "background-color" 속성을 정의하면 된다. 배경색상은 페이지 전체를 대상으로 적용할 수도 있고 각 요소들에 대해서 따로 적용할 수도 있다. 페이지 전체의 배경색상을 변경하고 싶다면 다음과 같이 태그에 style 속성을 추가해주면 된다. 그리고 각 요소의 배경화면을 변경하고 싶다면 다음..