231226 엘리스 SW트랙 1주차 Day2

오늘 배운 내용중에 정리해둘 것 !

---

 

* rem = root em으로 최상위 요소 (보통 html 태그)에 지정된 font size의 값을 기준으로 변한다 !

1rem = 100% = 16px (대부분 웹 브라우저)

rem은 설정에 맞게 크기가 변한다 ! (브라우저 기본 글꼴 크기에 상대적임)

 

em은 해당 요소의 font size에 따라 크기가 설정된다 !

1em = font size (부모 엘리먼트)

 

px는 크기가 고정적으로 정해진다 !

 

* em보다는 rem : 자식요소에 em을 사용하여 크기를 지정한다면, 부모의 크기가 변함에 따라 자식도 영향을 받기 때문에 복잡하다 !

 

* rem을 사용하면 무수히 다양한 모니터 해상도에 비례해서 상대적으로 크기가 나타나기 때문에 크기가 각 모니터에 따라 유연하게 보여진다. 따라서 반응형 페이지 구현에 유용 !

---

%는 창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다 !

 

vw (viewport width)는 화면 기준으로 넓이를 뜻한다 !

vh (viewport height)는 화면 기준으로 높이를 뜻한다 !

 

1vw = 1% (1vw로 속성값을 설정할 경우 뷰포트 너비의 1%만큼 계산이 된다)

1vh = 1% (1vw로 속성값을 설정할 경우 뷰포트 높이의 1%만큼 계산이 된다)

 

vw와 vh는 현재 실행중인 스크린 크기에 맞춰 상대적 크기를 반환한다. (스크롤바를 포함한 길이를 기준으로 계산된다.)

 

100vw, 100vh가 전체 화면의 기준이 된다.

예를 들어, 현재 스크린 크기가 width: 1200px, height: 900px 이라면,

 

1vw = 12px / 1vh = 9px이 될 것이고,

 

한 div의 영역을 아래와 같이 설정한다면,

div {
	width: 25vw;
    height: 50vh;
}

 

실제로는 width: 300px; height: 450px; 와 같이 계산이 되어 적용이 될 것이다.

---

* CSS에서 색상을 결정할 때,

#000에서 #fff까지 중에 결정할 수 있고,

#000, #111, #222, ... #aaa, ... #fff 순으로 진해진다!

 

#(RR)(GG)(BB) 로

00, 11, 22, ...99, aa, bb, ... ff 식으로 표현 가능 ! 

 

#ff0000는 rgb(255, 0, 0)와 같은 의미 ! (빨강)

 

#000000 : black

#FFFFFF : white

---

* 백그라운드 색상 투명도

opacity는 불투명도라는 뜻 !

허용값은 0.0 ~ 1.0이고, 0% ~100% 이다 !

숫자가 클수록 불투명하고, 숫자가 작을수록 투명 !

 

div{
	background-color : rgb(255,255,255); opacity : 0.5;
}

 

이런식으로 사용가능 !

 

rgba(red, green, blue, alpha)에서 alpha값 조절하는 방법도 있다 !

 

div{
	background-color : rgba(255,255,255,0.5);
}

 

이런식으로 사용가능 !

 

opacity를 사용하면 모든 요소에 투명도 적용 => 글씨도 같이 투명해짐

rgba를 사용하면 배경색만 투명하고 글자색은 그대로 !

 

opacity는 div태그와 하위요소까지 적용 !

rgba는 div태그에만 적용 !

---

* linear-gradient : 선형 그라데이션

linear-gradient([방향], color1, color2, color3 ...)

 

ex)

 .listContainer{
    width: 200px;
    height: 200px;
    background: linear-gradient(to right, red, transparent)
}

 

* radial-gradient  : 원형 그라데이션

 

ex)

.gradient1
		{
			background : radial-gradient(red,blue,white) ;
		}
.gradient2
		{
    		background : radial-gradient(circle,red,blue,white) ;
        }

---

border-radius: 50% 를 이용하면 CSS만을 이용하여 HTML 요소를 원 형태로 바꿀 수 있다 !

---

수 고 해 따 !