본문 바로가기

반응형

좋아하는 것_매직IT

5.웹프로그래밍, Javascript, 자료형(data type) 에 대해서 알아볼께요..^^ 블로그목적 자바스크립트관련 자료형에 대해서 공부및 정리 후 공유한다. 자바스크립트의 자료형(data type)은? 보통 자료형은 변수가 가질 수 있는 값의 종류를 말함. 아래와 같은 자료형이 존재함. 수치형 정수 or 실수 문자열형 문자가 연결된 것을 의미 쉽게 말해서 텍스트. 부울형 true or false 값을 가지는 데이터형 객체형 객체를 나타내는 타입. undefined 값이 정해지지 않은 상태를 말함. ​ 그럼, 자바스크립트에서 변수를 선언할 때 다른 언어들처럼, 자료형이 필요있을까? 정답 변수를 선언할 때는 자료형이 필요없음. but, 특정한 값이 변수에 저장되는 순간, 내부적으로 자료형이 결정됨. 즉, 변수는 어떤 타입의 값이라도 가질 수 있음. 예시 그럼, 현재 변수가 저장하고 있는 자료의.. 더보기
4.웹프로그래밍, Javascript, 변수(variable) 에 대해서 알아볼께요..^^ 블로그 목적 Javascript 에서 사용하는 변수에 대해서 공부하고 정리해본다. ​ 자바스크립트에서 변수란? 다른 언어들과 마찬가지로, 변수는 데이터를 저장하는 상자로 생각할 수 있음. 그럼, 변수를 선언할 때는 어떻게 해야 할까? 아래와 같이, var 키워드를 사용하면 됨. 설명 var 키워드 변수가 선언된다는 것을 나타냄. thub_value 변수이름 스크립트 안에서 유일해야함. 세미콜론(";") 하나의 문장이 끝났음을 나타냄. 그럼, 변수는 언제 사용하는 것일까? 사용자의 입력값 or 텍스트 저장 계산이 필요할때는 중간결과 저장 기타 등등. 그럼, 변수 값을 저장하는 것은 무엇을 사용할까? 다른 언어들과 마찬가지로, 등호(=) 를 사용하면됨. 설명 thub_value 라는 변수에 100이라는 숫자.. 더보기
3.웹프로그래밍, Javascript, 문장(statement) 에 대해서 알아볼께요..^^ 블로그 목적 자바스크립트 문장에 대해서 공부해보고 정리해본다. ​ 자바스크립트에서 문장(statement)의 의미는? 보통 자바스크립트는 브라우저에 의하여 실행되는 문장의 순서 있는 집합이라고도함. ​ 그럼, 문장(statement) 이라는 개념은 무엇일까? 다른 프로그래밍 언어와 같이 자바스크립트 문장은 웹 브라우저에게 내리는 명령이라고 간주할 수 있음. 즉, 웹브라우저가 무엇을 해야하는지를 지시하는 것. 그리고 각 문장의 끝에는 세미콜론(;) 을 붙여야 함. C++ 와 마찬가지로, 자바스크립트도 공부해보니, 문장을 세미콜론(;)으로 분리하고 있음. 그런데, 차이점은 자바스크립트에서는 세미콜론을 생략해도 된다고함. 즉, 자바스크립트에서는 줄이 바뀌면, 하나의 문장이 끝난 것으로 판단함. 그러나, 가급적.. 더보기
16.웹프로그래밍, CSS, 레이아웃을 위한 div 요소 사용하기에 대해서 알아볼께요. 블로그목적 CSS관련 레이아웃을 위한 div 요소에 대해서 공부및 정리 후 공유한다. ​ 레이아웃을 위한 div 요소 활용에 대해서. div 요소를 사용해서 아래와 같은 절차로 레이아웃을 만들 수 있음. 첫째, html 파일을 생성하고 div 요소를 생성 둘째, css style 통해서 요소의 위치 및 색상을 지정 마지막, 원하는 레이아웃 완성 추가적으로, div 는 블록 수준의 요소이고, 다른 요소를 그룹핑하는데 보통 사용됨. ​ 그럼, div 를 사용해서 레이아웃을 실제로 만들어 보자. 목표 그럼 지금 부터 목표로 달려가 보자. 우선, html 파일을 생성 한 후 웹 페이지 내용을 아래와 같이 입력함. exam0_div_layout.html 웹페이지 실행화면 설명 아직 css 를 작성하지 않아서 실제.. 더보기
15.웹프로그래밍, CSS, 웹페이지의 요소 위치 정하기에 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 요소 위치 정하기에 대해서 공부하고 정리후 공유한다. ​ 웹페이지의 요소 위치에 대해서 알아보자. 보통 요소의 위치는 top/bottom/left/right 속성으로 지정함. 예를 한번 들어보자. ​​​​​​​​​​​​​​주의할점 top/bottom/left/right 모두 컨테이너 경계선에서의 오프셋(offset[편차/차이])이라는 점. 즉, right: 200px; 라고 하면 컨테이너의 오른쪽 경계에서 200 픽셀만큼 떨어진 곳을 의미함. 그리고, CSS의 position 속성은 요소의 위치 설정 방법을 나타냄. 즉, 절대적인 위치설정 or 상대적인 위치 설정인가 ? top/bottom/left/rigth 속성은 position 속성이 먼저 설정되지 않으면, 동작하지 .. 더보기
14.웹프로그래밍, CSS, 웹페이지의 레이아웃(layout) 대해서 알아볼께요..^^ 블로그목적 CSS관련 웹페이지의 레이아웃에 대해서 공부및 정리 후 공유한다. 웹페이지의 레이아웃(layout) 이란? 웹페이지 레이아웃에는 HTML 요소의 위치, 크기등이 포함되어 있음. 예를 들면, 쉽게말해서 집을 새로 사기위해서 계약금, 중도금, 잔금을 치르고나서 등기를 치고, 새집에 들어가게되면, 집안에 TV, 가구, 냉장고 등등을 배치하게되는 상황과 유사하다고 해야 할까? 암튼 그렇다..^^; 박스모델(Box Model)에 대해서 알아볼까요? 박스모델이란? 웹 브라우저가 각 요소를 화면에 그릴 때는 무조건 사각형으로 간주한다는 것을 말함. 사각형을 이루는 요소는 아래와 같음. 패딩(padding) 내용과 테두리 사이의 간격 눈에 보이지 않음. 테두리(border) 내용과 패딩 주변을 감싸는 테두리.. 더보기
13.웹프로그래밍, CSS, 테이블(table) 스타일을 꾸며보는 방법에 대해서 알아볼께요..^^ 블로그목적 CSS관련 테이블에 대해서 공부및 정리후 공유한다. 테이블의 스타일을 변경하려면 어떻게 해야 될까? 정답 CSS 를 사용하면 개선 및 변경이 가능하다. 테이블의 스타일의 속성은? 속성 설명 비고 border-collapse 이웃한 셀의 경계선을 합칠 것인지에 대한 여부 width 테이블의 가로 길이 height 테이블의 세로 길이 border-spacing 테이블 셀 사이의 거리 empty-cells 공백 셀을 그릴 것인지 여부 border 테이블의 경계선 table-align 테이블 셀의 정렬 설정 그럼, 테이블의 스타일을 변화시켜보자! 테이블의 경계 border(경계선) 테이블 뿐만 아니라, HTML 요소의 경계선을 설정할 때 사용하는 중요한 속성임. 속성 스타일 색상 두께 예시 ​​​​​.. 더보기
12.웹프로그래밍, CSS, 리스트(list) 스타일을 꾸며보는 방법에 대해서 알아볼께요 ^^ 블로그목적 CSS관련 리스트에 대해서 공부및 정리 후 공유한다. 리스트 스타일을 한번 꾸며 보아요. 리스트 스타일도 CSS로 지정이 가능함. 속성 속성 설명 비고 list-style 리스트에 대한 속성을 한줄로 설정함. 리스트 항목 마커를 이미지로 지정함. list-style-position 리스트 마커의 위치를 안쪽 or 바깥쪽으로 지정함. list-style-type 리스트 마커의 타입을 지정함 예시 list-style-type : disc, circle, square : decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, .. 더보기

반응형