글자 폰트 변경 font family와 generic family font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등) generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-serif, monospace 등) 이렇게 웹 문서에 포함된 텍스트들은 사용자의 글꼴(font family)을 이용해 웹 브라우저에 표현됩니다. 하지만 해당 글꼴이 설치되어 있지 않은 경우 브라우저의 기본 폰트값이 나타나 각각 다른 글꼴로 표시되는데 이를 generic family라고 합니다. 이 generic family는 기본 글꼴(web-safe font)로써 대부분의 시스템에 설치되어 있기 때문에 웬만하면 제대로 표시됩니다. generic family ..
HTML, CSS
작은 대문자로 표시하기 사과(apple) 사과(apple) font-variant 속성 값 normal : 기본 값 small-caps : 작은 대문자로 표시하기 font-variant 속성에 small-caps 값을 사용하면 위와 같이 작은 대문자로 표시됩니다. 한글(영어) 형태로 문장을 기술할 때 사용해주면 좋습니다. CSS 처리 HTML 사과(apple) 사과(apple) CSS .normal{font-variant:normal;} .small-caps{font-variant:small-caps;} 결과 : 사과(apple) 사과(apple)
문장 대/소문자 변경하기 aPple apple apple APPLE text-trasnform 속성 값 none : 기본값 capitalize : 문장의 첫글자만 대문자로 변형 uppercase : 문장 대문자로 변형 lowercase : 문장 소문자로 변형 CSS 처리 HTML aPple apple apple APPLE CSS .none{text-transform:none;} .capitalize{text-transform:capitalize;} .uppercase{text-transform:uppercase;} .lowercase{text-transform:lowercase;} 결과 : aPple Apple APPLE apple
이탤릭체(font-style) normal italic oblique style 속성 값 normal : 기본값 italic : 이탤릭체 글꼴로 디자인된 폰트 사용 oblique : normal 상태 글씨를 그냥 기울여 씀 initial : 이 속성의 기본값 사용. inherit : 부모 요소의 스타일을 상속 css html normal italic oblique css .normal{font-style: normal;} .italic{font-style: italic;} .oblique{font-style: oblique;} 밑줄,취소선(text-decoration) 사용 기본 윗줄 밑줄 취소선 text-decoration 속성 값 none : 걸려있는 속성을 무효화합니다. underline : 텍스트..
font-weight 종류 normal bold bolder lighter initial inherit 100 200 300 400 500 600 700 800 900 font-weight 속성 값 font-weight : normal; = 보통 굵기로 설정합니다. (숫자 400과 같은 값입니다) font-weight : bold; = 굵은 굵기로 설정합니다. (숫자 700과 같은 값입니다) font-weight : bolder; = 상속된 값보다 굵은 굵기입니다. font-weight : lighter; = 상속된 값보다 얇은 굵기입니다. font-weight : initial; = 기본값으로 설정합니다. font-weight : inherit; = 부모 요소의 값을 상속 받습니다. font-weigh..
태그 사용 글자색상 : 빨강 글자색상 : 파랑 글자색상 : 노랑 글자색상 : 초록 인라인 방식 글자색상 : 빨강 글자색상 : 파랑 글자색상 : 노랑 글자색상 : 초록 css 글자색상 : 빨강 글자색상 : 파랑 글자색상 : 노랑 글자색상 : 초록
태그 사용 글자크기 : 1 글자크기 : 2 글자크기 : 3(기본) 글자크기 : 3+1 글자크기 : 3-1 글자크기 : 4 글자크기 : 5 글자크기 : 6 글자크기 : 7 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다. 인라인 방식 글자 크기 : 1 글자 크기 : 10px 글자 크기 : 2em 글자 크기 : 200% HTML 태그의 style 속성을 사용하는 방법으로 font-size를 명시하고 크기를 써주시면 됩니다. css 사용 p { font-size: 12px; } div { font-size: 150%; } .em { font-size: 2em; } .re..
자주 쓰는 크기 단위 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - rem : root em, HTML 문서의 root 요소인 에 지정된 크기를 기준으로 상대적인 값을 가지게 됨 - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐. - pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위 자간 설정 letter-spacing : 글자 사이의 간격 (자간) letter-spacing : normal; letter-spacing : 1px; letter-spacing : -1px; letter-..
