웹디자인7 CSS font-style, 텍스트 스타일을 변경하는 속성 FONT-STYLE 속성이란? font-size는 텍스트 크기, font-family는 글꼴을 선택하는 속성입니다. font-style는 주로 폰트를 이탤릭체로 변경하는데 사용하는 속성입니다. 사용법 p { font-style: italic; } font-style 뒤에 속성값을 입력합니다 italic : 글꼴이 기울어집니다 normal : 기본값입니다. 기울어지지 않은 평범한 글꼴입니다 oblique : 마찬가지로 글꼴을 기울입니다 italic과 oblique의 차이점? italic도 글꼴을 기울이고, oblique도 같은 기능을 한다면 왜 이렇게 두개나 만들었는지 궁금해졌어요. 그래서 이번에도 검색해보았습니다 itatic을 사용한다는건 폰트 제작자가 명시적으로 디자인한 이탤릭체 스타일을 이용하라는 뜻.. 2023. 6. 24. CSS font-family, 웹 폰트를 정의하는 속성 FONT-FAMILY 속성이란? CSS의 여러 속성 중 color와 함께 많이 사용되는 속성 같아요. font-family는 웹페이지에서 사용할 폰트(글꼴)을 정하는데 사용합니다. 요즘 웹페이지는 디자인 요소가 중요하고 특히 텍스트는 Typography라고 할 정도로 중요합니다. 글꼴이 일반 돋움체나 맑은고딕을 사용할 때보다 산돌고딕이나 프리텐다드를 사용하면 더 예뻐보이잖아요. 사용법 body { font-family: Arial, Helvetica, "Times New Roman"; } 위에서는 body를 예시로 들었습니다. 대부분 body에 전체 글꼴을 정의하더라구요 font-family: 뒤에 글꼴을 입력합니다 폰트에 공백이 있을 경우는 따옴표로 묶어줘야 해요 예시 여러 폰트를 사용해본 예시입니다... 2023. 6. 23. CSS font-size, 텍스트 크기 조절을 위한 속성 FONT-SIZE 속성이란? font-family와 함께 다니는 속성인 필수 도구입니다. 웹페이지의 텍스트 크기를 조절하는 중요한 역할을 합니다. 결국 컨텐츠를 잘 보여주기 위해서는 폰트 컬러, 글꼴 유형 뿐만 아니라 크기도 잘 정의해야 해요. 웹페이지의 가독성과 사용자 경험에 큰 영향을 미치기 때문입니다. 사용법 h1 { font-size: 32px; } p { font-size: 16px; } h1 요소와 p 요소의 텍스트 크기를 정한 예시입니다 font-size 속성 뒤에 픽셀을 입력합니다. 예시에서는 픽셀을 입력했지만 다른 방식으로도 가능합니다. px : 기본적인 값 픽셀입니다. 우리가 흔히 알고 있는 폰트 크기와 같습니다. 12폰트는 12px 폰트인거죠. %(백분율) : 아래의 em과 비슷할수도.. 2023. 6. 22. CSS color 텍스트 폰트에 색상을 넣는 속성 CSS COLOR란? color는 텍스트에 색을 입히는 속성입니다. CSS에서 가장 많이 쓰는 단어일 것 같아요. 쉽게 사용할 수 있는 문법인데, 저는 계속 color를 자꾸 font-color로 사용하는 실수를 하게 되네요. 색을 변경하려면 color 속성을 씁니다. 사용법 h1 { color : blue; } color: 뒤에 텍스트 색상을 입력합니다 색상을 넣는 4가지 방법 위의 예시에서는 blue를 바로 입력헀는데요. 색을 넣는 방법은 크게 4가지가 있습니다. 1. 지정된 색 사용 color: yellow; 우리가 흔히 생각하는 컬러는 이미 명칭이 정해져 있더라구요. 제가 원래 알던 건 16개 정도였는데, 훨씬 더 많은 색들이 named color로 정해져 있었습니다. 2. 16진수 사용 back.. 2023. 6. 17. 이전 1 2 다음
