참고 링크
https://treasure01.tistory.com/34
픽셀(pixel), 해상도(Resolution)
픽셀 (pixel) ‘Picutre(그림) Element(원소)’를 줄인 말로 ‘화소’라고 불리며, 색을 표시하는 하나의 점입니다. 디스플레이 장치 화면의 이미지를 구성하는 최소 단위입니다. PPI (Pixels per Inch) 해상
treasure01.tistory.com
1. CSS 크기와 단위
1. px (픽셀)
- 정의:
- px는 픽셀 단위로, 해상도에 따라 상대적인 크기를 가지는 절대 단위입니다.
- 1px는 일반적으로 화면에서 1개의 픽셀을 의미합니다.
- 특징 :
- 고정된 크기를 가지므로 해상도에 따라 크기가 달라질 수 있습니다.
- 예 ; 16px는 대부분의 브라우저에서 기본 글자 크기로 사용됩니다.
2. % (퍼센트)
- 정의:
- %는 부모 요소의 상대적인 크기를 기준으로 값을 계산하는 상대 단위입니다.
- 특징:
- 부모 요소의 크기에 따라 동적으로 변합니다.
- 예: 부모 요소의 font-size가 20px일 때, 자식 요소에 font-size: 50%를 적용하면 10px로 계산됩니다.
3. em
- 정의:
- em은 부모 요소의 font-size 를 기준으로 상대적인 크기를 계산하는 단위입니다.
- 특징:
- 부모 요소의 font-size에 비례하여 크기가 결정됩니다.
- 예: 부모의 font-size가 16px이고 font-size: 2em을 적용하면, 16px * 2 = 32px이 됩니다.
- 중첩된 구조에서 em 단위가 사용되면, 각 부모의 font-size를 기준으로 누적되어 계산됩니다.
4. rem
- 정의:
- rem은 루트 요소(<html> 태그)의 font-size를 기준으로 상대적인 크기를 계산하는 단위입니다. (rem = root em)
- 특징:
- 부모 요소의 font-size와 상관없이 항상 <html>의 font-size를 기준으로 계산됩니다.
- 중첩된 구조에서도 크기가 누적되지 않고 일정하게 유지됩니다.
- 예: <html>의 font-size가 16px이고 font-size: 2rem을 적용하면, 16px * 2 = 32px이 됩니다.
<aside> 💡
em과 rem의 차이점
- em: 부모 요소의 font-size를 기준으로 계산되므로 중첩 시 크기가 누적됩니다.
- rem: 루트 요소(<html>)의 font-size를 기준으로 계산되므로 중첩 시 크기가 일정합니다. </aside>
요약
- px: 고정된 크기 단위, 해상도에 따라 상대적.
- %: 부모 요소의 크기에 비례.
- em: 부모 요소의 font-size에 비례, 중첩 시 누적.
- rem: 루트 요소의 font-size에 비례, 중첩 시 일정
| 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<style>
/* 요소 선택자(Element Selector) */
html {
font-size: 16px;
}
/* 클래스 선택자 */
.em {
color: purple;
}
.rem {
color: green;
}
/* 복합 선택자(Combination Selector)
공백 없이 붙여서 사용하며, 두 조건을 모두 만족하는 요소를 선택합니다.
*/
span.em {
font-size: 2em;
}
span.rem {
font-size: 2rem;
}
</style>
</head>
<body>
기본 사이즈
<span class="em">
<span class="em">중첩1<span class="em">중첩2</span></span>
</span>
<br />
기본 사이즈
<span class="rem">
<span class="rem">중첩1<span class="rem">중첩2</span></span>
</span>
</body>
</html>2. 뷰포트(Viewport) 단위란?
- 정의:
- 뷰포트 단위는 브라우저 창의 크기(뷰포트)를 기준으로 상대적인 크기를 지정하는 단위입니다.
- 반응형 웹 디자인에서 유용하며, PC, 모바일 등 다양한 디바이스에서 일관된 레이아웃을 제공합니다.
- 주요 뷰포트 단위:
- vw (Viewport Width): 뷰포트 너비의 1/100 (1vw = 뷰포트 너비의 1%).
- vh (Viewport Height): 뷰포트 높이의 1/100 (1vh = 뷰포트 높이의 1%).
- 활용 사례:
- 뷰포트 단위는 화면 크기에 따라 동적으로 크기가 조정되므로, 반응형 디자인에서 요소의 크기(폰트, 박스 등)를 유연하게 설정할 수 있습니다.
|예시 코드1
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
.box1 {
background-color: green;
/* 현재 화면 크기에서 기준 */
width: 40vw;
height: 50vh;
}
.box2 {
background-color: red;
width: 80vw;
height: 30vh;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
</html>-----------------------------------------
3. 색상 표현의 다양한 방법
CSS에서 색상을 지정하는 방법은 여러 가지가 있으며, 각 방법은 특정 상황에서 유용합니다. 색상은 주로 배경, 텍스트, 테두리 등에 적용됩니다.
색상 이름 (Color Names)
- 정의:
- CSS에서 미리 정의된 색상 이름을 사용하는 방법입니다.
- 예: red, blue, green 등.
- https://www.w3schools.com/colors/colors_names.asp
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
- 특징:
- 간단하지만 선택 가능한 색상이 제한적입니다.
1.2 HEX (Hexadecimal Colors)
- 정의:
- 16진수로 색상을 표현하는 방법으로, # 뒤에 6자리(또는 3자리)로 작성합니다.
- 예: #8A2BE2 (보라색 계열).
- 각 두 자리씩 Red, Green, Blue 값을 나타냅니다.
- 특징:
- 6자리: #RRGGBB (예: #FFFFFF는 흰색).
- 3자리: #RGB (예: #FFF는 흰색, 축약형).
1.3 RGB (Red, Green, Blue)
- 정의:
- Red, Green, Blue 값을 0~255 범위로 지정하여 색상을 표현합니다.
- 예: rgb(138, 43, 226) (보라색 계열).
- 특징:
- 각 값은 0(최소)에서 255(최대)까지의 숫자로 설정됩니다.
1.4 RGBA (Red, Green, Blue, Alpha/투명도)
- 정의:
- RGB에 Alpha(투명도)를 추가한 형태입니다.
- 예: rgba(138, 43, 226, 0.5) (투명도가 50%인 보라색).
- 특징:
- Alpha 값은 0.0(완전 투명)에서 1.0(완전 불투명) 사이로 설정됩니다.
- 투명도를 조절하여 색상을 겹칠 때 유용합니다.
1.5 HSL (Hue, Saturation, Lightness)
- 정의:
- 색상(Hue), 채도(Saturation), 명도(Lightness)를 기준으로 색상을 표현합니다.
- 예: hsl(60, 100%, 50%) (노란색).
- 특징:
- Hue: 0~360도 (색상환).
- Saturation: 0%~100% (채도, 색의 강도).
- Lightness: 0%~100% (명도, 밝기).
1.6 HSLA (Hue, Saturation, Lightness, Alpha)
- 정의:
- HSL에 Alpha(투명도)를 추가한 형태입니다.
- 예: hsla(60, 100%, 50%, 0.5) (투명도가 50%인 노란색).
- 특징:
- RGBA와 마찬가지로 투명도를 조절할 수 있습니다.
2. opacity 프로퍼티
- 정의:
- 요소 전체의 투명도를 설정하는 CSS 프로퍼티입니다.
- 예: opacity: 0.5 (투명도 50%).
- 특징:
- 값은 0.0(완전 투명)에서 1.0(완전 불투명) 사이로 설정됩니다.
- 요소의 모든 부분(배경, 텍스트 등)에 투명도가 적용됩니다.
- RGBA와의 차이: RGBA는 색상 자체의 투명도를 조절하지만, opacity는 요소 전체에 영향을 줍니다.
예시코드
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>색상 표현 실습</title> <style> .box1 { background-color: #8A2BE2; /* HEX */ color: white; padding: 20px; margin: 10px; } .box2 { background-color: rgb(138, 43, 226); /* RGB */ color: white; padding: 20px; margin: 10px; } .box3 { background-color: rgba(138, 43, 226, 0.5); /* RGBA */ color: white; padding: 20px; margin: 10px; } </style> </head> <body> <div class="box1">HEX 색상: #8A2BE2</div> <div class="box2">RGB 색상: rgb(138, 43, 226)</div> <div class="box3">RGBA 색상: rgba(138, 43, 226, 0.5)</div> </body> </html>
- .box1: HEX 색상 #8A2BE2를 배경으로 설정.
- .box2: RGB 색상 rgb(138, 43, 226)을 배경으로 설정 (HEX와 동일한 색상).
- .box3: RGBA 색상 rgba(138, 43, 226, 0.5)를 사용해 투명도를 50%로 설정.
요약
- 색상 이름: 간단하지만 제한적.
- HEX: 16진수로 색상 표현, 6자리 또는 3자리.
- RGB/RGBA: Red, Green, Blue 값으로 색상 지정, 투명도 추가 가능.
728x90
'HTML CSS' 카테고리의 다른 글
| (HTML/CSS/JavaScript)CSS 선택자(결합 선택자) - 10 (1) | 2025.05.29 |
|---|---|
| (HTML/CSS/JavaScript)CSS 선택자(기본 선택자) - 9 (0) | 2025.05.29 |
| (HTML/CSS/JavaScript) CSS(Cascading Style Sheets)란 뭘까? - 7 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript)시멘틱 태그란 - 6 (0) | 2025.05.28 |
| (HTML/CSS/JavaScript) HTML 속성이란? - 4 (0) | 2025.05.28 |