CSS13 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. CSS background-image, 웹페이지에 배경화면 이미지를 넣어보자 BACKGROUND-IMAGE란? background-image를 이용하면 HTML 요소에 배경 이미지를 정할 수 있습니다. background-color는 특정한 색을 사용하는 반면, background-image는 이미지 파일을 적용할 수 있습니다. 기본적인 사용법 .element { background-image: url("image.jpg"); } CSS 선택자 안에 background-image 속성을 입력합니다 속성값은 url(이미지가 있는 주소)를 입력합니다 예시 아래는 저작권없는 이미지 하나를 선택해서 배경 이미지로 설정해본 거에요 See the Pen bg-image by 40's Programmer (@40sProgrammer) on CodePen. 함께 사용되는 속성들 backgrou.. 2023. 6. 16. CSS background-color 웹페이지, HTML 요소에 배경색을 넣는 속성 BACKGROUND-COLOR 란? background-color 속성은 요소의 배경 색상을 정의하는 데 사용됩니다. 색상 값을 지정하면 웹 페이지의 모양과 느낌을 변형하여 더 매력적이고 시각적으로 매력적으로 만들 수 있습니다. 미묘한 배경색을 원하든 대담하고 생생한 색상을 원하든 '배경색' 선택기가 도움이 됩니다. 기본적인 사용법 .element { background-color: red; } CSS 선택자 안에 background-color 속성을 입력합니다 속성값에는 color를 입력합니다 속성값을 넣는 4가지 방법 위의 예시에서는 red를 바로 입력헀는데요. 색을 넣는 방법은 크게 4가지가 있습니다. 1. 지정된 색 사용 background-color: yellow; 우리가 흔히 생각하는 컬러는 .. 2023. 6. 14. 이전 1 2 3 4 다음
