전체 글
JavaScript 개요
JavaScript 개요
2020.07.27JavaScript 관련 글을 시작하기에 앞서... 이제 JavaScript 입니다. 사실 이전에 포스팅한 HTML, CSS 관련 글들의 퀄리티가 너무 많이 떨어지는 것 같아서 이를 갈아엎는 과정이 필요하다고 생각했지만 당장 이 글들을 모두 수정하는 것보다는 공부와 포스팅을 이어가면서 지속적으로 수정해나가는 것이 더 효율적일 것 같아서 이렇게 이전의 글들을 수정하기 전에 먼저 JavaScript에 대한 포스팅을 하기로 결정하였습니다. (HTML과 CSS는 최대한 빠른 시일내에 더 좋은 퀄리티의 글로 다시 돌아올 수 있도록 노력하겠습니다!) 자바스크립트(JavaScript)란? 자바스크립트는 웹 개발자가 배워야하는 3가지 언어 중의 하나로서 이전에 살펴본 HTML, CSS에 이은 세번째 언어에 해당합니다...
CSS Responsive
CSS Responsive
2020.07.24반응형 웹 디자인(Responsive Web Design) 하나의 웹 사이트에서 PC, 스마트폰, 태블릿 PC등 접속하는 장치의 디스플레이에 따라서 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 기법 반응형 웹 디자인은 웹 페이지가 다양한 크기의 디스플레이 즉, 다양한 기기에 대응(호환)할 수 있도록 웹 페이지가 출력되는 사이즈에 따라서 사용자에게 보여지는 웹 페이지의 레이아웃과 같은 디자인적 요소를 자동으로 변경하는 형태의 웹 페이지 제작기법을 말합니다. 지금처럼 스마트폰이나 태블릿같은 모바일 기기들이 없던 시절에는 사용자들이 웹 페이지에 접근하는 방식이 모두 일반 데스크톱이나 랩톱(노트북) 밖에 없었기 때문에 지금처럼 다양한 기기에 호환될 수 있도록 웹 페이지를 제작하는 것에 대한 고민을 그렇게..
CSS 관련요약 - 2
CSS 관련요약 - 2
2020.07.23CSS Background(배경) CSS 배경속성의 종류는 다음과 같다. background-color background-image background-repeat background-attachment background-position 배경색(background-color) "background-color" 속성을 통해서 html 요소의 배경색을 지정할 수 있다. /*페이지의 배경색을 지정*/ body { background-color: tomato } 위의 코드는 페이지의 배경색을 적용한 모습이다. 여기서 background-color에 주어지는 속성값은 이전에 살펴본 "색상이름, 16진수값, RGB값 등"으로 할당할 수 있다. 뿐만 아니라 다른 html 요소의 배경색을 설정하는 것도 가능하다...
CSS 관련 요약 - 1
CSS 관련 요약 - 1
2020.07.23css HTML 문서의 스타일을 설명하는 언어 CSS CSS(Cascading Style Sheets) HTML 요소가 표시되는 방법을 기술 웹페이지의 레이아웃을 제어할 수 있음 외부 스타일 시트는 CSS 파일에 저장 CSS가 HTML 페이지에서 스타일과 관련된 부분을 전담하도록 함으로서 HTML은 페이지의 구조만을 기술하는 깔끔함을 가질 수 있음 CSS 예시를 보고 위한 코드입니다. Hello World! These paragraphs are styled with CSS. 위의 예시코드에서 h1, p는 Selector(선택기) color, font-size, text-align은 모두 속성, 그 뒤에 할당된 내용들은 속성값에 해당 CSS Selector(선택기) 스타일을 지정할 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..