[CSS] 이미지 관련 스타일 image / gradient

[CSS] 이미지 관련 스타일 image / gradient

---

✔️ image 스타일

: img 태그는 인라인 태그로 텍스트 취급을 한다.

: 텍스트는 타이포그래피(Typography : ascender line + base line + descender line)를 따른다.

: t와 y를 보면 y가 더 아래로 출력되는 것과 같은 원리! (descender line 때문)

따라서 height를 지정하지 않은 두번째 이미지는 아래 부분에 패팅 같이 여백이 생긴다.
해결방법중 하나는 vertical-align:bottom 이다.

<div class="box2"><img src="img.png"></div>
<div class="box2"><img src="img.png" style="vertical-align: bottom;"></div>

 

 

✔️ linear-gradient

: 선형 그라이데이션을 주는 스타일이다.

: 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다!

 

📓 속성

- 각도 : 앵글은 그레이디언트 축의 방향이다. 0 이상 값을 지정하면 축이 시계방향으로 돌아간다.

- 방향 : 그레이디언트 축의 시작점으로 지정할 경우 to 이후 최대 두 개의 방향을 나타내는 키워드를 사용할 수 있다. 하나는 수평 방향이고, 다른 하나는 수직 방향이다. (기본값은 to bottom 이다!)

- color-stop : 색상 정지점의 color 값과 하나 혹은 두 개의 선택적인 정지점 위치.

.box1 {background: linear-gradient(to bottom, yellow, red); }
.box2 {background: linear-gradient(to top, yellow, red); }
.box3 {background: linear-gradient(to right, yellow, red); }
.box4 {background: linear-gradient(to left, yellow, red); }
.box5 {background: linear-gradient(45deg, yellow, red); }
.box6 {background: linear-gradient(135deg, yellow 12%, blue 12%, green 70%, red 95%, tomato 100%); }

 

 

✔️ radial-gradient

: 원형 그라이데이션을 주는 스타일이다.

: 원점에서 발산되는 두 개 이상의 색상 사이에서 점진적인 전환으로 구성된 원 또는 타원 모양의 이미지를 만든다.

 

📓 속성

- <모양> : circle , ellipse (타원) 인지 지정한다. (기본값은 타원)

- <크기> : 그라데이션을 지정할 때 원의 크기를 지정한다. closest-side 가장 가까운 모서리, closest-corner 가장 가까운 코너, farthest-side 가장 먼 모시리, farther-corner 가장 먼 코너

- <위치> : 그라데이션이 시작하는 중심의 위치를 지정한다. 지정하지 않으면 기본 center

- color-stop : 색상 정지점의 color 값과 하나 혹은 두 개의 선택적인 정지점 위치.