일상의 변화를 기록

오라클에서의 데이터 타입을 알아보자 1.문자형 데이터 타입 CHAR(n) : 고정길이 데이터 타입(최대 2000byte)- 지정된 길이보다 짧은 데이터 입력시 나머지는 공백으로 채워짐 VARCHAR2(n) : 가변 길이 데이터 타입(최대 4000byte) - 지정된 길이보다 짧은 데이터 입력시 나머지 공간은 비워둠.*n은 byte의 크기 NCHAR(n) : 고정 길이 유니코드 데이터 타입(최대 2000byte) NVARCHAR2(n) : 가변 길이 유니코드 데이터 타입(최대 4000byte)*n은 글자수(한 글자를 3byte로 계산, 영어-1byte,한글-2byte,한자-3byte) 2.숫자형 데이터 타입 NUMBER(전체자릿수, 소수점 자릿수) 3. 날짜형 데이터 타입 DATE : (YYYY-MM-DD..

width는 길이를 조절하는 속성이다. 여기서는 min-width와 max-width에 대해서 알아보자 min-width : 최소 길이를 설정하는 속성(설정 길이보다 짧아지지 않는다.) max-width : 최대 길이를 설정하는 속성(설정 길이보다 길어지지 않는다.) 요소의 넓이 조정 div{ border: 3px solid skyblue; text-align: center; margin-top: 5px; } .ex1{ min-width: 500px; } .ex2{ max-width: 500px; } min-width: 500px max-width: 500px 500px 이상 늘어나지 않는 max-width를 볼수 있다. 500px 이하로 줄어들지 않는 min-width를 볼 수 있다.

링크의 상태 1.) link : 방문하기 전 상태 2.) hover : 링크에 마우스의 포인터를 올렸을 때 3.) active : 링크를 마우스로 클릭한 순간 4.) visited : 방문한 후 상태 링크는 이렇게 4가지 상태를 갖고 있는데 CSS를 통해 링크 상태를 제어할 수 있다. 링크 a:link{ text-decoration: none; } a:visited{ text-decoration: none; color: orange; } a:hover{ color: skyblue; text-decoration: underline; } a:active{ text-decoration: none; color: green; } CSSTUTORIALS text-decoration은 링크가 걸린 텍스트의 모양을 바..

HTML의 display는 크게 2가지 속성으로 이루어져 있다. 하나는 inline이고 다른 하나는 block형태이다. display는 요소를 어떻게 표시할지 정하는데 inline은 한줄에 계속 추가되는 것을 말한다. 반면에 block은 한줄에 추가되는것이 그 다음줄에 추가되는 형태를 말한다. 예를 들자면 border: 3px solid blue; 의 형태는 이렇게 하나씩 쌓이는 block형식이지만 float를 이용해서 한줄에 하나씩 추가되는 inline형태로 바꿀수도 있다. float: left;를 이용하면 한줄에 왼쪽부터 하나씩 추가되는 inline형식으로 표현된다 한줄에 추가된 모습이다.

웹 페이지에 배경을 설정하는 방법을 알아보자 위와 같은 코드를 실행시키면 각 태그의 영역에 지정한 배경색이 칠해지게 된다. 화면 전체에 배경을 설정하고 싶으면 body부분에 설정해야 함을 알 수 있다. 특정 이미지를 배경으로 설정한 것이다 background-repaet 은 이미지가 화면보다 작을시 반복시킬지 정하는 것이다. background-repaet: repaet | no-repeat | repeat-x | repeat-y 등이 있다 repeat : 전체 반복 no-repeat : 반복하지 않는다 repeat-x: x축만 반복한다 repeat-y: y축만 반복한다. background-position: center; 는 이미지를 배치할 위치를 정할 수 있다. center | left | right..

border : 태그의 테두리를 설정하는 속성이다 일반적으로 사용하는 방법은 border: width style color순으로 사용하는데 이렇게 사용한다. 하지만 이렇게 전부 각각 설정이 가능하며 하나의 border은 top, bottom, left, right로 나누어지며 각각 스타일 굵기 색등 세세하게 설정이 가능하다 꽤나 다양하게 설정이 가능하다. * border-collapse 위와같은 테이블에서 th와 td에 border을 주면 두줄로 표시된다 border-collapse: collapse; 옵션을 사용하면 두 줄을 한 줄로 표현 할 수 있다. border-collapse가 적용된 모습이다. border-collapse는 표와 테두리와 셍ㄹ의 테두리 사이의 간격을 어떻게 처리할지 정한다. bo..

Selector(선택자) CSS는 HTML요소의 style을 정의한다. 여러 방법중에 style 태그에 모아서 사용할때 style을 적용하고자하는 HTML요소를 특정할 방법이 필요한데 이 역할을 Selector가 한다. => Selector는 style을 적용할 HTML요소를 특정하는 역할. Selector에도 여러 종류가 있다 1. 전체 Selector- HTML 문서 내의 모든 요소를 선택 사용법 : *{내용} 전체 Selector에 의해 3개의 p태그 내용이 파란색으로 변한것을 확인할 수 있다. 2. 태그 Selector-지정된 태그를 요소로 선택한다. 사용법 태그명{내용} p태그 전체를 빨간색으로 div태그 전체를 파란색으로 만들게 된다. 실행결과 3. ID Selector-태그에 id를 부여해서..

웹페이지는 사용자와 서버간의 상호작용이 가능하다. 입력한 것을 서버로 보내면 서버는 그것을 처리하여 사용자에게 보여준다. 이렇게 서버로 정보를 보내는 역할을 하는 것이 form이다. form의 속성- action : 보낼 서버의 주소- method : 서버에게 보내는 방법 (GET, POST, PUT, DELETE)를 정하는 속성 * 가장 일반적으로 쓰이는 속성(GET, POST)GET - URL에 전송하는 내용이 노출된다. 속도는 빠르지만 보낼 수 있는 용량이 작고, 보안성이 취약하다.POST - URL에 전송하는 내용이 노출되지 않는다. 이렇게 폼안에 서버의 주소와 보내는 방법을 정해주고 그 안에서 input 태그를 이용해서 정보를 입력받고 그 정보를 보내게 된다. 폼에서 보낼 서버의 주소는 적지 않..

Cascading Style Sheets(CSS) HTML - 웹 사이트에서 화면에 표시되는 정보를 약속한것. CSS - 초기의 웹은 HTML 하나로 문서의 뼈대를 만들고 꾸미기도 했지만 공통적인 디자인을 갖는 문서거 여러개 존재할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야하는 번거로움 발생, CSS는 이런 문제를 해결하고 웹페이지의 내용과 스타일을 분리해주고 HTML을 보다 세련되게 표현할 수 있게 해줌. CSS의 사용법 1. HTML의 style 속성을 이용, 해당 태그에 직접 설정 글자의 색이 변경된 것을 확인할 수 있다. 2. style 태그를 이용해서 HTML 문서 안에 작성하는 방법 이렇게 head태그 안에 style 태그를 추가하여 사용하는 방법이 있다. 3. Css 파일을 외부에서..

input태그(2)에서는 HTML5에서부터 지원하는 타입들에 대해서 쓰겠다.(윈7, 익스플로러8에서는 지원이 안되는 타입들) 1. e-mail email 타입은 간단한 이메일 형식을 확인해준다. @이의 앞뒤 정도만 확인해서 정확하지는 않지만 어느정도 잘못된 이메일을 걸러줄 수 있다. required - 아무것도 입력하지 않고 submit을 눌렀을때 공백을 채우라는 메세지를 띄워준다. 2. number, range number은 숫자만 입력하도록 제한해주고 range는 스크롤바와 비슷한 바를 생성해서 컨트롤 할 수 있다. number에 숫자 이외의 문자를 넣으면 입력되지 않는다. value로 초기값을 min으로 최소값을 max로 최대값을 설정할 수 있다. range또한 min,max를 설정할 수 있고 st..