[UI/UX]coding 기초(13) - CSS-selector,background,color,gradient,shadow

📌이외 다양한 선택자

---

: nth-child(수식) , :nth-of-type(수식)

• 부모태그안에 형제 태그중 홀수번째나 짝수번째 형제를 선택하고 싶다면
  even(짝수) ,add(홀수)키워드를 이용하여 선택할 수 있다.

• 또한 여러 요소 중 특정 범위의 자식요소들을 선택하고 싶다면
  'n숫자' 키워드를 통해 선택할 수 있다.

  [기본형]
  = : nth-child(even) : 짝수 번째 자식요소 선택
  = : nth-child(odd) : 홀수 번째 자식요소 선택
  = : nth-child(n+숫자) : 숫자 번째 위치한 자식부터 막내까지 모두선택
  = : nth-child(-n+숫자) : 숫자 번째 위치한 자식부터 첫째까지 모두선택

📌is선택자

---

같은 스타일을 여러 요소에 적용할때 사용하는 선택자이다

[기본형]
:is(선택자1,선택자2,선택자3...){ }

:is(h1, h2, h3):hover {
      color: seagreen; }

📌has선택자

---

has선택자는 태그안에 특정 태그가 있으면 선택해주는 선택자이다.

[기본형]
선택자:has(태그)

  ul a:hover {
        color: salmon;}

📌배경이미지 속성

---

배경으로 이미지를 출력하는 속성이다.
컨텐츠로 활용하는 용도가 아닌 배경을 꾸미기 위한 용도로 사용한다.

[기본형]

1. background-img: url(이미지 경로)
: 배경 이미지를 경로로 불러준다. 그라디언트 배경을 채울때도 사용한다.

2. background-repeat : no-repeat / repeat-x / repeat-y
:배경이미지의 반복 여부를 지정한다. 배경이미지는 바둑판 배열 출력이 기본값이여서 1장만 보여주고 싶을때는 no-repeat, 가로로만 반복시킬때는 repeat-x, 세로로만 반복시킬때는 repeat-y를 사용한다.

3.background-attachment : fixd/scroll;
:배경 고정 여부를 뜻한다. 기본값은 scroll로 스크롤을 아래로 내리면 이미지가 위로 올라가고, fixed를 설정하면 배경이 항상 같은 자리로 고정된다.

4. background-position : px / left,center, right, top, centet, bottom
: 배경 위치를 지정한다. 배경 위치를 지정할때에는 값을 2개 써야한다. 만약 하나만 쓴다면 x축과 y축에 동일한 px만큼 떨어져 위치하게 된다. 또는 위치 키워드를 사용하여 위치를 지정.

5. background-size : 100% / cover / contain / px값
: 배경이미지의 사이즈를 지정한다. cover를 지정하면 배경영역의 가로 사이즈에 맞춰 사진을 채우고 contain을 지정하면 배경영역의 세로 사이즈에 맞춰 사진을 채운다.

6. background : 하위 속성들을 한꺼번에 선언
: background속성은 1번부터 5번까지의 배경 하위속성들을 한꺼번에 선언할 때 사용한다. 공백으로 구분할 수 있고 필요 없는 속성을 생략할 수 있다.

-background : 색상 이미지경로 가로위치 세로위치 / 사이즈 반복여부 스크롤효과(고정여부);

📌background-origin

---

박스에 패딩이나 테두리가 있다면 배경이미지를 어느 영역까지 보여줄 것인지 결정하는 속성.

[기본형]
-background-origin: content-box;
:박스모델에서 컨텐츠 영역까지만 배경이미지를 표시한다.
-background-origin: padding-box;
:박스모델에서 패딩 영역까지만 배경이미지를 표시한다. 기본값
-background-origin: border-box;
:박스모델에서 테두리 영역까지만 배경이미지를 표시한다. 기본값

📌 다양한 색상 단위

---

코드로 색상을 표현하는 다양한 단위들로 배경에 그라디언트를 넣거나 투명하게 처리할 수 있다.

1.hex코드
: 앞에 #을 붙인 16진수로 색상을 표현하는 단위. 가장 많이 쓰이며, 보통 디자인 단계에서 해당 코드를 공유하여 디자인한다.

2. 색상명
:red, blue처럼 정해진 색상의 이름으로 색을 표현하는 단위이다. 보통 임시로 영역을 확인하기 위해 사용된다.

3. rgb(red,green, blue)★
: rgb색상단위로 뒤에 소괄호가 붙는다. 소괄호 안에는 0~255까지의 숫자를 입력할 수 있다.
red, green, blue 색상을 조합하여 빛의 색상을 표현하는 단위이다.

4. rgba(red, green, blue, alpha)★
: rgba의 a는 alpha값을 말하며 투명도를 뜻한다. 투명도를 표기할때에는 0~1까지의 값을 쓸 수 있다.
투명도에 만약 0.5를 쓰면 50% 투명한 색상이 나온다. 0은 완전히 투명한 상태를 말하고 1은 완전히 불투명한 상태를 말한다.

5. hsl(hue, saturation, lightness)
: hue는 색상을 뜻하고 saturation은 채도, lightness는 밝기를 뜻한다. 해당 색상단위는 %를 쓴다.
hsl색상 단위는 포토샵과 같은 디자인툴의 기본 색상 단위이다. 코드로는 많이 쓰이진 않는다.

6. hsla(hue, saturation, lightness, alpha)
:hsl단위에 투명도인 alpha값을 추가한 색상 단위이다.
투명도는 마찬가지로 0~1까지의 값을 쓸 수 있다.

📌opacity★ -속성명

---

• 투명도를 뜻하는 속성. 값은 0~1사이의 값을 쓸 수 있다.
• 단위는 쓰지 않는다. opacity는 속성명의 이름으로 해당 박스의 컨텐츠 내용과 border까지 모두 투명하게 만든다.

hsla,rgba는 '속성값'이며, 컨텐츠는 투명하게 만들지 않고 배경색만 투명하게 만든다.

📌선형 그라디언트

[기본형]
linear-gradient(각도 to 방향, colour-stop(시작하는색상), colour-stop(끝나는색상))
-각도 : 0도(top위치)부터 시작하여 시계방향으로 적용된다. 앞에 음수값을 쓰면 반시계 방향.

-방향 : to left / to top / to right/ to bottom으로 방향을 적용할 수 있다.

-colorstop : 색상의 중단점, 먼저 쓰여진 컬러가 시작 컬러가 되고 색상을 추가하고 싶다면 ,로 구분하여 추가한다. 각 색상마다 공백 후 %를 이용해 분포할 위치를 정할 수 있다.

📌원형 그라디언트

[기본형]
background-image : radial-gradient(모양 크기 at 위치, color-stop, color-stop)

-모양 :기본값은 타원 ellipse이고
박스의 넓이 높이에 따라 모양이 결정된다. circle은 박스 모양과 상관없이 정원으로 표현된다.

-크기 : 아래 값을 입력할 수 있지만 잘 쓰지는 않는다.

1. closet-side
2. closet-corner
3. farthest-side
4. farthest-corner
   

📌box-shadow

[기본형]
box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset;
- 수평거리 : 박스의 오른쪽 또는 왼쪽으로 그림자를 이동시킴.
- 수직거리 : 박스의 위쪽이나 아래쪽으로 그림자를 이동시킴.
- 흐림정도 : 기본값은 0이며 그림자의 진함 정도를 뜻한다.
값이 커질수록 부드러운 그림자로 표시된다. px로 표현하고 음수는 쓸 수없다.
- 번짐정도 : 양숫값을 사용하면 모든 방향으로 그림자가 퍼져서 그림자가 박스보다 커진다.
반대로 음숫값을 쓰면 모든 방향으로 그림자가 축소된다. 기본값은 0이다.
- 색상 : 한 가지 색상만 지정할 수 있고 공백으로 구분하여 여러 색을 쓸 수도 있다.
기본값은 검정색이다.
- inset : 안쪽 그림자를 만든다. 생략하면 기본값인 바깥쪽 그림자가 생성된다.

box-shadow: 4px 4px 10px 8px lightblue inset;

📌text-shadow

---

글자에 그림자를 주고싶을 때 사용한다. 속성값은 box-shadow와 완전히 동일하다.

[기본형]
text-shadow : 수평거리 수직거리 번짐정도 색상;