나디아 성장 일기

📌 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(--변수명[, 대체 값]);대체값: 변수가 정의되지 않았을 때 사용되는 기본 값을 지정하는 선택적인 값- 변수가 정의되..