본문 바로가기

분류 전체보기83

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.
HTML을 스타일리쉬하게 만드는 CSS CSS란? CSS(Cascading Style Sheets)는 HTML문서를 화려하고 아름답게 만들어주는 언어입니다. HTML 코드만으로는 시각적인 아름다움, 반응형 웹페이지를 만들수가 없기 때문에, CSS를 이용해서 글꼴, 색상, 레이아웃 및 애니메이션 등을 제어합니다. 사용법 CSS를 HTML에 적용하는 방법은 3가지가 있습니다. 인라인 (Inline Style) : HTML 태그에 직접 입력 첫번째 방법은 태그 안에 직접 CSS언어를 입력하는 것입니다. 이 때 CSS가 적용되는 범위는 직접 입력한 태그에만 해당됩니다. Hello, world! 태그 안에 style 속성을 추가합니다 큰 따옴표 안에 스타일을 정의합니다 스타일 내에서 속성과 속성값은 한쌍이고 "속성: 속성값;"으로 적습니다 위의 예시는.. 2023. 6. 13.

티스토리툴바