[ 웹 ] SEASON2 11주차 1교시 / Week11 Class1: 듣고 있으면 저절로 이해되는, CSS3기본 폰트 속성 실습 / don't worry

▶ font-family 지정하는 법 글꼴은 font-family로 지정하며 글꼴이 없는 경우를 대비해 기본 글꼴을 뒤쪽으로 배치합니다 한글 글꼴에 포함된 영어 글꼴은 그닥 모양이 이쁘지 않습니다 그래서 영문 글꼴을 앞으로 두고 한글 글꼴을 뒤에 배치하는 방법을 사용하여 영어 우선으로 하고 한글은 뒤로 가서 사용하도록 정해 줍니다 1 font-family:굴림, verdana, sans-serif; 로 했을 경우 2 font-family:verdana, 굴림, sans-serif; 로 했을 경우 1번에서는 굴림 글꼴안에 영문과 한글이 모두 들어 있어서 전부 굴림으로 표시되었습니다 하지만 2번을 보면 영어는 verdana로, 한글은 굴림으로 적용된 것을 알 수 있습니다 verdana 폰트는 영문 폰트라 한글이 들어 있지 않으므로 한글은 그 다음인 굴림에서 찾아 적용한 것입니다 CSS 제작시 font-family: 돋음; 이라고 하면 안 되고, font-family: 돋음, Dotum, Baekmuk Dotum, Undotum, Apple Gothic, Latin font, sans-serif; 이라고 해야 한다 ▶ font-family 한글 폰트 특징 한글 글꼴은 그 수가 많지 않아서 선택의 폭이 좁습니다 가변폭 글꼴과 고정폭 글꼴이 있는데 고정폭은 글자사이 간격을 조절할 수 없으므로 가변폭 글꼴을 사용하는 것이 좋습니다 가변폭 글꼴 : 굴림(Gulim), 돋움(Dotum), 바탕(Batang), 궁서(Gungsuh) 고정폭 글꼴 : 굴림체(GulimChe), 돋움체(DotumChe), 바탕체(BatangChe), 궁서체(GungsuhChe) 만약 굴림을 폰트로 지정하고 싶다면 아래와 같이 하면 됩니다 (한글로 된 폰트명은 공백이 없더라도 쌍따옴표로 둘러싸는 것이 좋습니다 ) font-family: "굴림", Gulim, Arial, sans-serif; 브라우저에 따라서 한글 폰트의 영문 이름 이나 또는 한글 이름 ▶ 웹폰트란? 방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다 예를 들면, 웹폰트를 사용하지 않았을 경우 나눔고딕 폰트 미설치 PC에서는 기본 폰트인 돋움 폰트가 노출되고 나눔고딕 폰트 설치 PC에서는 나눔고딕 폰트가 노출됩니다 ▶ font-size 속성 일반적으로 많은 사람들이 em단위를 쓰면 해상도에 따라서 크기가 달라진다고 오해하는 경우가 많습니다 하지만 em을 쓰는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절했을 때 동작하게 하기 위함입니다 최근의 브라우저들이 모두 zoom 기능을 지원하고 있는 덕분에, 사실 em대신 px을 사용해도 무방합니다 em으로 취할 수 있는 이득이 거의 없기때문이지요 하지만 Responsive Web Design을 추구하는 작업을 하시거나, 화면 크기에 따라서 동적으로 body의 font-size를 조절하는 특수한 작업을 하실 경우에는 em을 활용하여 scaleable한 UI를 구성할 수도 있습니다 또한 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있습니다 pt : points(포인트) - 1포인트는 0 72인치 px : pixels(픽셀) - 화면 해상도에 대한 상대크기 %, em - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기 ▶텍스트 속성 1 color 2 letter-spacing 3 line-height 4 text-indent 5 text-align 6 text-decoration 7 text-shadow ▶color 속성 color 속성은 텍스트의 색상을 설정합니다 웹 페이지에서 텍스트의 기본 색상은 검정색입니다 body태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용됩니다 하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 body태그에 명시된 속성값보다 우선 적용됩니다 ▶text-indent 속성 단락의 첫 줄에 들여쓰기할지 안 할지를 설정합니다 웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않습니다 ▶text-align 속성 텍스트의 수평 방향 정렬을 설정합니다 text-direction 속성과는 상관없이 우선적으로 적용됩니다 ▶text-decoration속성 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용합니다 ▶text-shadow속성 텍스트에 간단한 그림자 효과를 설정합니다 #FontFamilly,FontSize,#폰트속성,