@font-face 사용규칙(eot, woff, otf/ttf, svg/svgz 차이) 지난 시간엔 태그와 @import로 외부 자원으로 연결하거나 글꼴을 이용하는 방법을 배웠습니다. 외부 문서를 연결하는 link 태그 사용법 @import rule 사용법, link 태그와 차이 글꼴을 지정하는 font-family 속성(serif, sans-serif차이) 오늘은 @font-face 규칙을 이용하려 웹폰트를 이용하는 방법입니다. @font-face 사용법 @font-face는 글꼴 파일을 html에 속에 삽입하여 사용자 컴퓨터에 설치되지 않은 글꼴을 서버에서 내려받아 사용할 수 있는 방법입니다. 사용 예 ☞ *나눔고딕을 한글과 영문으로 적은 것은 영문이름을 인식하지 못하는 브라우저에 대비하여*한글 글꼴..

1. display display: none - 컨트롤을 생성하지 않도록 설정하여 공간 차지도 하지 않습니다. display: inline - 아무런 선택을 하지않으면 기본값으로 선택되는 속성으로 inline요소로 작용하도록 설정하여 줄바꿈이 일어나지 않습니다. display: block - block요소로 작용하도록 설정하여 줄바꿈이 일어나게 됩니다. display: inline-block - 요소는 inline으로 작용하지만 내부는 block처럼 작용하도록 설정합니다. 2. visibility visibility: visible - 아무런 선택을 하지않으면 기본값으로 선택되는 속성으로 그대로 보여줍니다. visibility: hidden - 요소가 보여지지 않지만 공간은 그대로 차지하고 있도록 요소를..

1. text-align을 사용하는 방법 hr{text-align: center;} 2. text-align과 margin을 같이 사용할 경우 hr{margin: 0px auto;} -> text-align과 margin을 같이 사용할 경우 margin에 의해서 text-align이 무시되어 가운데 정렬이 되지 않습니다. 그러므로 margin의 값을 auto로 설정하여 가운데 정렬을 시킵니다. 2. margin 설정 -1) 4면이 모두 같을 때 margin: 상 우 하 좌margin: 0px 0px 0px 0px; margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px; -2) 4면이 모두 다를 때margin: 0px; -3) 상하, ..

1. 가로(width), 세로(height)의 값을 100%로 한 상태에서 일정px의 값을 빼는 방법 #main {width: calc(100% - 77px);height: calc(100% - 77px);} -> CSS3에서 clac함수를 사용하여 계산이 가능합니다. 2. 지원 브라우저브라우저 지원여부 마이크로소프트 ( MicroSoft )인터넷 익스플로러 ( Internet Explorer ) 9부터 지원 구글 ( Google )크롬 ( Chrome ) 지원 모질라 ( Mozilla ) 파이어폭스 ( Firefox )

1. CSS파일에서 html 및 body의 height의 값을 100%로 지정해 줍니다. html { height: 100%;}body {height: 100%;}#contents_div {min-height: 100%;background: red;} 2. contents_div의 min-height의 값을 100%로 지정해주면 됩니다.

1. color name을 이용한 색상표Color NameColor HEXColorAliceBlue#F0F8FF AntiqueWhite#FAEBD7 Aqua#00FFFF Aquamarine#7FFFD4 Azure#F0FFFF Beige#F5F5DC Bisque#FFE4C4 Black#000000 BlanchedAlmond#FFEBCD Blue#0000FF BlueViolet#8A2BE2 Brown#A52A2A BurlyWood#DEB887 CadetBlue#5F9EA0 Chartreuse#7FFF00 Chocolate#D2691E Coral#FF7F50 CornflowerBlue#6495ED Cornsilk#FFF8DC Crimson#DC143C Cyan#00FFFF DarkBlue#00008B Dark..