Developer

CSS 스타일, 속성 - 캡션, 셀, 정렬 caption-side : 캡션(설명글)은 기본으로 표 위쪽에 표시됨 이 속성을 이용해 아래쪽에 표시 가능 caption-side: top | bottom border - 표의 바깥 테두리와 셀 테두리 모두 지정해야 함 ex. caption-side - 캡션(설명글)은 기본으로 표 위쪽에 표시됨. 프로축구 경기 일정 울산 울산 vs 인천 부산 부산 vs 대전 서울 서울 vs 강원 출력화면 border-collapse : 표 테두리와 셀 테두리를 합칠 것인지 설정 border-collapse : collapse | separate collapse - 테두리를 하나로 합쳐 표시 separate - 테두리를 따로 표시 기본값 ex. border-collapse - 표..

CSS 포지셔닝 : CSS에 웹 문서 요소를 적절히 배치하는 것 box-sizing : 박스 모델 너비 값의 기준을 지정함 box-sizing: content-box | border-box content-box - width 속성값을 콘텐츠 영역 너비 값으로 사용 기본값 border-box - width 속성 값을 콘텐츠 영역에 테두리 까지 포함한 박스모델 전체 너비값으로 사용 CSS를 이용해 여러 박스 모델을 화면상에 배치하려면 박스 모델의 너비 값을 정확히 계산해야 함 width 값을 계산하기 어렵다면 box-sizing:border-box;로 지정해 박스 모델 너비를 알기 쉽게 바꾸어 놓는 것도 좋은 방법 ex. box-sizing 속성 - 박스 모델 너비 값의 기준을 지정함 box-sizing =..

패딩 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-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 단위를 사용하..