Programming

[CSS 기초] CSS background 배경을 제어하는 속성

CSS 배경을 제어하는 속성 오늘은 CSS 속성 중 배경을 제어하는 속성들에 대해 알아보겠습니다. ✨ 배경 색상 조정 ( background-color ) 배경 색상을 입력하는 방법에는 총 네 가지가 있습니다. (1) 색상 이름 background-color: blue; (2) 16진수 색상 background-color: #45a1de; (3) RGB 색상 - Windows RGB 색상 표 (Red, Green, Blue) background-color: rgb(69, 161, 222); (4) RGBA 색상 - RGB에 알파 채널 값을 더한 색상 값. 알파 채널(alpha channel)은 색상의 투명도를 나타내는 채널. background-color: rgba(69, 161, 222, 0.5); ✨..

[CSS 기초] CSS 텍스트 스타일

✨ CSS 텍스트 관련 스타일을 지정하는 속성들 font-size : 텍스트의 크기를 지정 값 단위: px / em / pt / % / rem font-weight : 글꼴 두께를 지정 값: 100-900 / bold / bolder / normal line-height : 줄 간격을 지정 값 단위: px / em / pt / % / rem font-family : 글꼴을 지정 값: "font name" font-variant : 소문자를 작은 크기의 대문자로 바꾸는 속성 값: small-caps / normal color : 글꼴 색을 지정 값: color name / #ffffff / rgb(0,0,0) / rgba(0,0,0,0.5) text-decoration : 텍스트 밑줄 표시 or 제거 값 ..

[CSS 기초] CSS 선택자(Selector), CSS 적용 우선순위

CSS 선택자(Selector)는 무엇인가? 말 그대로 요소를 선택하게 만들어주는 것. CSS는 HTML 요소들의 스타일을 정의한다. 스타일을 정의하기 위해서는 스타일을 정의할 요소를 선택해야하는데 이 때 사용되는 것이 선택자(Selector)이다. 위의 이미지에서 h1이 선택자고 괄호 안의 속성(property 혹은 attribute)과 값들로 h1의 스타일을 꾸며주게 된다. 이러한 선택자에는 여러 종류가 있다. CSS 선택자(Selector) 종류 1. 기본선택자 전체 선택자, 태그 선택자, id 선택자, 클래스 선택자 1-1. 전체 선택자 (Universal Selector) 패턴 설명 예시 * HTML 문서 안의 모든 요소들을 선택한다. * { color: red; } 사과종류 홍옥 홍로 아오리 ..