키보드와 하루

1. 개념 font-size - 글자 크기 조절 font-size는 글자 크기를 조절하는 속성 속성 설명 절대 크기 브라우저에서 지정한 크기 (xx-small , x-small , small , medium, large,x-large,xx-large) 상대 크기 부모 요소의 글자 크기 기준으로 더 크거나 작게 표시(larger,smaller) 크기 브라우저와 상관없이 글자 크기 직접 지정 em 해당 글꼴 대문자 M의 너비를 기준으로 크기 조절 ex 해당 글꼴의 소문자 x의 높이를 기준으로 크기 조절 px 모니터에 따라 상대적 크기 pt 일반 문서에서 많이 사용되는 단위 백분율 부모 요소의 글자 크기 기준으로 %를 계산해 표시 2. 태그 font-size html5 코드 1 2 3 4 5 6 7 8 9 1..

1. 개념 font-family - 텍스트에 글꼴 지정 font-family는 웹 페이지에서 텍스트 글꼴을 원하는 글꼴로 나오도록 함 글꼴을 지정하는 방법은 3가지 ① 시스템에 설치되어 있는 기본 글꼴을 사용 ② @font-face를 이용하여 웹폰트를 import 한 후에 사용 ③ 직접 다운을 받거나 작업한 폰트를 @font-face로 설정한 후에 사용 2. 태그 font-family html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 DOCTYPE html> 1번 적용 body에 해당하는 나눔명조를 적용 ..

1. 개념 prefixfree.min.js - CSS3에서 쓰이는 브라우저 접두사 자동 생성 CSS는 1,2,3까지 해서 지속적으로 발전해 왔고 지금도 새로운 규악을 기준으로 만들어지고 있음 그러다 보니 브라우저별 표준으로 지원이 되는 기능과 그렇지 않는 기능이 생김 그래서 표준으로 지원이 되지 않는 기능은 브라우저 접두사를 붙여서 사용해 주기도 해야 함 하지만 prefixfree.min.js라는 이용하면 브라우저 접두사를 붙이지 않고도 사용이 가능 다운로드 주소 https://projects.verou.me/prefixfree/ 위 사이트에 접속하여서 아래 그림과 같이 클릭해 주면 다운로드가 됨 2. 태그 prefixfree.min.js html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 ..

1. 개념 !important - 인라인 스타일보다 높은 우선 순위 스타일 적용 스타일을 적용할 때 여러 스타일 적용으로 인해 충돌이 날 경우에는 우선 순위가 높은 것 부터 적용을 하게 됨 스타일 우선순위 ① 인라인 스타일 - 태그 안에서 style로 지정한 스타일 ② id 스타일 - id로 지정한 태그에 한번만 적용하는 스타일 ③ 클래스 스타일 - class로 지정한 태그에 여러 번 적용하는 스타일 ④ 태그 스타일 - 특정 태그에 적용되는 스타일 클래스에서 !important를 사용할 때는 우선순위가 인라인 스타일보다 더 높게 적용됨 2. 태그 !important html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ..

1. 개념 ID 선택자 - 특정 부분에 한번만 스타일 적용 클래스 선택자 같은 경우에는 여러 태그에 적용이 가능하지만 ID 선택자는 한번만 적용이 가능함 ID를 여러 군데에 쓰면 똑같이 class 처럼 적용이 되지만 ID는 중복해서 사용할 수가 없는 것이기에 한 ID 에서는 한 스타일만 적용 ID에 스타일을 주고자 할 경우에는 샵(#)을 붙여서 스타일을 선언 2. 태그 ID 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 DOCTYPE html> 1번 적용 ID가 p_style인 P 태그의 요소에 스타일 적용 2번 적용 class가 p_style_class인 P 태그의 요소에 스타일 적용 결과 화..

1. 개념 클래스 선택자 - 특정 부분에만 스타일 적용 같은 태그로 선언된 요소라고 할지라도 다른 스타일을 적용하고자 할 경우에 사용 즉 태그에 상관없이 특정 부분에 스타일을 적용 class를 선언하기 위해서는 마침표(.)를 먼저 쓰고 다음에 사용하고자 하는 클래스명을 선언 2. 태그 클래스 선택자 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 DOCTYPE html> 1번 적용 textcolor_blue 클래스 적용된 요소 4번만 적용 클래스 적용이 없는 순수한 h2 요소 2,3,4,5번 적용 tex..

1. 개념 * , tag - 전체 선택자와 태그 선택자 * - 모든 요소에 적용할 때 사용함 주로 모든 하위 요소에 한꺼번에 스타일을 적용할 때 사용 기본 스타일을 초기화 해서 설정할 때 사용 tag - 특정 태그가 쓰인 모든 요소에 스타일 적용 2. 태그 * , tag html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 DOCTYPE html> p 태그에 적용될 요소 h1태그에 적용될 요소 결과 화면 코드 설명 1 * {..............} * 태그로 모든 요소에 2가지를 적용해 보았습니다. 하나는 margin-left 라고 해서 왼쪽 여백을 30으로 주었고 , 전체 모든 글자를 굵게 하는 font-weight:bold..

1. 개념 내부 스타일과 외부스타일(.css) 스타일을 적용하고자 할 때 한눈으로 보기 편한게 수정하고 묶어 놓게 되는데 이때 문서 안에 스타일을 정의해 놓으면 내부 스타일이라 하고 파일을 별도로 만들어 연결해서 사용하는 것을 외부 스타일이라고 함 2. 태그 내부 스타일과 외부스타일(.css) html5 코드 test.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 DOCTYPE html> 내부 스타일을 적용한 문구 외부 스타일을 적용한 문구 test.css 1 2 3 4 5 6 2 h1 { color : red ; font-weight : bold ; } 결과 화면 코드 설명 1 p {..............} p 선택자에 적용..

1. 개념 /* */ - 스타일에서 주석처리 자신이 사용한 스타일에 설명을 붙이고자 할 경우에 주석을 이용하여 붙일 수 있음 2. 태그 /* */ html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 DOCTYPE html> 키보드와 하루 입니다 결과 화면 코드 설명 1 /*............ */ 주석처리 하는 방법은 쉽습니다. 그런데 여기서 중요한 것은 주변에서 보면 많은 개발자 분들이 주석처리를 잘 안하고 코딩을 하는 경우를 보게 됩니다. 주석이 중요한 이유는 다른 사람이 볼 때에도 중요하지만 자신이 개발하고 난 후에 나중에 보면은 주석이 달려있지 않을 때 헷갈리는 경우가 있습니다. 주석은 꼭 습관을 들려서 해주시기를 하는 마..

1. 개념 스타일 적용 기본 규칙 스타일 적용할 경우 세미콜론(;)으로 구분하고 중괄호({ , }) 안에서 적용할 스타일을 나열함 2. 태그 스타일 적용 기본 규칙 html5 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 DOCTYPE html> 1 키보드와 하루 입니다 2 키보드와 하루 입니다 결과 화면 코드 설명 1 키보드와 하루입니다 HTML만 본다고 하면 똑같은 div 안에 "키보드와 하루입니다" 라는 텍스트를 입력하였습니다. 여기서는 아무런 스타일을 적용해 준 것이 없습니다. 2 키보드와 하루입니다 2번에서는 p태그를 키보드와 하루 앞에 붙였습니다. p 태그는 기본적으로 단락을 만드는데 사용되는 태그라서 그것이 적용이 ..