나디아 성장 일기

📌 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을 설정하기도 함 ..