나디아 성장 일기

📌 animation : 요소에 애니메이션 동작을 지정    1. animation 정의하기 @keyframes : 애니메이션 과정의 중간 절차를 제어할 수 있는 속성글자 크기 변화: font-size 상자 이동 효과: position / margin / translate / padding@keyframes 변수명 { from(0%) { ... } to(100%) { ... }} @keyframes moveEffect { 0% { font-size: 12px; } 100% { font-size: 24px; }}   2. animation 사용하기 필수값 animation-name: 애니메이션 이름 animation-duration: 애니메이션 지속 시간 .vi..

📌 linear-gradient(): 수직 그라데이션보통 background(background-image)에서 많이 사용 linear-gradient(각도(방향), 색상1 (색상 정도), 색상2 (색상 정도)...);그라데이션 방향: to top(0deg), to bottom(180deg), to left(270deg), to right(90deg) See the Pen linear by nadia kwon (@nadia-kwon) on CodePen.  * 이미지와 함께 사용 시 이미지(url)를 먼저 선언해야 한다.background: url(), linear-gradient(); 순으로 선언/* 이미지 위에 45도 각도로 그라데이션 설정 */background-image: url(../imag..

📌 clip-path : 요소를 잘라낼(cliping) 영역을 정의한다.구형 브라우저는 clip 인식, 신형 브라우저는 clip-path 인식 clip은 사용을 권장하지 않는 속성 nonemargin-box / border-box / padding-box / content-box: 박스만큼 잘라내는 속성circle(): 원circle( at );clip-path: circle(50px at 50% 50%);  ellipse(): 타원ellipse(수평 각도 XY at 수직 각도 XY);clip-path: ellipse(100px 100px at 10% 10%);  triangle(): 삼각형triangle(좌측 상단 XY, 우측 상단 XY, 하단 XY);clip-path: triangle(10% 10%..

📌 transform: 요소를 회전하거나 확대/축소하거나 비트는 등 형태를 변형할 수 있다.  rotate(): 요소를 회전시킨다.  rotate( angle )rotateX( angle )rotateY( angle )angle에는 각의 크기를 입력단위는 deg, rad, grad, turn 등을 사용turn은 1회전, 즉 360deg를 의미.box:hover { transform: rotateX( 180deg );}   translate(): 요소를 이동시킨다.  translateX ( ): 오른쪽으로 이동길이 단위를 음수로 지정하면 왼쪽으로 이동translateY ( ): 아래쪽으로 이동길이 단위를 음수로 지정하면 위쪽으로 이동translate( 50px, 50% )오른쪽, 아래쪽으로 이동.box:..

📌 링크(link) 스타일링 기본 스타일링크는 밑줄이 그어져 있다.방문하지 않은 링크는 파란색방문한 링크는 자주색활성 링크는 빨강색링크를 가리키면 마우스 포인터가 작은 손 아이콘으로 바뀐다.탭 키를 눌러 키보드로 이 페이지의 링크에 초점을 맞출 수 있다. (초점이 맞춰진 링크에는 주위에 윤곽선이 표시)   :link  : 방문하지 않은 링크 a:link { color: green;}  :visited  : 이미 방문한 링크 a:visited { color: silver;}   :active  : 활성화 된 링크 a:active { color: red;}   :hover : 마우스를 링크 위에 올렸을 때 a:hover { color: yellow;}   :focus  : 키보드로 링크 영역에 이동..

절대 단위 : 절대적으로 지정하여 항상 동일한 크기를 유지할 수 있다. px 등  상대 단위 : 다른 것들에 비례하여 조정되도록 할 수 있다. 상위 요소의 글꼴 크기나 viewport 크기에 비례하게 지정할 수 있다. em, rem, %,vw, cvw 등em (엠)부모로부터 상속된 크기에 비례 (상속 글자 크기의 n배)(ex. 1.3em = 부모 글꼴 크기의 1.3배) rem (렘) 루트( 요소)의 크기를 기준으로 글자 크기 비례% (퍼센트)부모 요소의 크기에 백분율로 계산 ex 요소 글꼴의 x-heightlh요소의 라인 높이 (line-height)rlh루트 요소의 라인 높이 (line-height) 루트 요소의 font-size 또는 line-height 속성에 사용될 때 속성의 초깃값을 참조vw 뷰..

📌 캐스캐이드(Cascade): CSS 스타일 규칙이 어떤 우선순위에 따라 요소에 적용되는 방식다양한 CSS 스타일 규칙이 동일한 요소에 적용될 때 발생우선순위 (Priority): CSS 스타일 규칙은 다양한 소스에서 나올 수 있다. (ex. 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일 등)Cascading은 이러한 다양한 소스에서 나온 규칙 중에서 어떤 것이 우선순위가 높은 지를 결정한다.상속 (Inheritance): 부모 요소로부터 자식 요소로 상속한다.상속되는 속성은 자식 요소에 직접 지정하지 않아도 부모 요소에서 지정한 값이 자동으로 적용된다.명확성 (Specificity): 어떤 스타일 규칙이 요소에 적용되는지를 결정한다.두 개 이상의 규칙이 동일한 요소를 대상으로 할 때, CSS..

📌 변수 정의하기selector {       --변수명: 값;}selector: 변수를 적용할 범위(class or id)   - 문서 전체에서 사용할 변수를 설정한다면, :root 나 body 사용   - 정의한 변수는 해당 selector 내부에서만 사용 가능 O.container {     --primary-color: #8B008B;}   📌 변수 사용하기속성: var(--변수명);태그 선택자()는 변수를 정의한 selector의 자식 요소여야 한다. **p {     color: var(--primary-color);     }   📌 변수 대체값(기본값) 사용하기var(--변수명[, 대체 값]);대체값: 변수가 정의되지 않았을 때 사용되는 기본 값을 지정하는 선택적인 값- 변수가 정의되..

📌 appearance: 브라우저(운영 체제)의 기본 UI 요소를 해제하거나 변경할 때 사용하는 속성 텍스트 입력 요소(input), 체크 박스, 라디오 버튼 등을 스타일링하거나 User Agent Style(기본 스타일)을 제거할 때 사용한다. 크로스 브라우징 이슈로 인해 모든 브라우저에서 완벽하게 지원되지 않을 수 있다.👉 JavaScript나 다른 방법을 사용하여 스타일을 조정하는 것이 더 안전한 접근일 수 있음   - auto: 웹 요소가 브라우저의 기본 스타일을 사용 기본값특별한 스타일을 지정하지 않았을 때의 스타일로 동작한다. (User Agent Style)  - none: 요소의 기본 스타일(User Agent Style)을 무시하고 사용자가 지정한 스타일만 적용 요소의 외관이 완전히..

📌 background 속성: 배경의 색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정하는 단축 속성background: pink url(../images/coffee.png) no-repeat 20% 30% /100px 83px scroll;/* 사이즈 앞에는 /(슬래시) 사용 */background: url(../images/ani_flower_01.png) no-repeat 0 0, url(../images/ani_flower_02.png) no-repeat 200px 100px, yellow;/* 배경색은 마지막에 선언해야 적용됨!!! */body { background: url(sweettexture.jpg) /*..