◎ HTML5+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 파일을 따로 만들어 가져오는 것을 '외부 스타일 시트'라고 한다. → 여러 개의 웹 문서에 공통..

[HTML5] 글자 클릭하여 체크박스 체크하기 [<label> 태그 활용하여 체크박스 만들기]

- 글자 클릭하여 체크박스 체크하기 input 태그로 radio나 checkbox를 만들 경우, radio와 checkbox를 눌러야만 선택이 된다. 사과 바나나 한국어 영어 불어 HTML 삽입 미리보기할 수 없는 소스 원하는대로 만들어지긴 했으나, radio와 checkbox가 너무 작아 클릭이 어렵다. 글자를 눌러도 선택되게 할 수는 없을까? 태그를 활용하면 해결할 수 있다. 사과 바나나 한국어 영어 불어 HTML 삽입 미리보기할 수 없는 소스

[HTML5] <input> 태그의 다양한 속성 [autofocus, readonly, required 등]

- 태그의 다양한 속성 태그에는 폼을 좀 더 세련되게 만드는 기능들이 있다. - autofocus 속성 : 입력 커서 표시하기 autoocus를 사용하면 페이지를 불러오자마자 해당 태그에 마우스 커서를 표시할 수 있다. - placeholder 속성 : 힌트 표시하기 placeholder는 텍스트를 입력할 때 도움이 되도록 입력란에 힌트 내용을 표시한다. HTML 삽입 미리보기할 수 없는 소스 - readonly 속성 : 읽기 전용 필드 만들기 readonly는 사용자가 입력하지 못하게 입력란을 읽기 전용으로 만든다. HTML 삽입 미리보기할 수 없는 소스 - required 속성 : 필수 필드 지정하기 required 속성을 지정하면, submit 할 때 값이 비어있으면 에러메시지를 띄운다. - min..