나디아 성장 일기

📌 링크(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) /*..

📌 position 속성: 요소를 배치하는 방법을 지정한다.top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정한다.  - static: 마크업 순서에 따라 배치 기본값 top/right/bottom/left 속성이 무효가 됨  - relative: 기존의 자기 위치를 기준으로 이동 top/right/bottom/left 속성 사용  - absoulte: 부모 요소(자신의 컨테이닝 블럭 요소)를  기준으로 이동 width 값을 설정하지 않을 시 컨텐츠 크기만큼 작아지면서 뜬다. (= float와 유사) 상위 컨텐츠 중 static이 아닌 요소(relative/absoulte/stick)를 기준으로 삼음=> 일부러 부모 요소에 position을 설정하기도 함 ..

📌 @at sign 규칙: @(at sign) 기호로 시작하는 CSS 문법 @charset: 문자의 인코딩 방식을 지정한다.- 스타일 시트의 첫 번째 요소로 온다.@import: CSS 엔진에 외부 스타일 시트를 포함하도록 알린다.@namespace: CSS 엔진에 모든 콘텐츠가 XML 네임 스페이스로 시작하는 것이 고려되어야 함을 알린다.@media: 장치가 미디어 쿼리(media query)로 정의된 조건에 만족하면 해당 콘텐츠를 적용한다.- 반응형 웹을 만들 때 사용된다.@document: 스타일 시트가 적용되는 문서가 주어진 조건의 기준을 만족하면 해당 콘텐츠를 적용한다.@page: 문서를 출력할 때 적용되는 레이아웃 변화의 양상을 설명한다.@font-face: 웹 폰트를 적용할 수 있다.@ke..

📌 float과 clear float : 요소가 normal flow에서 벗어나 다음 요소 위에 띄워 이동하는 속성width 값을 주지 않으면 컨텐츠 크기만큼 작아지면서 뜬다. float된 자식 요소는 부모 요소의 높이(height)에 영향을 주지 않는다 (인식 X)부모에도 float가 적용되면 부모의 높이가 인식된다 (= display: flow-root;)float 요소는 기존에 떠있던 float 요소를 뺀 나머지 공간에서 이동한다.auto라는 기능을 인식할 수 없다.  ✨ display: flow-root; : 부모 요소가 자식 요소들을 감싸고 있을 때 자식 요소들이 부모 요소의 높이를 정확하게 반영하지 않는 문제를 해결한다.display: flow-root는 IE에서 지원 Xdisplay: fl..

📌 box-sizing: 요소의 너비와 높이를 계산하는 방법을 지정  - content-box : 요소의 설정된 너비에 + 테두리와 안쪽 여백이 더해진다.기본값(default) width와 height 속성에 콘텐츠 영역만 포함, 안팎 여백과 테두리는 포함하지 않는다.  (ex. box {width: 350px; border: 10px solid black;}을 적용한 요소의 너비(width) = 370px) 요소의 크기: 너비 = 콘텐츠 너비, 높이 = 콘텐츠 높이테두리와 안쪽 여백은 식에 포함하지 않는다. - border-box : 테두리와 안쪽 여백을 추가하면 콘텐츠 영역이 줄어든다.width와 height 속성에 안쪽 여백과 테두리는 포함, 바깥 여백은 포함하지 않는다.  안쪽 여백과 테두리가 ..