YTCW

1.list-style-type 불릿 모양과 번호 스타일을 지정- 순서 없는 목록의 경우 목록 앞에 불릿 모양 지정- 순서 있는 목록의 경우 번호 스타일을 지정disc채운 원 모양●circle빈 원 모양○square채운 사각형 모양■decimal1부터 시작하는 10진수1, 2, 3, …decimal-leading-zero앞에 0이 붙는 10진수01, 02, 03, …lower-roman로마 숫자 소문자i, ii, iii, …upper-roman로마 숫자 대문자I, II, III, …lower-alpha / lower-latin알파벳 소문자a, b, c, …upper-alpha / upper-latin알파벳 대문자A, B, C, …none지정❌  2. list-style-image 불릿 대신 이미지를 사용..

1. font-family/*기본형*/font-family: | [, ]body { font-family: "맑은 고딕", 돋움, 굴림 } - 웹 문서의 텍스트는 사용자 시스템의 글꼴을 이용해 웹 브라우저 화면에 표시- 웹 문서에서 지정한 글꼴이 사용자 시스템에 설치❌ → 의도한 글꼴이 아닌 글꼴로 표시- 2개 이상 지정 가능- 두 단어 이상으로 된 글꼴 이름은 큰 따옴표로 표시- 태그 스타일에서 한번 정의하면 문서 전체에 적용→ 문서 안의 모든 자식 요소에 같은 글꼴 사용 기본형 기호 [기본형] 표기 방식: W3C 표준 규약에서도 사용 1. | 나열한 옵션 중 하나가 값이 되어야 한다 font-size: 값1 | 값2 | 값3 2. 속성값을 나열할 때 키워드(약속한 값)는 그대로 나열 font-var..

특정 상태의 HTML 요소에 스타일을 적용하기 위해 사용→ 요소의 상태, 사용자의 동작, 문서 구조에 따라 구분1. 요소의 상태에 따른 가상 클래스 선택자:link- 방문하지 않은 링크에 스타일 적용 :visited- 방문한 링크에 스타일 적용  :active- 웹 요소를 활성화했을 때의 스타일 적용 - 사용자가 요소를 클릭하고 있는 동안 적용  :hover- 웹 요소에 마우스 커서를 올려놓을 때 스타일 적용 - 요소 위로 마우스를 올렸을 때  :foucs- 요소가 포커스를 받을 때(초점이 맞추어졌을 때) 스타일 적용사용자 동작에 반응하는 가상 클래스의 순서 : link > :visited > :hover > :active   2. 요소의 상태에 따른 가상 클래스 선택자:checked- 체크박스 또는 라..

연결 선택자선택자와 선택자를 연결해 적용 대상을 제한하는 선택자자손 선택자 (= 하위 선택자)부모 요소에 포함된 '모든 하위 요소'에 적용 : 선택자 A와 B 사이에 공백을 두어 사용 : 상위요소(A) 하위요소(B) { ... } : div 요소 내의 모든 p요소에 스타일 적용자식 선택자자식 요소에 스타일을 적용하는 선택자 : A의 직접적인 자식인 B요소에게만 적용 : 선택자 A와 B 사이에 > 기호를 사용인접 형제 선택자같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일 적용 : 선택자 A와 B 사이에 + 기호를 사용(일반) 형제 선택자형제 요소들에 스타일 적용 : 인접 형제 선택자와의 차이점 - 모든 형제 요소에 다 적용 : 선택자 A와 B 사이에 ~ 기호를 사용 HTML 고급 선택자..

스타일 규칙은 태그뿐만 아니라 웹 문서의 어떤 요소에도 적용 가능선택자는 웹 문서에서 어느 부분에 스타일을 적용할 지 알려주는 기능 전체 선택자 (universal selector)- 스타일을 문서의 모든 요소에 적용할 때 사용- 주로 모든 하위 요소에 스타일을 한꺼번에 적용할 때 사용- (별표) 사용- 웹 브라우저의 기본 스타일을 초기화할 때 사용/*기본형*/* { 속성: 값; ... } 타입 선택자 (type selector)특정 태그를 사용한 모든 요소에 스타일 적용= 태그 선택자(tag selector) = 요소 선택자(element selector)타입 선택자를 사용해 스타일을 지정하면 해당 태그를 사용한 모든 요소에 적용/*기본형*/태그명 { 스타일 규칙 }  롯데 자이언츠 선발 라인업 1번..