코밍이의 하루

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) 브라우저 접두사(prefix) 접두사 설명 -webkit- 웹키트 방식 브라우저용(사파리, 크롬 등) -moz- 게코 방식 브라우저용(모질라, 파이어폭스 등) -o- 오페라 브라우저 -ms- 마이크로소프트 인터넷 익스플로러 - 'prefix-free' 라는 자바스크립트 파일을 이용하면 브라우저 접두사를 붙이지 않고도 편리하게 CSS3 속성 사용 가능 (소스 transform-prefix-free.html 참고) 3. 소스 코드 및 실행 화면 - transform.html Mouse Over - t..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 스타일 우선순위 - 우선순위 : 어떤 스타일을 먼저 적용할 것인지 결정하는 규칙 1) 얼마나 중요한가?(Importance) ① 사용자 스타일 시트의 중요 스타일 ② 제작자 스타일 시트의 중요 스타일 ③ 제작자 스타일 시트의 일반 스타일 ④ 기본적인 브라우저 스타일 시트 가장 중요한 것부터 차례로 나열한 것 ① 사용자 스타일 시트 - 특별한 조건이 필요한 사용자가 그들에게 맞게 구성해 놓은 스타일 시트 - 시스템을 통해 만들어진 것이기 때문에 제작자가 제어할 수 없음 - ex) 윈도우의 '고대비' 설정 ② 제작자..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 주요 문법 1) 전체 선택자 - 말 그대로 스타일을 모든 요소에 적용할 때 사용 - 전체 선택자로는 *(별표) 사용 기본형 * { 속성 : 속성 값; 속성: 속성 값; ...} 2) 태그 선택자 - 특정 태그가 쓰인 모든 요소에 스타일 적용 기본형 예제 태그 { 스타일} p { font-size: 12px; font-family: 돋움; } - 태그 VS 요소 ① 태그 : 말 그대로 태그 자체를 가리키는 말 ② 요소 : 태그가 적용된 것 3) 클래스 선택자 - 특정 부분에 스타일 적용 - 클래스 이름 앞에 마침표..

1. 개발 환경 구분 내용 사용 언어 HTML5, CSS3 개발환경 Visual Studio Code 참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석 웹브라우저 Chrome 2. 스타일과 스타일 시트 1) 스타일(style) - HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소들의 방법 등 문서의 겉모습을 결정짓는 내용들 2) 웹 문서 구성 - HTML : 웹 사이트의 내용 나열 - CSS : 웹 문서의 디자인 구성 3) 스타일 형식 기본형 ①p { ②text-align : ③center; } /* 텍스트 단락을 중앙에 정렬하는 스타일 규칙 */ ① 선택자 : 앞으로 만들 스타일 규칙을 어디에 적용할 것인지 나타냄, 셀렉터라고도 불림 ② 스타일 속성 ③ 속성 값 4) 스타일..