본문 바로가기

분류 전체보기

 (86)
선택 정렬(Selection Sort) 알고리즘 개념과 예제 선택 정렬 선택 정렬은 정렬 알고리즘 중에 하나로 무작위로 배치된 데이터에서 최솟값을 선택해 최솟값이 있어야 할 인덱스로 데이터를 변경하는 정렬방식이다. 선택 정렬 알고리즘의 진행방식은 아래와 같다. (오름차순 기준) 무작위로 나열된 데이터에서 최솟값 X를 찾는다. X값 과 현재 데이터에서 첫번째에 있는 값의 위치를 변경한다. 첫번째 데이터를 제외하고 나머지 데이터에서 1번 과정부터 다시 시작. 선택 정렬 예시 아래와 같이 무작위로 배치된 데이터가 있다고 가정하자. 33 8 10 6 5 25 1 16 이 데이터에서 최솟값 X를 찾아야 하고, X는 1이 된다. 33 8 10 6 5 25 1 16 1을 현재 데이터의 첫번째에 해당하는 33과 자리 교체를 한다. 1 8 10 6 5 25 33 16 1은 자기 ..
이진 탐색(Binary Search) 알고리즘 개념과 예제 이진 탐색 이진 탐색은 오름차순으로 정렬되어있는 데이터에서 원하는 값(타겟 넘버)의 위치를 찾아내는 알고리즘이다. 여기서 이진(Binary)는 우리가 알고있는 그 이진 코드 (0101001...) 가 아니라 데이터를 반(2개)으로 나누어서 비교하고 찾는 방식이여서 이진 탐색이라고 한다. 이진 탐색의 알고리즘 진행방식은 아래와 같다. 정렬되어있는 데이터의 중간 값을 임의의 값 X로 정함 타겟 넘버의 값과 X를 비교 타겟 넘버의 값이 X보다 크다면, 타겟 넘버는 데이터에서 X보다 우측에 위치해 있으니 반으로 나눈 데이터의 우측에서 1번 과정부터 다시 시작 타겟 넘버의 값이 X보다 작다면, 타겟 넘버는 데이터에서 X보다 좌측에 위치해 있으니 반으로 나눈 데이터의 좌측에서 1번 과정부터 다시 시작 이진 탐색 예..
배열의 값을 추가 및 제거 배열에 값을 추가 인덱스 값을 지정하여 값 추가 Javascript는 C처럼 배열의 공간을 할당하고 사용하는게 아니라 동적으로 공간이 할당되기 때문에 원하는 인덱스를 주고 값을 추가할 수 있다. 하지만 마지막 요소에 추가하는게 아니라 마지막 요소에서 조금 멀리 떨어진 곳의 인덱스에 값을 추가하게 되면 마지막 요소부터 새로 추가한 요소까지는 빈 인덱스로 남게된다. selectIndex.html (실행결과) HTML,CSS,,,,JavaScript 6 push 메소드 사용 push 메소드를 사용하여 배열에다가 값을 추가할 수 있다. 그러나 이 메소드를 사용시에는 배열의 마지막 요소 뒤에만 추가할 수 있다. push.html (실행결과) HTML,CSS,Javascript 3 splice 메소드 사용 push..
태그에 테두리를 만들어내는 border 속성 border border 속성은 HTML의 각 태그들에 테두리를 만들어낼 수 있다. border 속성을 이용하여 태그들의 경계가 어디까지인지 육안으로 식별 가능하며, 웹 브라우저에서 각각의 태그들을 구분하기 쉬워진다. border 스타일 종류 각각의 스타일은 전부 3px의 두께를 기준으로 표현했다. solid dotted dashed double inset outset ridge groove border 속성 사용법 border 속성 하나만 사용 border 속성 하나만을 이용하여 두께, 테두리 스타일, 색상을 지정할 수 있다. 단, 테두리의 형태는 필수로 지정해줘야지 화면에 나오게 된다. border.html border (실행결과) border border-style 속성 사용 border-style..
CSS를 HTML에 적용시키는 방법 CSS CSS는 'Cascading Style Sheets'의 약자로써, HTML을 이용하여 기본적인 웹 페이지의 골격을 만들었다면 CSS를 이용하여 색상, 크기, 위치, 모양 등을 지정할 수 있다. CSS에 대해 아는게 많을 수록 웹 페이지의 가시성이 높아지고, 스타일있게 꾸밀 수 있다. CSS를 HTML에 적용시키는 방법 CSS를 HTML에 적용시키는 방법에는 3가지 정도가 있다. HTML 내부에 태그를 이용한 '내부 스타일시트' 방식 별도의 파일을 이용하여 HTML에 링크시키는 '외부 스타일시트' 방식 HTML 태그 내부에 속성으로 스타일을 지정하는 '인라인' 방식 내부 스타일시트 내부 스타일시트 방식은 HTML의 Hello CSS (실행결과) 외부 스타일시트 외부 스타일시트 방식은 html 파일 ..
사용자의 입력 값을 받을 수 있는 또 다른 태그 <select> 태그 태그 select 태그는 input 태그들과 비슷하게 form 태그 내부에서 쓰인다. 마우스를 이용해 여러개의 선택지 중에서 하나를 선택할 때 사용하는 양식 중 하나이며, Dropdownlist 라고도 부른다. 어떤 주제와 관련된 여러 선택지를 하나로 묶어서 웹페이지의 공간을 아끼고 가시성이 좋게 만들 수 있다. 태그 사용법 Dropdownlist.html 구글 네이버 다음 (실행결과) 구글 네이버 다음 구글 네이버 다음 select 태그는 내부의 여러개의 option 태그를 Dropdownlist 형식으로 만들어주는 역할을 한다. select 태그에서 name 속성을 부여하여 전송되는 값이 어떤 값인지 알려줘야한다. option 태그는 Dropdownlist 형식에서 선택지를 구분할 때 사용하는 태그이..
사용자의 입력 값을 받을 수 있는 <input> 태그 태그 input 태그는 form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을 구현하는 태그이다. 예를 들어, 사용자가 키보드로 입력할 수 있는 텍스트 상자, 마우스로 클릭 할 수 있는 체크박스나 라디오버튼 등, 필요에 따라 원하는 양식으로 input 태그에 속성 값을 넣어서 사용하면 된다. 태그 사용법 input 태그는 여는 태그만으로 정보 제공이 가능하기 때문에 닫는 태그가 따로 필요없는 태그이다. input 태그에서는 type 속성의 값으로 입력하는 양식의 모양이 바뀌게 된다. (이 게시물에서는 간단한 기능을 가지고 있는 type 속성 값만 취급합니다. 자세히 다뤄야 하는 속성 값들은 따로 포스팅 하도록 하겠습니다.) 그리고 서버는 input으로 받은 값이 어떤 값인지 구분하지 못하기 때문에..
서버로 원하는 데이터를 보내기 위한 <form> 태그 태그 form 태그는 사용자가 웹 서버로 어떠한 정보를 보낼때 사용하는 태그이다. 회원가입이나 설문조사 같이 서버에서 요구하는 정보를 경로를 지정해서 보낼 수 있게된다. 태그 사용법 form.html 성함: 거주지역: (실행결과) 성함: 거주지역: form 태그는 서버에 입력한 값을 제출해야하는 부분(input 태그)을 감싸고 있어야 하고 action 속성을 이용하여 정보를 보낼 경로를 지정해야 한다. 아까의 예제코드에서 제출버튼을 눌렀을때 URL부분을 자세히 보면 빨간색으로 밑줄이 그어져 있는 부분이 action 속성 값과 같고, 노란색으로 밑줄이 그어져 있는 부분이 각각 input 태그의 name 속성 값과 같다. 저 URL의 뜻은, 작성자가 지정한 가상의 경로인 "https://localhost/U..

티스토리툴바