font 속성 - 간략하게 요약하여 표현하기 [HTML/CSS] 글자색 변경하기 (font-color) [HTML/CSS] 글자 굵기 변경하기 (font-weight) [HTML/CSS] 글자 이탤릭체, 밑줄, 취소선 변경하기 [HTML/CSS] 대/소문자 변경하기 (text-transform) [HTML/CSS] 작은 대문자로 표시하기 (font-variant) [HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) [HTML/CSS] 구글 웹 폰트 사용하기 (@font-face) 앞에서 포스팅 했던 위의 소스들을 여러개 적용하기 위해서 글꼴 스타일을 하나하나 코딩하려고 하면 소스가 너무 지저분해질 것입니다. See the Pen Untitled by wjdxo513 (@wjdxo513..
[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) 이전 포스팅에서는 웹 문서에서 시스템 폰트를 사용하는 방법에 대해 알아보았습니다. 시스템 폰트는 속도가 빠르다는 장점이 있지만 사용자 디바이스에 설치가 되어있어야 하기에 다양한 폰트는 사용하기가 힘듭니다. 또한 설정한 시스템 폰트가 존재하지 않는다면 적용되지 않는 문제도 있죠. 하지만 웹 폰트를 사용하면 모든 디바이스에 예쁜 디자인의 폰트를 적용시킬 수 있습니다. 이번 포스팅에서는 구글 웹 폰트를 사용하는 방법에 대해 알아보도록 하겠습니다. 웹 폰트(Web Font)란? 온라인 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 웹 전용 폰트를 말합니다. 이렇게 한다면 방문자의 디바이스에 특정 폰트의 설치 여부와 상관없이 동..
문장의 가독성에 영향을 끼치는 요소가 무엇이냐고 물어본다면 저는 가장 먼저 글꼴이라고 말할 수 있을 정도로 텍스트 가독성에 있어 글꼴은 매우 중요한 요소입니다. 웹 문서에서 글꼴(폰트)은 font-family 속성을 통해 바꿀 수 있습니다. font-family는 말 그대로 폰트들의 집합, 즉 여러 개의 글꼴을 한 군데 모아둔 것으로 생각하시면 됩니다. 이번 포스팅에서는 웹 문서에서 웹 문서의 글꼴을 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 글꼴(폰트) 변경하기 font family와 generic family font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등) generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-se..
웹문서의 영문자 글꼴에서는 '작은 대문자'라는 설정도 할 수 있습니다. 여기서 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것인데요. font-variant 속성으로 지정할 수 있습니다. 작은 대문자로 표시하기 See the Pen 작은 대문자로 표시하기1 by wjdxo513 (@wjdxo513) on CodePen. font-variant 속성 값 normal : 기본 값 small-caps : 작은 대문자로 표시하기 font-variant 속성에 small-caps 값을 사용하면 위와 같이 작은 대문자로 표시됩니다. 한글(영어) 형태로 문장을 기술할 때 사용해주면 좋습니다. CSS 처리 See the Pen 작은 대문자로 표시하기2 by wjdxo513 (@wjdxo513) on Cod..
영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 CSS의 text-transform 속성을 이용하시면 됩니다. 이번 포스팅에서는 텍스트의 대/소문자를 변형하는 text-transform 속성에 대해 알아보도록 하겠습니다. 문장 대/소문자 변경하기 See the Pen 대/소문자 변경하기1 by wjdxo513 (@wjdxo513) on CodePen. text-trasnform 속성 값 none : 기본값 capitalize : 문장의 첫글자만 대문자로 변형 uppercase : 문장 대문자로 변형 lowercase : 문장 소문자로 변형 ※ HTML 태그는 , , , , , 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다. CSS 처리 See the Pen 대/소문자 변경하기2 by wjdxo51..
웹 문서를 만들다 보면 이탤릭체, 밑줄, 취소선등을 통해 텍스트 스타일을 바꿔주고 싶을 때가 있습니다. 이렇게 문장 일부분의 스타일을 바꿔주면 다른 문장과 대비되어 강조되는 효과를 줄 수 있는데요. 글자 기울기는 font-style로 설정할 수 있고 밑줄과 취소선은 text-decoration 속성을 통해 설정할 수 있습니다. 이번 포스팅에서는 텍스트 스타일을 바꿔주는 방법에 대해 알아보도록 하겠습니다. 이탤릭체(font-style) 사용하기 See the Pen 이탤릭체1 by wjdxo513 (@wjdxo513) on CodePen. style 속성 값 normal : 기본값 italic : 이탤릭체 글꼴로 디자인된 폰트 사용 oblique : normal 상태 글씨를 그냥 기울여 씀 initial ..
웹 문서를 만들다보면 CSS로 글자를 굵게 만들어야 할 경우가 생길 수 있겠죠? 이번 포스팅에서는 CSS로 텍스트를 굵기를 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 굵게 만들기 font-weight 종류 See the Pen 글자 굵게 by wjdxo513 (@wjdxo513) on CodePen. font-weight 속성 값 font-weight : normal; = 보통 굵기로 설정합니다. (숫자 400과 같은 값입니다) font-weight : bold; = 굵은 굵기로 설정합니다. (숫자 700과 같은 값입니다) font-weight : bolder; = 상속된 값보다 굵은 굵기입니다. font-weight : lighter; = 상속된 값보다 얇은 굵기입니다. font-weight :..
개발을 하다 보면 웹 문서에서 글자 색상을 바꾸고 싶은 경우가 종종 있을 수 있습니다. 예를 들자면 문장의 중요한 내용의 글자색을 적절히 조절하여 강조를 할 수도 있겠죠. 아마 조금 더 가독성이 있는 웹 문서를 만들 수 있을 것입니다. 이번 포스팅에서는 웹 문서에서 글자 색상을 변경하는 방법에 대해 알아보도록 하겠습니다. ※ 컴퓨터에서 색을 표현하는 방식 RGB 색상에 대하여 컴퓨터에서 색상은 빛의 삼원색인 빨강(red), 초록(green), 파랑(blue)의 3가지 색의 조합으로 표현합니다. 위의 3가지 색상을 섞으면 모든 색상을 다 사용할 수 있지요. 이러한 방식을 빨강(red), 초록(green), 파랑(blue) 3가지 색상의 앞글자를 따서 RGB라고도 합니다. 형태는 RGB(빨강값, 초록값, 파..
가독성이 좋은 웹 문서를 만들기 위해서는 폰트 사이즈를 적절하게 설정해주어 보는 사람들로 하여금 정보를 빠르게 캐치할 수 있도록 해야 합니다. 이 font-size는 개발자가 적절하게 설정해 줄 수 있는데요. 이번 포스팅에서는 웹 문서의 텍스트 사이즈를 조절하는 방법에 대해 알아보도록 하겠습니다. HTML 사용 태그 사용 See the Pen 글자크기 조절1 by wjdxo513 (@wjdxo513) on CodePen. 첫 번째로 소개해드릴 방법은 font size를 활용하는 방법으로 크기는 1 ~ 7까지 설정할 수 있습니다. 3으로 지정하시면 일반 텍스트 크기입니다. 그리고 +, -를 하시면 기본 사이즈인 3에서 증감할 수 있습니다. 인라인 방식 See the Pen 글자크기 조절2 by wjdxo5..
웹 문서에서 장문의 텍스트를 작성하다 보면 자간과 행간이 적절하지 않아 문장의 가독성에 악영향을 미치는 경우가 종종 있는데요. 이럴 때는 HTML과 CSS를 활용하여 글자와 행의 간격을 조절해줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 자간과 행간을 조절하는 방법에 대해 알아보도록 하겠습니다. 자주 쓰는 크기 단위 - em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함. - rem : root em, HTML 문서의 root 요소인 에 지정된 크기를 기준으로 상대적인 값을 가지게 됨 - ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함. - px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐. - % : percent, 기본글꼴의 크기에 대하여..
CSS 가상 클래스는 선택자에 추가하는 키워드로, 선택한 요소가 특정 상태를 만족할 때 적용됩니다. 예를 들어 :hover를 사용하면 마우스 포인터를 요소에 오버하는 이벤트가 발생하였을 때 특정 CSS를 지정하실 수 있습니다. 가상 클래스 종류 가상 클래스 종류 : link = 방문한 적이 없는 링크 : visited = 방문한 적이 있는 링크 : hover = 마우스를 롤오버 했을 때 : active = 요소를 클릭했을 때 : focus = 요소가 포커스 될 때 (입력 태그 등) : checked = 라디오 버튼이나 체크박스가 체크되었을 때 : first = 첫 번째 요소 : first-child = 부모 요소의 첫 번째 자식을 호출 : first-line = 문단의 첫 번째 줄에 적용 (블록 레벨 요..
일치 선택자(Basic Combinator) A와 B를 동시에 만족하는 요소를 선택 See the Pen 일치 선택자 by wjdxo513 (@wjdxo513) on CodePen. 일치선택자는 두 가지 조건을 동시에 만족하는 요소에 적용됩니다. 위의 예제에서 li태그에서 green이라는 클래스명으로 지정된 요소들에만 CSS가 적용되는 것을 보실 수 있습니다. 자식 선택자(Child Combinator) A의 자식 요소 B를 선택 자식은 부모 바로 밑에 있는 요소 ‘>'는 자식 선택자의 기호 See the Pen 자식 선택자 by wjdxo513 (@wjdxo513) on CodePen. 자식 선택자는 A > B의 형태로 설정되며 여기서 > 기호는 자식 선택자를 의미합니다. 위의 예제에서는 div의 자식..
CSS 선택자(Selector)란? CSS에서는 스타일 속성을 적용하는 요소들을 선택자라고 합니다. CSS 문법에서는 가장 앞에 나오는 대상이 되는 타겟을 의미하며 이를 통해 스타일을 적용할 수 있게 됩니다. 이 선택자는 태그의 전체가 될 수도 있고, 때로는 여러 개의 요소들을 묶어 별도의 선택자로 만들 수도 있습니다. 전체 선택자(Universal Selector) /* 사용법 */ *{속성 : 속성값;} 전체 선택자는 말 그대로 스타일의 모든 요소에 적용할 때 사용합니다. 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용하며 전체 선택자로는 *(별표)를 사용합니다. See the Pen 전체 선택자 by wjdxo513 (@wjdxo513) on CodePen. 전체 선택자를 활용하여 글씨는 ..