분류 전체보기

[CSS 기초] 블록 요소(block element) vs 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element)

HTML의 요소는 블록 요소와 인라인 요소, 인라인블록 요소로 분류된다. 블록 요소 (block element) 기본 너비값이 100% (폼 엘리먼트 제외) 너비값이 100%를 차지하기 때문에 각 요소가 수직으로 쌓인다. 너비값, 높이값 (width, height)을 가질 수 있다. 상하좌우 마진, 패딩 모두 가질 수 있다. 💡 div, p, h1-h6, ul, ol, blockquote, form, table, figure... 인라인 요소 (inline element) 컨텐츠 너비값이 기본 너비값이 된다. 요소들이 수평으로 쌓인다. 너비값, 높이값을 가질 수 없다. (폼 엘리먼트 제외) 상하 마진을 가질 수 없다. (좌우 마진, 상하좌우 패딩은 가능) block은 inline을 포괄하는 더 큰 개념이..

[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 제거 값 ..