CSS

선택자는 스타일(css)을 적용할 대상(selector)속성: 내가 적용하려는 스타일의 종류태그 선택자. html 에서 div 태그를 찾아서 적용

내장방식 링크방식 인라인 방식 @import 방식 1. 내장방식 별도의 css 파일이 없어도 스타일을 적용할 수 있지만 스타일이 많아지면 불편하고, html, css, js 는 나눠서 관리하는것이 좋으므로 유지보수에 좋지 않음. 2. 인라인 요소의 style속성

기본복합가상클래스가상요소속성\* : 전체선택자단독으로 쓸 일 일은 없고 복합선택자를 통해 범위 안에 있는 모든 요소를 선택할 때 씀. 태그선택자 태그의 이름으로 요소를 선택한다..:클래스 선택자HTML class 속성의 값이 ABC인 요소 선택

display: block; 를 쓰면 인라인요소를 블럭요소로 바꿀 수 있다

애니멀 클래스를 가진 "동물"에만 red 를 주었는데 자식인 호랑이 사자 코끼리까지 다 빨강이 되었음우리가 지정하는 CSS속성과 그 값이 해당하는 요소의 자식요소, 하위요소에까지 영향을 미쳐 적용되는 것을 "스타일상속"이라고 부른다. 모두 상속되는것은 아님모두 글자/문

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS속성을 우선 적용할지 결정하는 방법점수가 높은 선언이 우선함!점수가 같으면, 가장 마지막에 해석된(더 마지막에 코드로 작성한 내용) 선언이 우선함! 우선순위로 점수를 매길 수 있음!importan

박스모델글꼴,문자배경배치플렉스(정렬)전환(전, 후 애니메이션)변환(2d, 3d)띄움(플랙스로 대체) 애니메이션(전환보다 더 복잡한 구조)그리드(2차원의 레이아웃)다단(하나의 페이지에서 텍스트 나눌때)필터(이미지 블러 흑백 반전 등)

width와 heightd에는 지정하지 않아도 auto라는 값이 들어있음. 브라우저가 자동으로 너비를 계산에서 화면에 출력함. 해당 요소가 블럭요소인지 인라인 요소인지에 따라 요소가 가지고 있는 가로 너비를 다르게 화면에 출력함어떤 속성이 어떤 기본값을 가지고 있는지

하나의 점을 의미해당 요소가 가진 부모 요소에 상대적하나의 요소가 가지고 있는 기본 글꼴 크기가 1em루트는 최상위 요소. 무조건 html에 지정되어 있는 글꼴 크기를기준으로 해서 단위를 설정viewport width 가로를 100으로 쪽에서 1vw는 백분의 1만큼을

⭐️ 패딩과 동일하게 요소의 크기가 늘어남기본값border: medium none black;border-width: 요소 테두리 선의 두께. pm, em, % 등 단위로 지정개별속성이면서 단축속성border width: top, right, bottom, left;b

요소의 모서리를 둥글게 깎음기본값: 0단위: px, em, vw 등

요소 크기 계산 기준을 지정기본값: content-box요소의 내용(content)으로 크기 계산border-box요소의 내용 + padding + border 로 크기 계산border/padding 넣으면 박스 요소 크기가 커짐가로세로 너비는 유지하고 싶은데 테두리

요소가 크기 이상으로 내용이 넘쳤을 때 보여짐을 제어하는 단축속성기본값visivle 넘친 내용을 그대로 보여줌hidden넘친 내용을 잘라냄scroll넘친 내용을 잘라냄, 스크롤바 생성auto넘친 내용이 있는 경우에만 잘라내고 스크롤바 생성overflow: hidden;

요소의 화면 출력(보여짐( 특성🔴block상자(레이아웃)요소🔴inline 글자요소🔴inline-block 글자+상자요소🔵flex 플렉스박스(1차원 레이아웃 x or )🔵grid 그리드(2차원 레이아웃 x & y 축)🔵none 보여짐 특성 없음, 화면에서 사

요소 투명도기본값:1 불투명0~1 0 부터 1 사이의 소수점 숫자