Developer

CSS 테두리, 두께, 색상, 그림자 효과 border-style : 테두리 스타일 기본 값이 none : 화면에 테두리 표시안됨 테두리를 그리기 위해서는 맨 먼저 테두리 스타일부터 지정 border-style : none | hidden | dashed | dotted | double | groove | inset | outset | ridge | solid; none - 없음 . 기본값 hidden - 테두리가 나타나지 않음 border-collapse:collapse일 경우 다른테두리도 표시되지 않는다. dashed - 직선으로 된 점선 dotted - 점선 double - 이중선 ..두선 사이의 간격은 border-width값으로 지정 groove - 테두리를 창에 조각한것처럼 표시..홈이 파인듯..

웹의 영역 요소 : 블록 레벨 요소, 인라인 레벨 요소, 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소 요소의 너비가 100% 예) , 등 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있음 예) , 등 박스 모델 실제 콘텐츠 영역, 패딩(padding), 박스의 테두리(border), 그리고 마진(margin) 등의 요소로 구성됨. 개발자 도구 창에서 박스 모델 확인 가능 width, height : 실제 콘텐츠 영역의 크기를 지정. width : 크기 | 백분율 | auto height : 크기 | 백분율 | auto 실제 콘텐츠 너비 계산 모던 브라우저에서 박스 모델의 전체 너비 = width ..

그라데이션과 브라우저 접두사 : 그라데이션은 크기가 없는 배경 이미지이므로 background-image나 background 속성에서 사용 그라데이션 속성은 표준화되었으나 구형 모던 브라우저에서는 브라우저 접두사를 붙여야 동작함 webkit : 사파리 5.1 ~ 6.0 mox : 파이어폭스 3.6 ~ 15 o : 오페라 11.1 ~ 12.0 선형 그라데이션 : 수직 방향이나 수평 방향으로, 혹은 대각선 방향으로 색상이 일정하게 변하는 것 선형 그러데이션을 지정할 때는 방향과 색상이 필요하다 linear-gradient( 각도 to 방향 , color-stop , [color-stop,...]); 위 구문이 표준 구문이지만 ‘위치’와 ‘각도’를 표시하는 방법이 중간에 몇 번 바뀌다 보니 브라우저별, 버전..

background-color 속성 : 배경색 지정 background-clip 속성 : 배경을 어디까지 적용할지 지정 background-image 속성 : 배경 이미지 파일 경로 지정 background-size 속성 : 배경 이미지 크기 조절 background-position 속성 : 배경 이미지를 반복하지 않을 경우, 배경 이미지를 표시할 위치 지정 background-origin 속성 : 배경 이미지를 배치하기 위한 기준 설정 background-attachment 속성 : 배경 이미지를 고정하는 속성 background-color 속성 : 배경색 지정 background-color : 색상; 웹 문서의 요소에 배경색 지정 16진수나 rgb 값, rgba 값 또는 색상 이름 사용 배경 색은 상..

list-style-type : 순서 없는 목록의 불릿이나 순서 목록의 숫자를 바꾸는 속성 list-style-type : none | 순서없는 목록의 불릿 | 순서목록의 번호 none : 순서없는 목록의 불릿없애기 순서없는 목록의 불릿 disc : 채운 원 (디폴트값) circle : 빈원 square : 채운 사각형 none : 불릿 없애기 순서 목록의 숫자 바꾸기 decimal : 1로 시작하는 십진수 - 디폴트값 decimal-leading-zero : 앞에 0이 붙는 십진수 lower-roman : 소문자 로마 숫자 upper-roman : 대문자 로마숫벳 lower-alpha / lower-latin : 소문자 알파벳 upper-alpha / upper-latin : 대문자 알파벳 armeni..

font-family : 폰트패밀리란 웹 문서 전체에 'Nanum Gothic'을 적용하는데, 만일 해당 글꼴이 없으면 다음 글꼴인 'sans-serif'를 적용하고 그 글꼴도 없다면 '굴림' 글꼴로 적용하라는 뜻 font-family: 'Nanum Gothic', sans-serif; ex. font-family : 글꼴지정 브라우저 기본 글꼴 사용 Nanum Pen Script 웹 폰트 사용 Nanum Pen Script 웹 폰트 사용 출력화면 font-size : 글자 크기 지정 font-size: 절대크기 | 상대크기 | 크기 | 백분율 사용할 수 있는 값 : 절대크기, 상대크기, 숫자, 백분율 기본값은 상대크기인 medium이다 font-size 속성은 상속이 된다 px 단위 px 단위를 사용하..

@font-face 속성 웹폰트(web-font) : 웹 문서 안에 글꼴정보도 함께 저장하고 있다가 사용자가 웹문서에 접속하면 글꼴을 사용자 시스템으로 다운로드시켜 사용하는 글꼴 사용자 시스템에 없는 글꼴이더라도 웹 제작자가 의도한 대로 텍스트를 표시할 수 있다 구글 웹폰트 사용하기 1. https://fonts.google.com/earlyaccess 2. 한글 폰트 검색 3. Link 항목에 있는 소스 복사 & 글꼴 이름 기억 4. 웹 문서의 style 태그 안에 붙여넣기 5. font-family 속성을 이용하여 웹 폰트 글꼴 이름 사용 항목 내의 내용을 복사해 사용하면 된다 import속성을 사용할 수도 있음

스타일 태그 스타일 형식 선택자 {스타일속성 : 속성값; ... } 내부 스타일시트 : head태그 안에서 정의 인라인스타일 : 태그 안에 style속성을 통해 외부 스타일시트 : .css파일로 정의한 후 link태그를 이용해 불러온다 주요 선택자들 * : 전체 선택자 페이지 내부에 있는 모든 요소들을 대상으로 적용할 때 사용 웹브라우저마다 기본 마진, 패딩값이 있다 브라우저마다 그 값이 같지 않기 때문에 일반적으로 패딩과 마진값을 0으로 리셋한다 * { margin: 0; padding: 0; } 태그 선택자 태그명 { 스타일 } 특정 태그에 적용 클래스 선택자 문서 안에서 여러 번 반복할 스타일을 지정할 때 사용한다 .스타일명 { 스타일 } 태그에서 class를 통해 불러온다 태그명.스타일명 { 스타..

JAVABean(자바빈) : 데이터를 표현하는 목적으로 사용되는 자바 클래스 DB의 데이터 처리를 위해서 만들어지는 클래스 뷰페이지와 로직페이지를 서로 분리하기 위해 만들어지기 시작했다 하나의 테이블에서는 하나의 DTO(VO)와 DAO가 세트로 이루어진다 DTO(Data Transfer Object), VO(Value Object) 데이터를 DB로 보내거나 DB로부터 레코드를 가져올 때 하나의 덩어리 즉 객체로 만드는 클래스 DAO(Data Access Object) 객체화된 DTO를 가지고 DB에 접속 시 사용되는 메소드들을 정의한 클래스 규칙 클래스는 반드시 특정 패키지 소속이어야 한다 DTO의 멤버변수는 Property(프로퍼티)라고 부른다 Property명은 반드시 테이블의 컬럼명과 동일해야 한다..

영역(Scope) : 데이터를 공유할 수 있는 범위 내장객체를 뜻한다 속성(Attribute) : 데이터 1. page영역 : pageContext 해당 페이지에서만 사용되는 객체 service메소드가 실행되는 동안만 유지되는 객체 2. request영역 : request 1:1 페이지 영역 클라이언트의 요청이 처리되는 동안 유효한 범위 포워딩을 통하여 여러 개의 페이지에서 유지될 수 있다 3. session영역 : session 세션이 유지되는 동안 처리되는 범위(웹브라우저가 실행되는 동안) 프로젝트 하나 당 한 개의 session 객체가 생성된다 4. aaplication영역 : application 웹서버가 유지되는 동안 유효한 범위 웹서버당 하나만 생성된다 속성(atrribute) 관련 메소드 O..