Developer

패딩 padding, 마진 margin Document margin : 요소와 요소 사이 여백 현재 요소 주변의 여백 마진을 이용하면 요소와 요소 간의 간격 조절 가능 margin-top: 크기 | 백분율 | auto margin-left: 크기 | 백분율 | auto margin-right: 크기 | 백분율 | auto margin-bottom: 크기 | 백분율 | auto margin: 크기 | 백분율 | auto ex. margin 속성 - 요소와 요소 사이 여백 출력화면 padding : 콘텐츠 영역과 테두리 사이의 여백(테두리 안쪽 여백) padding-top: 크기 | 백분율 | auto padding-left: 크기 | 백분율 | auto padding-right: 크기 | 백분율 | aut..

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를 통해 불러온다 태그명.스타일명 { 스타..

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