CSS

모든 요소를 선택한다div 태그 요소만 선택한다HTML class 속성의 값이 ABC인 요소 선택HTML id속성의 값이 orange인 요소 선택

일치 선택자 (ABCXYZ) >선택자 ABC와 XYZ를 동시에 만족하는 요소 선택 자식 선택자 (ABC > XYZ) >선택자 ABC의 자식요소 XYZ 선택 하위(후손) 선택자 (ABC XYZ) HTML CSS >선택자 ABC의 하위 요소 XYZ 선택 '띄어

가상 선택자란 클래스 선택자처럼 동작하지만 클래스 선택자는 아닌, 각 Element들의 상태에 따른 선택이 이루어지는 선택자를 의미한다방문한 적이 없는 링크 :link 방문한 적이 있는 링크 :visited 마우스를 올려둔 상태 :hover 포커싱된 상태 :focus

선택자 ABC 요소의 내부 앞에 내용(content)을 삽입선택자 ABC 요소의 내부 뒤에 내용(content)을 삽입

HTMLCSS하위 클래스들은 상위 클래스의 글자/문자 관련 속성을 상속받는다font-style: 글자 기울기font-weight: 글자 두께font-size: 글자 크기line-height: 줄 높이font-family: 폰트(서체)color: 글자 색상text-ali

우선순위란, 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법순위: 인라인스타일 style="" > id 선택자 > class 선택자 > 태그 선택자 > 전체 선택자결합 관계(복합 선택자 패턴)의 경우는 결합되는 선택자

auto(기본값) : 브라우저가 너비를 계산단위 : px, em, vw 등으로 단위를 지정\\본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도width, height 조정 불가능본질적으로 아무것도 나타내지 않는, 콘텐츠 영역을 설정하는 용도

요소의 외부 여백(공간)을 지정하는 단축 속성음수 사용가능margin: 0;값 1개margin: 10px;값 2개margin: 10px 20px;값 3개margin: 10px 20px 30px;값 4개margin: 10px 20px 30px 40px; margin

border: width style color;요소의 테두리 선을 지정하는 단축 속성테두리가 생긴 만큼 요소의 크기가 넓어진다HTML CSScontainer 안에 첫번째 자식이고 item인 태그에 border 적용border의 기본값border: medium none

HTML CSS.container .item:first-child { border: 4px solid red; padding: 20px;}.container .item:first-child { border: 4px solid red; padding: 20px;

요소의 화면(보여짐) 특성각 요소에 지정되어 있는 값block : 상자(레이아웃) 요소inline : 글자 요소inline-block : 글자 + 상자 요소기타 table, tale-row, table-cell , table-cell 등...따로 지정해서 사용하는 값f

0~1 사이의 소수를 값으로 넣음1 : 불투명 (기본값)0 ~ 1 : 0부터 1사이의 소수점 숫자normal : 기울기 없음 기본값italic : 이텔릭체oblique : 기울어진 글자normal, 400 기본 두께bold, 700 : 두껍게bolder : 상위(부모