여행하는 코딩끄적끄적

목차 [Javascript] 자바스크립트에서 CSS 변경 하기 (HTML Style) 자바스크립트를 이용해서 고정된 css 값을 동적으로 변경할 수 있습니다. 변경에 필요한 함수는 아래와 같습니다. Syntax>> document.getElementById(id명).style.property = new style 위에 Syntax와 같이 변경하고자 하는 부분을 getElementById 로 찾은 다음에 style을 넣고 변경하고자 하는 css property를 입력하면 됩니다. 앞서 언급한 내용처럼 대부분 자바스크립트로 css 스타일을 변경하는 이유는 페이지 내에서 어떠한 이벤트(event)에 대한 동적인 반응을 위해 넣습니다. 아래 예제를 통해 쉽게 이해 할 수 있습니다. [Javascript] 자바스..

목차 [Javascript] 타입 확인하는 방법 자바스크립트에서 데이타(data) 타입은 아래와 같습니다. string number boolean object function 자바스크립트 객체(object)의 종류는 아래와 같습니다. Object Date Array String Number Boolean 그리고 아무런 정보를 포함하지 않은 형태는 아래와 같습니다. null undefined 자바스크립트에서 타입을 확인하는 방법은 파이썬과 유사하게 typeof 라는 함수를 사용합니다. 아래 예제를 통해 사용 방법을 익힐 수 있습니다. 예제 코드>> 결과>> [Javascript] 숫자를 문자로, 문자를 숫자로 변환(int2string, string2int) 문자열을 숫자로 변경하는 함수는 String()입..

목차 자바스크립트 변수란? 자바스크립트 변수는 아래와 같이 3가지로 정의 됩니다. var let const 파이썬이나 C언어와 달리 정수 실수 string 등을 구분 짓지 않고 모든 변수는 var로 정의할수 있습니다. 변수의 특성에 따라 let이나 const를 사용합니다. let은 다시 선언이 불가능 합니다. 아래와 같이 중복 선언을 하였습니다. 그 결과 아래처럼 var i는 문제가 없었지만 let j는 declared 문제가 발생했습니다. Uncaught SyntaxError: Identifier 'j' has already been declared const는 다시 할당이 안됩니다. 아래와 같이 let과 const를 할당해보았습니다. 그 결과 아래처럼 let k 는 문제가 없었지만 const k 아래..

목차 [Javascript] HTML 이벤트 발생 시 동작 함수 HTML 문서에서 자바스크립트를 이용해서 특정 동작이 발생하면 자바스크립트를 동작시키게 할 수 있습니다. 우선 아래 Syntax를 통해 설명 하겠습니다. HTML "element"에서 특정 "event"가 발생하면 "some JavaScript"가 동작 하는 구조 입니다. element는 div, a, h1, button과 같은 tag가 될 수 있습니다. HTML DOM에서 제공하는 event가 많이 있는데 주요 이벤트만 정리해서 아래와 같이 테이블로 만들었습니다. Event 명 설명 onchange HTML element가 변경될 때 onclick HTML element를 클릭할 때 onmouseover HTML element에 마우스 커..

목차 [Javascript] HTML 태그 사이 element 가져오기 - getElementById() HTML 문서에서 id 값을 이용해서 위치를 파악하고 해당 태그의 정보를 가져 오는 방법입니다. Syntax는 아래와 같습니다. document.getElementById(elementID) 찾은 element는 일반적으로 변수에 넣고 속성을 변경하거나 속성 정보를 가져 올 수 있습니다. 예제 코드>> H1 입니다 두번 째 H1 입니다 1st_li 2nd_li 3rd_li ########출력 결과######### 결과>> [Javascript] HTML 태그 사이 element 가져오기 - getElementsByClassName() HTML 문서에서 class 값을 이용해서 위치를 파악하고 해당 태..

목차 HTML DOM write(), writeln() Method 란? write() 메소드는 괄호안의 입력값을 HTML 문서에 표현해줍니다. 입력값으로 HTML 코드나 자바스크립트 코드를 받습니다. HTML을 바로 쓰기 때문에 실제로 write()를 사용해서 코드를 짜지는 않습니다. write() 는 일반적으로 내 코드가 정상적으로 동작하는지 확인하기 위해 debugging 용으로 사용합니다. writeln() 은 write()와 동일한데 마지막에 줄넘김이 들어가있다는 차이 입니다. HTML DOM write() Syntax document.write(exp1, exp2, exp3, ...) 여러개의 코드를 입력에 넣을 수 있습니다. write() 는 별도의 return 값은 없고 HTML 페이지에 ..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Grid) Bootstrap의 Grid를 사용한다는 의미는 웹 화면의 Front end를 엑셀처럼 열과 행으로 나눠서 사용하겠다는 의미 입니다. Bootstrap에서 제공하는 클래스(Class)의 클래스명을 row와 column을 사용해서 정의할 수있습니다. row : 행 지정 column : 열 지정 행의 경우 웹화면에서 스크롤을 내려서 계속 만들 수 있지만 열의 경우 12개의 열로 고정되어 있습니다. 아래 그림은 최대치로 열을 설정..

목차 참조글 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) CSS 기본 구조 위 예제 구조는 제 티스토리(tistory)의 CSS에서 일부 입니다. 구성은 총 2개로 아래와 같이 구성됩니다. 선택자(Selector) : 녹색 부분으로 CSS를 적용할 부분을 선택 합니다. 선언부(Declarative) : { } 괄호 부분으로 선택자에서 선택한 부분에 괄호안의 CSS 속성을 적용합니다. 선언부는 다시 아래와 같이 2개로 구성됩니다. 속성명(Property) : 위 그림의 빨간색 부분입니다. 속성값(Value) : 위 그림에서 파란색 부분입니다..

목차 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바랍니다 (https://scribblinganything.tistory.com/298) HTML - Bootstrap 사용해서 공간 배치하기 (Container) Web에서 Frontend 디자인에서 레이아웃을 설정하는 것은 어려운 일입니다. 사이즈를 고정하면 웹브라우져의 화면에 따라 유연하게 반응하기 어렵습니다. Container 클래스 값을 적용하는 것만으로 쉽게 배치 문제를 해결할 수 있습니다. Container 클래스의 종류는 아래와 같습니다. container container-sm container-md container-md container-xl Bootstra..

목차 참조 글 시작에 앞서 visual studio에서 bootstrap 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다. (https://scribblinganything.tistory.com/298) Bootstrap 팝업창(modal, dialog box) 만들기 (크기 조절) Bootstrap에서 말풍선을 만드는 방법은 크게 두가지가 있다. tooltip modal 툴팁의 경우 마우스를 올려만 놓아도 박스가 생기고 마우스를 옮기면 사라진다. 모달의 경우 클릭과 같은 행동을 통해 새로운 창을 만들고 그 창을 원하는 형태로 꾸며 줄 수 있다. 예제 코드로 이해해보기 코드>> 버튼을 클릭하면 말풍선/팝업창이 생깁니다 클릭 × 헤더 부분 바디 부분 테일부분 닫기 결과>> 주석>> 모달..