◎ HTML5+CSS3/CSS3🎨

[CSS3] 스타일 우선순위, 스타일 상속 [CSS : Cascading Style Sheets]

- 스타일 우선순위, 스타일 상속 1. CSS란? CSS: Cascading Style Sheets의 약자 '위에서 아래로 흐른다'는 의미로, 선택자에 적용된 많은 스타일 중 어떤 스타일을 나타낼지 결정한다. 2. 스타일 우선순위 스타일 규칙의 중요도, 적용 범위에 따라 우선순위가 결정된다. 사용자 스타일 시트의 중요 스타일 : 저시력자나 색약자를 위한 스타일. 제작자 제어 불가 제작자 스타일 시트의 중요 스타일 : !important가 붙은 스타일 제작자 스타일 시트의 일반 스타일 기본적인 브라우저 스타일 시트 - 하나의 요소에 여러 스타일이 적용된 경우 ⑴ 인라인 스타일 > ⑵ id 스타일 > ⑶ 클래스 스타일 > ⑷ 태그 스타일 문단 텍스트 문단 텍스트 문단 텍스트 문단 텍스트 - 소스에서의 순서 ..

[CSS3] 자주 사용하는 선택자 정리 [selector : 태그, 클래스, id, 그룹 등]

- 자주 사용하는 선택자 정리 1. 전체 선택자(universal selector) 모든 요소에 적용. 문서의 여백이나 글꼴 크기 등 기본 스타일을 초기화할 때 사용한다. → 전체 선택자로는 ＊를 사용한다. * { 속성: 속성 값; ... } 2. 태그 선택자(tag selector) 특정 태그가 쓰인 모든 요소에 스타일을 적용한다. /* 태그 { 스타일 } */ p { font-size:12px; /* 글자 크기 */ font-family:돋움; /* 글꼴 */ } 3. 클래스 선택자(class selector) 특정 부분에만 스타일을 적용할 때 사용 → 적용하려는 태그에 클래스를 붙여줘야 한다. /* .클래스명 { 스타일 } */ .bluetext { color:blue; /* 글자 색 */ } 4...

[CSS3] 스타일 형식과 스타일 시트 [내부 스타일 시트, 외부 스타일 시트, 인라인 스타일]

- 스타일 형식과 스타일 시트 1. 스타일 형식 스타일은 맨 앞에 선택자를 지정하고, 중괄호(｛,｝) 안에 세미콜론(；)으로 구분한다. /* 선택자 { 스타일 속성:속성 값; } */ p { text-align:center; } /* 텍스트 단락을 중앙에 정렬 */ h2 { font-size:20px; color:orange; } /* 2단계 제목의 글자 크기 20px, 글자 색상 주황색 */ 2. 스타일 시트 스타일은 위치에 따라 내부, 외부, 인라인으로 나눠진다. - 내부 스타일 시트 웹 문서 안에서 사용할 스타일을 정리한 것을 '내부 스타일 시트'라고 한다. → 상단 - 외부 스타일 시트 외부에 .css 파일을 따로 만들어 가져오는 것을 '외부 스타일 시트'라고 한다. → 여러 개의 웹 문서에 공통..