🎨 [UIUX] 1210 CSS Coding, 코딩 기초 10

✏️ 2024. 12월 10일 / CSS 언어, 코딩 기초 10

🔥 nth-child / nth-of-type 더 다양한 선택자에 대해 알아봅시다.
✖️
☁️ nth-child / nth-of-type 추가 선택자
:nth-child(수식), :nth-of-type(수식)
부모 태그 안에 형제 태그중 홀수 번째나 짝수번째 형제를 선택하고 싶다면
even(짝수), odd(홀수) 키워드를 이용하여 선택할 수 있습니다.
또한 여러 요소 중 특정 범위의 자식요소들을 선택하고 싶다면 'n+숫자' 키워드를 통해 선택할 수 있습니다.
[기본형]
✨ :nth-child(even): 짝수 번째 위치한 자식요소를 선택
✨ :nth-child(odd): 홀수 번째 위치한 자식요소를 선택
✨ :nth-child(n+숫자): 숫자 번째에 위치한 자식부터 막내까지 모두 선택
✨ :nth-child(-n+숫자): 숫자 번째에 위치한 자식부터 첫째까지 모두 선택

🔥 is 선택자, has 선택자에 대해 알아봅시다.
✖️
☁️ is 선택자, has 선택자
🌎 :is선택자
같은 스타일을 여러 요소에 적용할 때 사용하는 선택자입니다.
최근에 발표된 선택자로 같은 스타일을 여러 요소에 적용할 때 간편하게 선언할 수 있습니다.
🎈 [기본형]
:is(선택자1, 선택자2, 선택자3...){}
🌎 :has선택자
has 선택자는 태그안에 특정태그가 있으면 선택해주는 선택자입니다.
🎈 [기본형]
선택자:has(태그)

🔥 배경 이미지 속성에 대해 알아봅시다.
✖️
☁️ 배경 이미지 속성
배경 이미지 속성은 배경으로 활용할 이미지를 출력하는 속성입니다.
컨텐츠로 활용하는 용도가 아닌 배경을 꾸미기 위한 용도로 사용합니다.
💧 [기본형]
🌈 1. background-image : url(이미지 경로);
: 배경 이미지를 경로로 불러온다. 그라디언트 배경을 채울때도 사용합니다.
🌈 2. background-repeat : no-repeat / repeat-x / repeat-y;
: 배경이미지의 반복 여부를 지정합니다. 배경이미지는 바둑판 배열로 반복되어 출력되는게 기본값입니다.
만약 1장만 보여주고 싶을 때는 no-repeat 속성 값을 지정하고,
가로로만 반복시킬때는 repeat-x, 세로로만 반복시킬때는 repeat-y를 사용합니다.
🌈 3. background-attachment : fixed / scroll;
: 배경 고정 여부를 뜻합니다.
기본값은 scroll이며, 스크롤을 아래로 내리면 이미지가 위로 올라가고 fixed를 설정하면 배경이 항상 같은 자리로 고정됩니다.
🌈 4. background-position : px / left / center / right / top / 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까지의 값을 쓸 수 있습니다.

🔥 그라디언트에 대해 알아봅시다.
✖️
☁️ 다양한 색상 단위
그라디언트 효과로 배경 표현하기
그라디언트 효과는 css3에서 처음 소개된 기능으로 옛날브라우저(익스10버전 이하)에서는 지원되지 않습니다.
모던 브라우저 초기 버전에서는 그라디언트 효과를 내기 위해 브라우저 접두사를 사용했습니다.
브라우저 접두사란 속성중 호환이 어려운 속성들을 브라우저 마다 호환해주기 위해 붙이는 키워드로 '벤더프리픽스' 라고도 부릅니다.
벤더프리픽스
벤더프리픽스는 호환해야하는 속성값의 앞에 씁니다.
[종류]
🔊 -webkit- : 크롬과 사파리를 호환합니다.
🔊 -moz-: 파이어폭스 브라우저를 호환합니다.
🔊 -o- : 오페라 브라우저를 호환합니다.
🔊 -IE- : 익스버전을 호환합니다.
[예시]
div{
background-image: -moz-liner-gradient(~~값);
background-image: -webkit-liner-gradient(~~값);
background-image: -o-liner-gradient(~~값); }
선형 그라디언트
선형 그라디언트는 수직이나 수평 또는 대각선 방향으로 색상이 일정하게 변하는 것을 말합니다.
선형 그라디언트를 구현하기 위해서는 liner-gradient라는 함수로 색상을 구현합니다.
[기본형]
liner-gradient(각도 to 방향, color-stop, color-stop);
- 각도 : 색상이 시작할 위치를 말합니다. 0도 (top위치) 부터 시작하여 시계방향으로 돌아가며 적용됩니다.
만약 음수를 쓰면 반시계 방향으로 적용됩니다.
- 방향 : 그라디언트가 적용될 방향. to left / to top / to right / to bottom으로 방향을 적용할 수 있습니다.
🔊 - colorstop : 색상 중단점. 먼저 쓰여진 컬러가 시작 색상이 됩니다.
여러 컬러를 추가하고 싶다면 ,로 구분하여 여러 색을 출력하면 됩니다.
각 색상마다 분포할 위치를 정하고 싶다면 색상 코드 뒤에 한칸 띄고 %를 써줍니다.
원형 그라디언트
그라디언트를 원형으로 표현할때 사용합니다.
radial-gradient함수를 이용해 구현합니다.
[기본형]
background-image: radial-gradient(모양 크기 at 위치, color-stop, color-stop);
🔊 - 모양 : 모양은 정원을 뜻하는 circle과 타원을 뜻하는 ellipse가 있습니다.
기본값은 ellipse이고 박스의 넓이 높이에 따라 타원 모양이 결정됩니다.
circle은 박스 모양과 상관없이 정원으로 표현됩니다.
🔊 - 크기: 그라디언트의 크기를 지정할 수 있습니다. 아래 값을 입력할 수 있지만 잘 쓰지는 않습니다.
1. closest-side
1. closest-corner
1. farthest-side
1. farthest-corner - 기본값

🔥 그림자 효과에 대해 알아봅시다.
✖️
☁️ 그림자 효과
box-shadow : 박스모델의 그림자 효과
사진이나 카드 또는 박스에 그림자 효과를 주기 위해 사용합니다.
[기본형]
box-shadow : 수평거리 수직거리 흐림정도 번짐정도 색상 inset;
🎧 - 수평거리 : 박스의 오른쪽 또는 왼쪽으로 그림자를 이동시킨다.
🎧 - 수직거리 : 박스의 위쪽이나 아래쪽으로 그림자를 이동시킨다.
🎧 - 흐림정도 : 기본값은 0 이며 그림자의 진함 정도를 뜻합니다.
값이 커질수록 부드러운 그림자로 표시된다. px로 표현하고 음수는 쓸 수 없습니다.
🎧 - 번짐정도 : 양숫값을 사용하면 모든 방향으로 그림자가 처져서 그림자가 박스 보다 커집니다.
반대로 음숫값을 쓰면 모든 방향으로 그림자가 축소되며, 기본값은 0입니다.
🎧 - 색상 : 한 가지 색상만 지정할 수도 있고 공백으로 구분하여 여러 색을 쓸 수도 있습니다. 기본 값은 검정색입니다.
🎧 - inset : 안쪽 그림자를 만듭니다. 생략하면 기본값인 바깥쪽 그림자가 생성됩니다.
text-shadow : 글자에 그림자 효과를 주는 속성
글자에 그림자를 주고 싶을 때 사용합니다. 속성값은 box-shadowd에서 번짐정도를 제외하면 box-shadow와 동일합니다.
[기본형]
text-shadow : 수평거리 수직거리 번짐정도 색상;

🗨️ 손으로 직접 공부한 내용을 바탕으로 작성한 글이랍니다 !
✖️
앞으로도 열심히 공부해서 많은 내용을 공유하겠습니다 :)